Eric Meyer ========== Decade of style - css was introduced a decade ago - ie3 etc what happened over the last decade Started at the "big CNIT" - www 2006. Sat in on panel on CSS - chris wilson, dave raggett, Häkom Lie, Bert Bos. They did a demo - based on ibm add campaign - worked in ie3 without font tags or tables. I was blown away, no or
tags or tags. Still has notes from then - noted that gradient backgrounds were missing. I thought "Yes!". But there were browsers ahead. I had the best css implementation in the world - ie3. Was the only css implementation in the world. Realised that either i don't understand css, or the browser doesn't. So made small css test pages. Then made a Filemaker Pro database of all my test information, eventually became the css 1 test suite. Most of the people who tried to use css had the same experience i did, then stopped. So I published my test results. Ideas, problems and solutions were shared. There were some people who tried to keeping information to themselves - didn't share it. Don't hear from them much any more. Free information is an essential part of any new web technologies adoption. If you're thinking of not publishing - someone else will have thought of it. Only question is whether they publish before you. Netscape 4 turned up! Margin values added instead of replacing. A gap between padding and border! Floating inline elements was a disaster. Strange to think that netscape 4 was better than anything else. Needed to expand support tables - chart was revised in 1997. Started to have browser incompatibility problem the second time. The first time was when multiple people started shipping browsers. Tables used to be wildly inconsistent - but harmonised quickly which is why we had half a decade of people using tables for layout. Zeldman and friends on whim created the web standards project. "Wouldn't it be great if there was a group to tell the web browsers what to do". Secret of their success - they got people well known in the industry to be on their advisory board and used "roadblocking" - buying advertising on all three channels at the same time - even if someone changed channels they see your add. Can't really do that today - borrowed that concept - day they launched, every web design zine or list you heard about it. If you want to copy that get some big names and roadblock. Created the CSS action committee, also known as CSS Samurai (as there were 7 members). Small but potent group - by design or by mistake we were all focussed on practical help, could have been all about press releases. About helping web developers and browser developers. Published "top ten problems" essays. Took on our own side if need be (eg: Microsoft style patent issue). Never underestimate the effect of a small select group of passionate experts. Joe Clark is doing the same thing with web accessibility at the moment - taking a lot of unnecessary flak for creating a small closed group. IE5 came along - very lax parsing rules (unitless numbers assumed to be pixels). Inline elements ignored box properties. But still better than netscape 4. First CSS hack - @import. Not quite conditional commenting, but it's close. Hacking started to become necessary - css implementations were buggy, some of them deeply so. Fixing those implementations meant breaking existing sites, not fixing these implementations meant consigning CSS to the trash heap. Microsoft said - "we've got customers" - tons if sites implemented around what rendering engine in IE does. Had to fix this nasty trap - but how? Todd Fahrner - many people don't know his name. Todd was musing over coffee - wouldn't it be nice if there was a way to say "I'm using advanced code, use the w3c mode, some way of telling the browser. Maybe a comment. Hey, what about the doctype?" Doctype switching. Todd was an early css rock star - now makes bicycles. His writing about font sizing on the wbe from late 90's is still relevant today. He was musing over coffee with Tantek Celik - who went and implemented doctype switching. Another person who needs thanks - if he hadn't done what he did we wouldn't be where we were. IE5 for Mac - doctype switching, display resolution settings (so pts would work), text zoom for all text ("what do you mean they can change the text size! i made it that size for a reason!"), excellent css 1 suport (read the spec), limited css2 support, full png support (including alpha channels). Broke CSS open - gave web devs some environment where you could do css and it would generally work the way you would intend. Before then you were lucky if that happened. It showed the way to other browser makers - provided an example - "you could do this or even better". Without this browser, or one like it, css would have slowly dies as it's a pain in the neck. It's still a pain in the neck, but not as much as it used to be. That wasn't all Tantek did - box model was broken in IE 5. Couldn't just change it in IE5. Couldn't do real CSS layouts because of this problem. My site used a 2 cell table for layout - because of this problem. Tantek looked through CSS test suite, found a way round it - box model hack. Show one value to windows, another to IE. Similar to @import hack but in markup layer. Valid CSS. Should have been called voice-family hack - could be used for many other things - eg: redefine IE's concept of standard font sizing from "small" to "medium". Most people only used it for box model. Without this css for layout wouldn't have caught on. Never underestimate the power of a gross hack. Once the barn door opened, people started looking for hacks everywhere. Now a little bit out of control. Todd said in 2001 "It's a crying shame that CSS, designed to be so simple and approachable to non-programmers, has turned into such a cabalist's affair!". CSS is supposed to simple. Weird strings that nobody understands except Tantek and two other people understand. Tantek's study into polygons etc. CSS is simple - if you know markup then "h1 { color:red }" is easy to grasp. Obscure details might be missing, but you could understand it. Some of the new techniques - float layouts etc. Some of it's really convoluted - for some people it's straightforward, but they build robots in their spare time, or put train tracks down and write perl scripts to manage the switches. For the rest of us layouts become recipies. Wow, we got this working, but was it worth the cost? I say "yes". Around this time there was a renaissance. People started playing with CSS again. Started to see sites like CSS Edge, pushing css as far as it'd go without worrying about browser compatibility. Complex Spiral demo (among others) was used as a bragging point when it worked in IE7. Then Doug Bowman made wired.com a completely CSS layout - no tables - except if you scrolled down to the bottom of the sidebar there was stock quotes in a table. First high profile site to use CSS for layout. Spoke to veteran developers and business people, who tell you how to do things. "Maybe there's something to this CSS stuff after all?". Then there was the CSS Zen Garden. Spoke to designers. Maybe there's something to this CSS stuff after all. This put an end to the myth that CSS would be boxy and boring. Until then CSS had been done by people like me - not designers. Doug was an exception, but was constrained by the wired visual style. So CSS sites were boxy and boring. This showed they didn't have to be. The reason CSS sites were boxy and boring were because of the people using it, not CSS. "Look inside a typical CSS flamer house. What do you see? Chairs, only chairs, no tables". Now, all these sites using CSS, all beautiful. At this point CSS is popping up in the weirdest places - Adium chat client uses CSS for themes. Apple's Dashboard. What's missing? Real world layout is still dependent on source order. Some effects (equal height columns) are still hard to do. Easy alternation (zebra striping on tables). Good print styling. But not on explorer. People are filling in the gaps with DOM scripting - Inman position clearing, resolution dependent layout, sIRF, etc. Häkom Lie and Bert Bos are looking into printing, CSS 3 has amazing selectors (css's last attempt to look like perl). Advanced layout - define a grid and where particular elements should sit (but likely to change). What's next? CSS is still incomplete - Alex Robinson's one true layout had stuff in it that nobody had thought of. Scripters are shoring up the weak points, presentation libraries (YUI), work on CSS is slow but is happening. CSS and web standards keep popping up where they're least expected. One thing I've learned, community is important but so is individual action. Individuals like Todd or Alan or John did things within that community - in the next 10 years, when it comes to CSS or anything else - someone in this room will come up with a new technique that nobody else has thought of and I hope they publish it so the community will move forward. When you find it, savour the moment, it's the most amazing feeling ever. Savour it then share it.