The following are my panel notes from @media2006. As I am not the fastest typer I have paraphrased what was said. Should you notice any mistakes please do point them out in the comments for corrections.
A decade of style
In 1996 CSS first became available, IE 3 shipped in 1996. What I am going to talk about to day is the last decade from my perspective on what happened in the last decade.
The CNIT conference in Paris. I was there because I had gone to the WW2 in Chicago and I wanted to go to the one inn paris, I was out of school and I wanted to get the uni to pay for me to do. I wrote a paper on image water marking and they paid for me to go. Chris Lilley said two years prior to this conference:
"If stylesheets or similar info are not added to documents then these documents will only work on a particular browser at a particular resolution."
A pantheon revealed
Chris wilson, Dave Raggett W3c Hon Wium Lie, Bert Bos did a panel on CSS. They did a demo:
"We're not you typical mom & pop operation"
The code had in line styles. i was blown away no more tables. I look at my notes and I see avalidaiotn error, gradient backgrounds that never made it into the spec.
People asked how did I get started in CSS, this was it these two pages , I was like "YES" but what I didn't realise was that I had browsers ahead. (pic of roadblock) and I ended up like this: pic of car crash.
I got home buzzing, CSS is the way forward. But in doing CSS I realised that either Im didn't understand CSS or the browsers didn't. I started to create test pages for myself. This being the geeky person I am ended up in a database (screenshot of db)
I started to publish what I found with regard to the support for different parts of CSS1. Written in filemaker pro.
As free as the wind blows.
What info existed was freely available. Test suite wasn't agressively publicized but was still out there eventually became the W3C test suite.
Ideas, problems and solutions shared through mailing lists and newsgroups.
Free information is an essential part of any new web technology's adoption. Frameworks would not be catching on if people weren't writing free tutorial. At the time this wasn't the way. I published a tutorial on HTML and people emailed me asking why would you give this info away.
You'll get more from telling people. Other people will have had the same ideas it's just whether you beat them too publishing it.
Salvation!...or not
NN4 launched. Margin values added to default values instead of replacing them
a gap between padding and border
floating inline elements was a disaster
Still better than IE3
This meant we had to expand our support information. (revised 1997) This was the second time we had browser incompatibility problem. The first time was when multiple browsers started being shipped. We had these browsers and they were all doing wildy different things. Jeffery Zeldman was talking on a mailing list saying that you had to create a site for a specific browser and you had to create a parallel site for other browsers. On the basis of that (on a whim) they started the Web standards project.
They got people like Jeffrey Veen to be on their advisory board. In advertising roadblocking was buying the same timeslot for an add on all the channels. they borrowed that concept. Jeff Veen worked for wired, when they launched wherever you went you were going to hear about it. they started action comittee, the 7 samurai.
john allsop
David baron
Roland Erikksson
Todd Fahrner
Ken Gunderson
Ian Hickson
Braden mcDaniel
Eric Meyer
Liam Quinn
Sue Sims
Small But potent
focused on practical support both kinds of developers, web developers and browser developers
Always kept in mind that we had to work with vendors.. but weren't adverse to public shaming
Published top 10 problems essays
Tool on our own side when necessary, Microsoft were granted a patent on the use of stylesheets. The steering committee of WaSP was livid. The CSS action comittee talked them out of it. We didn't know what they intended to do with it so we didn't want to attack them. We had to be able to say we're about to do wrong and to not do it.
Never underestimate the effect of a small select group of passionate experts. Joe Clark is going to do this for the WCAG2.0. He's taken some flak for having a smal closed group but in my experience this worked.
We were in the right place at the right time with the right people. If you're working in a relatively fledgling language and things are happening that stop you getting things done then doing this could be the way to go.
Salvation ...or not
IE5 launched
Very lax parsing rules (unitless number assumed to be px)
inline elements ignored
box model still broken.
The first CSS hack
@import url(text.css)
Only advancede browsers got the second style sheet e.g. IE
Not quite conditional commenting but darn close.
The straitjackets of history
CSS implementation were buggy some of them deeply so
Fixing those meant breaking existing sites
Not fixing them meant consigning CSS to trash heap
The jaws of this trap had to pried open..but how?
MS had tons of customers that had sites based around buggy implementations
Enter Hero, on Cycle
Todd Fahrner, if it wasn't for him we wouldn't be using CSS so much today. Over a coffee he said wouldn't it be nice if there was a way to say using no doctype that this should be the buggy rendering engine and if you have a doctype then you use the newer rendering. His book on font rendering is still relevant today.
Enter hero on Caffeine
The person he was talking to was Tantek.
Another person if he hadn't done what he did the CSS might not have caught on. IE 5 for mac. It introduced doctype switching. Setting what the browser resolution was
Test zoom
Excellent CSS 1 support (the secret was he read the specification)
Secent if limited CSS 2 support
Full PNG support with alpha channels
This mac browser broke CSS wide open. This gave web devs and environment that worked like it was supposed to. You could write your CSS and have it act as you intended. This all happened in 2000. It showed the way to the other browser manufacturers. It was a trailblazer. Without this browser CSS use would have slowly died of asphyxiation.
Tantek didn't stop there.
Box model blues
The box model was broken in IE. Customers would have sites written around the IE definition of the Box model. You still couldn't do CSs layouts due to this problem. Tantek looking through the CSS test suite saw a way round this and created the box model hack.
Box Model Hack
Which shows one value to all browsers and then distract IE with a shiny thing and then all the other browsers get the values corrected.
(pic of box model hack code)
This was completely valid CSS.
Without this using CSS for layout wouldn't have caught on. Tantek has since written about what are the features of a good hack. Once that barn door opened people started looking for hacks everywhere. (Pic of the list of hacks on CSS-discuss)
Second thoughts
Todd fahrner (5th March 2001): "It's a crying shame that CSS designed to be so simple and approachable for non-programmers has turned into such a cablists's affair!"
Whether you see the current layout techniques to be approachable depends on your outlook. Layouts become recipes. Sometimes people will go further. CSS is basic but becomes very powerful as you combine parts together.
At this time a renaissance was occuring. People were starting to experiment with CSS. I started CSS-edge, were I was showing bleeding edge CSS examples. CSS playground. CSS destroy showing examples of what CSS can do without necessarily worrying about browser support.
Then Doug Bowman to wired.com and made it a completely CSS layout. In late 2002. This was the first high profile site that used CSS for layout. This spoke to developers and business people. This spoke to the wage payers. The community seized upon this shamelessly.
Then there was the CSS Zen Garden. This spoke to one audience, designers. The markup was a little ornate but it had to be. This is where we the myth that all css sites were boxy and boring was laid to rest. That's because people doing them were not designers, like me.
Some Backlash
Look inside a typical CSS flamer house. What do you see just chairs and not tables: Jean-Yves .....
CSS Beauty, CSS showcases.
CSS was turning up in Chat clients. Adium for example. Lcars sta trek chat theme. Apple's dashboard widgets were CSS and jav ascript. the monthly calendar is done in pure CSS. Why they would want to do that is anyone's guess.
What's missing:
Real world layout is still dependant on source order.
Some effects equal height columns are are hard to do.
No zebra striping
....
Mine the gaps.
Inman position clearing
Resolution dependant layout
sIFR
etc..
Printing with CSS.
Selectoriffic
CSS3 has amazing selectors. The last ditch attempt for CSS to look like perl.
Advanced layouts.
Don't expect these tomorrow.
What's next?
CSS has unplumbed depths. One true layout
Scripters shoring up the weak points
Presentation libraries enhance CSSS and presentation in amazing ways
Work on new and much more powerful cSSS though slow is ongoing
CSS and web standards keep popping up where they are least expected.
And Last
Lots of people have been doing this a long time. Community is important but so is individual action. CSS-dicuss has 7500 members. in the early days people were working out what could be done. Individuals tantek, John Allsop todd fahrner did things and shared them. In the next Ten years we will find things that no-one has ever thought of. I hope that they will publish those things. When you find it savour this moment and then share it.