Notes: Please add your name, if you contribute, to the 'Authors' section at the bottom of this file. DO NOT COPY AND PASTE THIS FILE WHOLESALE. IT MAKES IT SLOW. Export it or save it as text. 15/06/2006 09:15 - 10:15 Keynote presentation - A Decade of Style by Eric Meyer In 1996, CSS1 first became available. IE3, the first implementation of CSS1, shipped 'about now'. What I want to do is talk about my perspective. Slides are the place where information goes to die. The Big CNIT This was where it started for me. WWW5, a big web conference, was held here, in Paris. The big arch, the big thumb, et al. The big finish: a restaurant founded before USA. I was there because I'd gone to WWW2 in Chicago, and was blown away. I really wanted to go to subsequent conferences, including Paris. I was kinda at school, and thought 'could I get the university to pay for me?', so I wrote a paper on image watermarking, and they paid for me to go. Chris Lilley had said, two years previously: 'Écommercial sites want a corporate look, an image, and are prepared to pay real money to get it' 'If stylesheets or similar info are not added to documents then these documents will only work on a particular browser at a particular resolution.' Chris Wilson, Dave Raggett, HŒkon Wium Lie, and Bert Bos did a presentation about this thing called CSS, and there was a demo that completely changed my world view, and it was like this, based on an IBM ad campaign at the time. "We're not your typical mom & pop operation" WIth no font tags. I was blown away: no more font tags, tables, br tags. The notes I took contain at least one validation error, and mention one thing that never made it into CSS: gradient backgrounds. That was before CSS1 went final. If you look at the working drafts from that time, there was a property to define where the background light-source was around the frame of the document. I felt likt 'YES! Finally!' (Car image), but I didn't realise there were browsers ahead. We had _the_ best CSS implementation at the time (IE3). Even at that, it didnt' even try to support everything. So I felt kind of stuck: I got home with my head abuzz. I started trying to do it, and ended up in a mess. 'Either I don't understand CSS, or the browser doesn't' I started to create little test pages for myself, and created a database to plug all the testing information into. This is where the CSS1 test suite came from: me trying to figure out what worked and didn't, and completely over-engineering a solution. This was a time when there were not many people using CSS, and many of the people who tried it got the same experience I did, but got burned and stopped. I thought maybe I should start publishing what I found. At the time, there was only one source for CSS compatibility: an IE3/win document. He didn't want to do anything with the Mac, so I did. * What information was _free_ * Test suite wasn't aggressively publicized but was still out there (so browser makers saw it) * (Eventually became public as the first official 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 People at the beginning who kept their cards close to their chest aren't there anymore, for whatever reason. People didn't understand why I'd be giving competetive information away. Netscape (and I) started in from education, we wanted to take images of restricted access stuff and put it all online. Whenever you have a gut reaction of 'maybe I shouldn't tell anyone', you should and get some benefit. Someone else has thought of it, so you'll need to publish it first. Then Netscape 4 came outÉ Salvation!É or not. * 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! At the time, it was better than everything else (obviously) This, of course, meant we had to start expanding support information: we had to have IE3, 4, and Netscape 4É This was where we started to have the whole browser incompatibility problemsÉ The second time. The first time, which most of you probably don't remember, was when people first started shipping browsers. The way tables behaved didn't work the same across different browsers. We had these browsers, and they were doing wildly different things, and Jeffrey zeldman and others were talking on a mailing list about how browsers acted differently, and how you'd have to implement different sites for different browsers. You'd have to create almost entirely parallel sets for each browser. They went off and set up the Web Standards Project. Their genius was to get people who were well known in the industry (jeff veen, Tim Bray), and when they went public, they borrowed a concept from traditional advertising. There was a concept of roadblocking, where you would buy ad time at the same time on all the channels. You couldn't really do that today, but the WaSP borrowed the concept by putting their name about wherever you went about web design scenes. They started forming action committees, like the CSS action committee, called the CSS Samurai (called that because it had 7 members initially). John Allsop was one of the first people Jeffrey went to, and got my name. Small but potent group * Focused on helping _both_ kinds of developers * Always kept in mind that we had to work with vendorsÉ * Ébut weren't averse to some public shaming when necessary * Published 'top ten problems' essays * Took on our own side when necessary (cf. the Microsoft style patent fracas) Microsoft got a patent on style sheets, and that was the first time I saw members of the steering committee of WaSP livid. The CSS group calmed them down. We didn't know what they intended to do with the patent, but 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 Clarke intends to create the WCAG Samurai due to his feelings about the WCAG. In my experience, this closed group is a good idea and a way to go. In a lot of ways, this group with the top 10 problem essays helped move things forward. We were in the right place at the right time, with the right people. It was a lot of luck, but it worked. Without the 'top 10 problems', browser makers might have worked on other things. If you're working on a fledgling language, and you find it's blocking things you need to do, publishing a non-offensive essay about those things, it'll make things better. And then IE5 came outÉ Salvation! Éor not *Very lax parsing rules (e.g. unitless numbers assumed to be pixels) * Inline elements ignored 'box properties' * Box model still broken * Better than Netscape 4! The First CSS Hack * Happened in the markup layer: link rel for basic.css, style with @import * All browsers saw the basic styles (since all understood link) * Only 'advanced' browsers understood @import The straightjackets of History * CSS implementations were buggy, some of them deeply so We were stuck, as a community. All implementations were buggy - they are still, but less so - but there was no way to fix these. IE5.5 came out, and every site that was developed to work in IE5 would break because of box model changes. * Fixing those implementations meant breaking existing sites Chris Wilson would say 'we have customers'. This was really annoying, but true. He was right: they had tons of customers, and tons of sites developed around this rendering engine. Enter Hero, on Cycle (Todd Fahrner) If not for Todd, or someone with as much insight, we wouldn't be using CSS today, it wouldnt' be that important. Todd was musing if there were a way to say to a browser 'wouldn't it be nice if there were a way to say to a browser, "this is an advanced site"É What about the DOCTYPE?' No-one uses one them, or use an old oneÉ That should be the buggy engine. If it has a HTML4 one, it should use the standards model. Todd was an early CSS rockstar. Doesn't do web stuff anymore. His writing about font-size in browsers is as relevant today as it was when he wrote it years ago. Enter Hero, on Caffeine (Tantek ‚elik) He implemented DOCTYPE switching, and a pretty good CSS rendering engine. This is the other guy who is responsible for CSS catching on. Then IE5: mac Salvation! Really! The Hgh points: * DOCTYPE switching * Display resolution setting If they said 4 points, it'd be 1/6 of an inch * Text Zoom for all text 'What do you mean the user can change the text size?!' * Excellent CSS1 support He read the specification! * Decent (if limited) CSS2 support * Full PNG support You might be saying 'a Mac browser broke CSS open?' Yes: it gave developers some environment where CSS worked basically as it should. There were _some_ bugs, but most weren't really noticed. You could write your CSS and it would act the way you intended. Before now, you couldn't have that happen. This was in 2000. The other way this broke CSS use open was that it showed the way to other browser makers. It provided a benchmark, an example: you could do thisÉ Or you could do better. Without this browser (or one like it) CSS use would have slowly died. 'What're you talking about: CSS development is a pain in the ass nowÉ' That raw promise, and the lack of competing techniques, are what allowed CSS to hang on long enough for this. It didnt' stop there. We still had the whole thing where the box model was broken in IE. IE5.5 still thought width was border edge to border edge. W3 thought it was content edges. You couldn't really do CSS layouts because of this problem. Tantek, looking through the CSS test suite, realised there was a way around this. THis led to the box model hackÉ Feeds one value to all browsers, hides another from IE. With this simple hack, we can get consistency in our CSS layouts. Conceptually, not very different from the @import hack. Contrary to popular belief, this is completely valid CSS. I think this should have been called the voice family hack, because it could be used for different issues than the box model hack. Without this, CSS for layout wouldn't have caught on as early as it did (2001/2002 time?). Tantek has since written about the features of a good hack, one of whcih being something that's valid. Of course, once this barn door opened, people started looking for hacks _everywhere_. It's kinda fun, in a way. As Todd said: "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!" - Todd Fahrner, 5 March 2001 Tantek created a test case showing how to create polygons in CSSÉ I wrote back saying 'I see it, but I don't get it'. Jeff Zeldman said 'Oh, I thought it was just me'. Whether you consider current techniques approachable is very much point of view. Some of the current layout techniques areÉ Convoluted. For most of us, layouts become like recipes. Occassionally, some people will go a little further and figure out why. CSS is a simple language at its core, that becomes complex as you add to it. 'We've managed to get this workingÉ was it worth the cost?' It was around this time that a renaissance happened, where people started looking at CSS again and started experimenting. I created CSS/Edge. I used simple CSS1 to create popout menus requiring JS (for example). Start to say 'hey, this is where we could be going'. Complexspiral, made in 2001, was used as a demo for IE7's ability. Then Doug Bowman turned wired.com into a completely CSS-driven layout, with no tables, save one containing tabular stock quote data. This spoke to two audiences: developers and business people. 'Maybe there's something to this stuff after all!' Then there was the Zen GardenÉ This spoke to one audience: designers. This was in 2003. The markup was a little ornate, but it had to be to offer this at the time. This was where we put to rest the myth that all CSS sites are boxy and boring. It was true, for a time, because all sites were done by people like, well, me, with no visual sense. So, to all intents, the sites _were_ boxy and boring. Zen Garden showed that they didn't have to be. Some Backlash: "Look inside a typical CSS flamer house. What do you see? Chairs, only chairsÉ No tables" Lots of sites using CSS now. At this point, CSS is popping up in the weirdest places. Like, say, Adium. Turns out the themes are XHTML and CSS. You can make it look how you want. Apple's dashboard widgets are XHTML and CSS. Calendar is done with no tablesÉ When they wrote me about how to do it, I recommended they didn't, but they did it anyway. What's missing? * Real-world layout is still dependent on source order * SOme effects (e.g. equal-height columns) are still very hard to do with CSS * Easy alternation (e.g. zebra striping on tables) * Good, let alone great, print styling * But not Explorer! Mind the Gaps * Inman Position Clearing * Resolution-dependent layout * sIFR * etc. These show where CSS needs to go. CSS ought to be able to do this. HŒkum Lie and Bert Bos have talked about print with CSS CSS3 has some amazing selectors. This is CSS's last attempt to look like Perl. Advanced layout * Define a grid, then define where things go in that grid. What's next? * CSS has unplumbed depths, but it's still incomplete * Scripters are shoring up the current weak points * Presentation libraries enhance CSS and presentation in amazing ways * Work on new and much more powerful CSS, though slow, is ongoing * CSS and web standards keep popping up where they're least expected. This is what's next. Going to be lots of CSS and Ajax. We're gonna keep seeing this happening and it's due to how much promise CSS embodies. And lastÉ If there's one thing I've learned, it's that community is important, but so is individual action. There was a CSS community, there still is (CSS-discuss). People trying to find out what it can do, what the limits are. Community was there, but people as individuals did things that no-one had thought of _and shared them_ with the community. When it comes to CSS or anything else, there is stuff it can do that we dont' know about. Someone in this room is going to come up with a new technique that no-one has ever thought of before. Please, that person, savour the moment and publish it. -------------------------------- Authors: Steve Marshall: http://nascentguruism.com/