Events in CSS and Web Design History
Published 17 years, 10 months past
Here’s a fun Friday question for everyone: what do you consider to be some of the most important events in the history of CSS and web design? How about some of the most overlooked events in that same history? (And yes, an event can be both.) I’m not looking for the “best” answers—I want to know what you regard as important, overlooked, or otherwise worthy of mention. So tell!
Comments (81)
IE5/Mac
the best is still to come: css3
What would one be if there wasn’t something to foreward to?
like this weekend?
cheers, Jan
I think the most important event was in Februar 1997, when CSS got its own working group at W3C. It’s a difficult question though because I can’t see a real “breakthrough” of CSS. It just happened gradually when more and more browsers supported it and more people became interested in CSS and content semantics. It’s not like some day everyone just used CSS. Nevertheless I think the W3C working group was one of the most important steps for the adoption of CSS.
The Wired redesign?
I too must say that IE5/Mac is important and overlooked.
CSS Zen Garden – 12 May 2003 . Who hasn’t said ‘see, with css you can do *this*’
The original acid test and the CSS Test Suite, 1 March 2002:
http://www.w3.org/Style/CSS/Test/CSS1/current/sec5526c.htm
(way, way too late though)
And the introduction of the blink tag, for providing a cause to rally around.
The Mozilla Project’s separation from AOL/Netscape; it paved the way to Firefox, which paved the way to a whole new generation of web apps. None of this would have happened in an IE-only future.
CSS Zen Garden, no question
The Wired.com redesign using CSS and XHTML by Doug Bowman in 2002. That was probably the first time I was really motivated to start using CSS and XHTML.
http://www.stopdesign.com/log/2002/10/11/finally-were-live.html
The wired.com redesign in 2002(3?) led by Doug Bowman. It was the first mainstream site that I saw to go with a tableless layout. I think it barely beat Fortune.com, which came out weeks later. Wired.com showed that a corperate owned, high traffic, ad driven site could be done in pure css. I spen many hours pouring over the code and it changed how I did site from then on.
I’ve never really used Internet Explorer 5.0 for the Mac. I’ve had the chance to check sites I have been building with it on other people’s Macs, but that’s it. Yet I still consider it to be the most significant event in CSS history. Let me explain why.
When IE5/Mac emerged, web designers could finally see what CSS was capable of. Eric’s Edge work gave us something to shoot for (and drool over, I’ll admit). Pretty soon, everyone was moaning at browser manufacturers, “why isn’t your browser as good as IE5/Mac?” The release of IE5/Mac marked a boundary between CSS as a concept and CSS as a revolution. I remember that Tantek Çelik practically become a rockstar overnight, and “CSS” was just as cool as “Web 2.0” is today.
So despite rarely using IE5/Mac or even never owning a Mac, the release of IE5/Mac will always be the biggest event in CSS history, as far as I’m concerned.
The first publishing of Designing With Web Standards in May 2003, for bringing that bright orange bible to the masses!
For me, personally, it was Comdex 2002 when I attended one of Molly’s classes on Web Standards. That really got me started on XHTML and CSS.
I have to agree with the others that mentioned CSS Zen Garden as well. I would also have to add Tantek’s original box model hack.
Discovery of the * html hack
The Holly Hack
IE7 finally adding min-width and max-width support.
Progressive enhancement / separation of layers
The first edition of Designing With Web Standards by Jeffrey Zeldman. It got me (and countless others) all googly-eyed about standards.
Oh, and of course the release of “Eric Meyer on CSS” :)
The release of Opera 3.5, November 18 1998. This was the first browser with more-or-less complete CSS1 support. At that time Netscape 4 and IE4 were just out with very buggy support for CSS1 and random parts of CSS2 proposals.
That 3.5 release made me an Opera-fan for live :)
The biggest events to me personally…
Aug ’98, when I first heard of CSS and instantly saw it’s power.
Jun ’02, Dive Into Accessibility
Jun ’02, the release of Mozilla 1.0.
Apr ’03, CSS Zen Garden
late ’06, What WG, because they (at the very least) made the W3C rethink their HTML WG strategy. This is important in the long run for web design.
For me it was the combination of the Zen Garden and Zeldman’s orange book. Being able to run multiple versions of IE on a single PC was pretty important too.
IE3 was the first browser to support CSS at all. August 1996.
Pingback ::
Effair | Billet | L’évenement le plus important dans l’histoire du CSS
[…] Meyer demande à ses lecteurs: what do you consider to be some of the most important events in the history of CSS […]
I agree with Alexander Graf – when CSS got its own working group at W3C, it was a fist step to recognition.
Otherwise Css Zen Garden and mozila’s separation from the dying netscape (we would not have firefox and ie7 until now otherwise) are worth mentioning.
“To Hell with Bad Browsers” from A List Apart definitely ranks as one of the most important events. I had just been laid off from a defunct dot-com that had some of the most tangled bunch of nested tables you’d ever seen. This article opened my eyes to what was possible with CSS.
I think that knowing how to do things the old way (presentational HTML, tables for layouts) is underrated. Sure I’d rather code to the standards, but when you’re dealing with legacy code that requires a major overhaul and you don’t have the resources, knowing how to deal can be invaluable.
Designing With Web Standards by Jeffrey Zeldman.
CSS Zen Garden.
Tanteks box model hack.
Firefox with its relatively stable CSS implementation.
CSS Zen Garden: it was proof of concept and convinced the nonbelievers
CSS Zen Garden. I still remember to this day where I was the first time that I browsed the site…with my jaw on the floor. Suddenly all this CSS malarkey made perfect sense!
espn.com for sure. Wired’s re-design was important, but they appealed to a geek crowd by nature. ESPN.com was the first main-stream audience type of site to re-design and put their foot down on non-compliant browsers that I saw. It was inspiring.
When Microsoft published those CSS Typography galleries for IE 3.
When Eric (thats you!) made magic happen at css/edge.
When the boxes for layout were diagnosed and explored at thenoodleincident.
When Tantek found the box model hack.
When the Glish layouts (and bluerobot) were published.
When Jeffrey said to hell with bad browsers.
When the doors opened at css zen garden.
When the browsers actually started to get better.
When blogging about css tips and tricks slowed down because using web standards, semantic html and css for layout actually became somewhat manageable.
The founding of the WebStandardsProject
IE5/Mac
release of Mozilla
The release of IE7
The Days when people startet thinking about usability, accessibility and maintainability Website/apps
In my little corner of the world the latest Big Thing was finding “Printing a Book with CSS: Boom!” on ALA, which led me to Princexml, which gave us a way to implement CSS3’s printed page features *today*!
I need to programmatically create a 110-page, highly structured document in pdf, and XHTML, CSS3 and Prince has saved my bippie. Bos and Lie’s book was not only a technical resource but was also an inspiration, since its headers/footers, dot-leaders, etc. were exactly what I was sweating over how to create.
But, that’s just me. Thank heaven I don’t have to make the report display in a browser as anything other than pdf!
For me, the publication of “To Hell with Bad Browsers” by Jeffrey Zeldman (A List Apart, Issue 99) was a watershed. That article felt like the green light to abandon the browsers that couldn’t hack the pace and get on with separating the presentation from the content.
I’m going a bit earlier than most of the folks here with Steve Mulder’s Stylesheet Tutorial – which I’ve thankfully had the chance to thank him personally for.
Douglas Bowman, Stopdesign. The first CSS, standards-based website I really came across. Although Stylegala would be a close second.
Buying a Mac in summer 2003 and firing up Safari…
Without a doubt, CSS Zen Garden and Designing with Web Standards. Both are a little forgotten these days in the shadow of web apps and all, but their contributions to the web are impossible to deny.
Webstandards.org was a big step for the mass adoption of CSS.
Eric Meyer’s Complex Spiral was one of the first useful demo site I discovered.
Macromedia Dreamweaver first CSS support was also a good news for the spreading, despite of the ‘Style1’ invasion.
Later Dave Shea’s CSS Garden helped a lot to demonstrate the power of stylesheets for complex layout purpose.
If CSS3 modules are quickly supported by next IE version, that’ll be part of the (hi)story too.
I really can’t see the value of the development of hacks and workarounds. Sure, it makes working with bad browsers better, but they’re transitory events rather than actual milestones, IMHO. Personally, I’m torn between CSS Zen Garden and CSS Edge.
1. positioniseverything.net. If you can’t tame Internet Explorer, you can’t use CSS and stay sane. This site, more than any other single site, helped us do that by isolating IE’s maddening bugs, and providing some hacks.
2. The layout methods. Ryan Brill’s negative margins, One True Layout, and all the other ones that came before. Not always easy to understand, but they stopped us from resorting to “just one table for layout”, and thus let CSS actually walk the walk.
3. Firefox. Because it was genuinely popular (so web site owners paid attention to it), rendered CSS differently than Internet Explorer (so web site owners hired people who got CSS), and rendered CSS mostly like the standards say (so people who got CSS could actually show people it could work in a real-world, popular browser).
4. Co-operation between browser vendors. No more silly Netscape vs. IE – Web Kit, Gecko, Presto and IE 7’s version of Trident actually agree on a heck of a lot of CSS stuff, at least in the recent versions. This makes CSS look like a viable long-term option.
5. Conditional comments. Supporting IE 6 whilst writing code primarily with decent browsers in mind also now looks like a viable option.
The birth of Eric Meyer.
When Nescape 4 lost marketshare and I could begin ignoring it. Even IE5’s craptastic CSS implementation was better than N4’s, and I could actually get something accomplished using CSS.
January 2006, Firebug is released. No more feeling your way around your CSS. Truly an invaluable tool.
How could we forget… list-o-matic! That was awesome when it first came out, as it showed us how CSS could change the appearance of the lits without sacrificing semantics. Also, I’d say Movable Type was a big event because it made it possible to easily manage the content of blogs and blogs popped up everywhere with consistent design and easily editable. Sure, it wasn’t eh first template system or CMS, but it sure did catch on and change a few things for efficiency and spread quick.
The birth of Firebug.
The birth of Håkon Wium Lie, CTO at Opera Software and the guy who proposed the concept of Cascading Style Sheets back in 1994.
1. Box model hack
2. CSS Zen Garden
3. And when Jan Vandorpe said, “The best is still to come” referring to CSS3.
JSSS: Javascript Stylesheets, a proposal to the W3C made by Netscape in August, 1996 – not necessarily for the huge breakthrough (since it was never widely adopted), but because it was the first time a lot of us involved in Web Development saw Styles as not only rulesets, but as potentially dynamic rulesets, where page appearance could be affected by script. This was more fully realized by IE4 and ‘dhtml’, but JSSS got the gears turning first.
Another vote for Designing With Web Standards by Jeffrey Zeldman.
For me, it would be:
1. The Wired.com redesign. This showed me that CSS could be used successfully on a large, mainstream site.
2. Firefox. Finally a browser that could render CSS well. It was easy enough to install and use that more and more people outside of the web design world started using it.
3. The Web Standards Group, whose mailing list put hundreds of like minded people together to discuss CSS and push it’s uses even further into the mainstream web design work.
When the dot-com bubble burst, I’d say that was a pretty big step forward for web design. All of the sudden, people realized that an idea wasn’t enough to make an internet business successful. Execution is everything. Only those that created usable, useful websites lived on (amazon, ebay).
Many websites before the bubble burst were designed without the user in mind. Usability wasn’t even a part of most web designers’ vocabulary. It was as if the user should feel lucky the website existed and should spend hours “learning” how the site works. It’s refreshing these days when sites are so well designed that you instantly know how they work. There’s no guessing on where to click or how to find the content you’re looking for. It just makes sense.
Of course, there’s always room for improvement, but I’m glad the bubble burst at least helped everyone realize there was a problem.
IE6 (don’t laugh!). You could ignore the box model hack if in strict mode. And at the time, it was brilliant – no-one had really tried to do the kick-ass advanced stuff we try now, so it took a while to understand its deficiencies.
CSS Zen Garden. (D’oh ..)
IE7 to show that the Redmond beastie, at least as manifested as Chris Wilson, both listens and cares.
Most important for Css:
Probably the drop of Ie on Macs for Safari and the rise of a project called Firebird wich later became Firefox.
Most important for Webdesign:
Table-less / full Css redesign of Espn, dropping support for old browsers.
Most overlooked:
text-indent: -100em;
as mentioned already – opening the eyes of so many of us: ‘Designing with web standards’ by Jeffrey Zeldman
Complex Spiral – need I say more… ;)
CSS showcases like CSS Zengarden, DesignMeltdown etc to keep us all inspired
Firefox extensions like the Webdeveloper toolbar making CSS coding easier to learn as well as to work with
I agree with all the things said above, and I have to add:
Chris Pederick’s Web Developer Extension for Firefox is my personal one.
Molly taking a position just recently at Microsoft will be the next big step.
As for a big event in web design, I think everyone ought to agree that the invention of XMLHttpRequest at Microsoft deserves a lot of credit for getting us where we are today.
For me,
The CSS of Macromedia.com web site with launching of MX products.
Most of the comments here are great but I can’t forget WaSP for so many reasons
From their work with dreamweaver, to the browser upgrade campaign, to working with the browser manufacturers, and so much more.
Also what about CSS-d, to think of all the questions I answered on there, and no one mentions it? I’m hurt (joke, jeez, Sooo serious!)
position is everything
jesse’s bookmarklet site (long before web dev toolbar I used some of these day in and out)
browser hacks! (examples)
the NYPL online style guide
I could go on… but well I’ve probably bored everyone by now
I’ve been working with css since I first started with designing for the web back in 1997. The really big changes for me was IE for mac and later IE6. I knew then that I’d started on the right track. CSS was going to stay, Firefox underlined that fact very clearly. After my csszengarden submission I felt like I’d gradutated only to find out that getting large companies to jump on the web standards bandwagon so that I do the same for them felt even better.
The biggest event recently is probably the release of IE7. Those who haven’t jumped on board by now are not taking their work seriously.
“To Hell With Bad Browsers” definitely. Zen Garden ditto. I’m also with Paul Waite on all those early pioneers of CSS layout techniques. For me, most of these were found via articles on A List Apart – Taming Lists, Custom Corners, Suckerfish….
Of all the layout breakthroughts if I had to pick one I’d vote for Jan 23 2004 with Ryan Brill’s negative margin layout from Dave Shea’s Friday Challenge. Partly a personal one for me as it was posted exactly as I was grappling to achieve the same effect. An important step in realising flexible layout independent of source order. Also a technique that remains non-obvious.
Looking back at the articles I’ve picked out, I’m struck by how most were published in a relatively short period over Autumn/Winter 2003-4. (Dan C’s “faux columns” was on Jan 9 2004.)
I’d say Firefox’ adoption is the best thing that has ever happened to CSS. It forced Microsoft to start development of Internet Explorer 7 and made both them and the web development community pay attention to standards and other browsers than IE. And the only way to create cross-browser pages that work with minimal effort is to use CSS.
For me – one of the most defining events in the history of CSS has to be the launch of Mozilla Firefox. Yes, it”s based on the Mozilla-standard browser that had been around for some time beforehand – but Firefox was mainstream (super marketing effort from the Moz guys!), funky (with that Jon Hicks logo), and best of all – CSS-friendly!
This was the first Internet browser that showed me how appallingly-bad IE was (for CSS at least) and I think it has had a much bigger impact on how web designers have viewed CSS (and learning CSS) than it has been given credit for. In illustrating the correct way to render CSS – I think Firefox has motivated designers and developers to really push the boundaries of CSS 2.0 and web standards web design too. It”s certainly not the single-most important event in the history of CSS and web design, but it”s an event that I think really opened-up some of the great web design work we”re seeing today.
My enthusiasm for CSS (and Web Standards in general) really took-off after I got my hands on Firefox.
Showcase sites like “CSS ZenGarden” just wouldn”t have been anywhere near as popular if we could only view them on browsers like IE!
John Oxton sticking flowers upside down on the top of his blog was a good move too! ;)
when espn redesigned with css, it gave developers the ability to point to a high profile site/company (non-tech) to show that using css and web standards is possible and beneficial. the higher-ups were no longer able to say no one else was doing it, so they had to let us move forward. so i guess it’s the adoption of web standards by large, non-tech companies that i see as importnat in the history of css and web design history.
What about the blink tag?
Sorry…
We haven’t had time to assess the impact yet; but, I believe Microsoft working with Molly, no longer supporting FrontPage and it’s mucky extensions, and providing a far more compliant CSS based Microsoft Web Expression may have done more to clean up and maintain the web than even the launch of IE 7. Microsoft holds a lot of sway in corporate US. I believe any step forward they make is noteworthy.
The Microsoft CSS Gallery (late 1996, only worked in IE3) was the first site to demonstrate the creative visual possibilities of CSS. Once I saw it, I was changed. Mind-blowing. Way ahead of its time.
Steve Mulder’s book explained how CSS worked in IE3 and how it looked like it was going to work in upcoming IE4 and Netscape 4. It even talked about how CSS was supposed to work. Mind-blowing. Way ahead of its time.
Glish and Layout Reservoir and such, along with Mark Newhouse’s Real World Style, were hugely helpful in getting a vanguard of designers and geeks to begin doing real CSS layout. These sites made a huge difference and never get enough credit.
The single most important event.. [Fuck you anyway, Meyer, this type box with fucked up Javascript preview sucks the juice out of my browser].. is Microsoft spending 10 fucking years not giving a fuck about standards like CSS and XHTML.
And the second greatest event is the fucktards you represent, who’ve spent hours and hours over the last 10 years patching it up for IE with hacks and genreally slaving for Microsoft.
There you go. Now I’ll fuck off, and I hope people like you do (from the web) as well.
High on my list:
The day Firefox broke 10% market share and weakened the stranglehold of IE5 and 6, which were the bane of many peoples’ existence at the time. Entire city blocks shook with bouts of cathartic, maniacal laughter heard from “standardistas” the world over.
CSSEdit — extremely handy live editing of CSS (even on a live web app).
FireBug
MochiKit… as it claims: it makes JavaScript suck less (especially if you are a Python hacker).
The day someone e-mailed me the NYPL style guide was a personal CSS watershed. Somehow it just made things “click” in my head.
I think the most important thing is still to come:
we have to break down the digital divide between developers and authors.
Nowadays there is a mutual incomprehension between the two counterparts.
Eric, you know what I mean.
bye,
Gabriele
I have to say that I thought that CSS Reboot, the first of which was I believe was in the Spring 2005, was and is pretty inspiring. I like the fact that the focus of the contest has shifted from pure looks to an emphasis on applying web standards to the the overall design and HTML.
I have to agree with some folks and say espn.com. they were the first site i tried to mimic when searching for in-depth css
Again the CSS Zen Garden and ‘Designing with web standards’.
w3c, DOM, firefox, complexspiral, csszengarden, firebug.
First of all, open & free standards.
1. Cascading Style Sheets: Designing for the Web, 1st Edition
2. WebReview.com’s Style Sheet Reference Guide
3. IE5/Mac
4. Wired redesign
5. CSS Zen Garden
One:
To Hell with Bad Browsers. It rallied for the first time a quasi-unionized effort to collectively bring Web design to the next level.
Two:
The amount of time I still have to spend supporting not just IE, but multiple IEs for clients. It doesn’t matter if it’s CSS hacks or conditional comments (ms-proprietary hacks). It still takes way too much time to whip IE 6 and 7 into shape. If IE 5 and 5.5 or IEmac are included (and they usually are), then look out for the trouble-shooting time!
Three:
To Hell with Bad Browsers Again! It hasn’t happened yet, but I think we’re overdue. Netscape 4 is dead, but Explorer (even including 7) is still holding back the level of design that (x)HTML has been capable of for over 7 years. Progressive enhancement my ass. If you’ve got the “wow” in a modern browser, the client wants to see it in his lame-o Explorer browser too. Can’t we just boot that sucker to curb yet?
The publishing of Designing With Web Standards really sent web standards main-stream, and has become the bench-mark by which new developers have come to judge themselves.
Its’ publishing took web standards from being idealism in email discussion groups, and turned them into the converted rice of workability.
For an entire generation of standardistas Zeldman’s touque has become the iconic emblem of web standards.
I have to agree CSS Zen Garden is what a friend of mine showed me to prove the real power of CSS. Without this site CSS wouldn’t be as widely implemented today. After viewing this site I diligently started studying CSS I’ve got 3 of Eric’s books one in my desk at work! HMM is it fair to nominate the work of Eric Meyer on his site?
Birth of Dan Cederholm, Firefox, birth of xHTML, and ofcourse Zen Garden…
Pedagogical books like Head First XHTML and CSS (Oreily) Maybe not high up on the list, but teaching material is important.
I am lecturing in webdesign at Lillehammer University College and my 13 students have no ideas that layoutblocks was made with kinky tabels. The only world they now is strict, floated DIVs, PNGs. Its a great start and I maybe tell them about the browser war when they grow up. Infact. The distribution of IE7 started the day before I was teacking about webgrapics. So I skipped gif. I just had to…
CSS Zen Garden – opened my eyes to how much better clean semantic HTML/CSS coding would be for my future web design and development.
Dan Steinman cross-browser javascript library: DynAPI.
I have to agree with all the people who picked the Wired Redesign – I remember it as quite the eye opener for a lot of people!
The Mosaic browser, 1993:
Text-based browser features have been extended to show images.
Pingback ::
Year of A List Apart - The History of the Web
[…] really recommend reading a thread on Eric Meyer’s blog from early 2007. In it, he poses a pretty simple question for his […]