The Adventures of Cindy Li

@media 2006: Keynote Eric Meyer

June 15 , 2006

Sorry guys Ran in late was helping setup for the conference :)

Note: I’ll fix the when I get home

Keynote Presentation: Eric Meyer

IE 3?
Support group later

Never eat anything bigger than your head
there should be a slideshow mode

Back to the big CNIT
I was there because I had gone to the www2 in chicago and was blown away
andi wanted to go to subsequent ones in paris
i wrote this paper and the university paid for me to go
Chris Lilley he had said two years previous to this converence
“commercial sites want a coportate look an image, and are prepared to pay real money to get it”

“if style sheets or similar information are not added to html, the inevitable price will be documents that only look good on a particular browser

david raggat table markup in form of specificationsHilton Le
Bert Bos (a patheon) revealed
They did a demo that changed my world view on the world wide web.

He did this without tables
I was unaware about what was about to happen on the world web
they contain at least one validation error.

Gradient backgrounds.. oh well
It would have been nice
But that was before CSS 1 went final and you look at the CSS working graphs
there was a background light source on the back of the document.
It would have afected in the inset and outset.
It got dropped
My little palm top here (slide)
how did you get your start in CSS
those two pages this is how I felt. Finally
there were browsers ahead. This is where i ended up.
YOu ahve to remember that there was only one browser only one implementation at the time and only retrospect that we can how many errors and bugs it had.
It didn’t even try to. So I felt kind of stuck. With my head all a boil.
CSS the wave of the future… (refer to smushed car) it was either I don’t know CSS or its the browser. Maybe I should try and figure it out and I won’t be too frustrated and created test pages for myself. I created a database and put all the testing information of all the view. The properties on each of the pages I had here is what I put on my style element. Here is where the css1 test came from. MMe trying to figure out what owrked and what didn’t. Engineering ...
everything was typed uppercase. This was a time when there were not that many people using CSS there were a lot of people using css and had the same expericne and since I had this test suite maybe I should start publishing infromation wether or not things were supported and buggy. Partially supported and bugs and suport of this element or atttribute in css now. Caus eat the time there was only one source of infromation CSS compatiabliity and explorer for windows. I ahve a a mac.. ti was different from what he was seeing vs my mac.
Are you gonig to do something for a mac? Mind if I publish on ie 4 on mac?
This brings me up since I was already doing in final.. pro.
Charting the shoals

As free as the wind blows
-what information existed was free
-test suite wasn’t aggressively publicized but was still out there-eventually became public as the first official w3c test suite)
-ideas, problems, and solutions shared through mailings lists and newscgroups
-free information is an essential part of any new web technology’s adoption

everything was freely exchanged. A lot of people didn’t catch on to the free.
There was a temptation to keep it to themselves.. a competitive advantage.
They stopped doing web. The people who tried to keep things close to the chest have gone by the waste side…
so my feeling is that free info is essential.
Various frameworks that haven’t been ..
I had discussions with people emailing me and why would you tell them. Why?
Giving up an advantage. I worked for a university. Info should be free.
This is where the information came from. We started websites because we wanted to take the catalog online. Stuffit without an appointment. One of these days it’ll get there. You will get so much more by telling people.

Netscape 4 came out.. yeah salvation..
yeah NOT
-If you set a margin value then it didn’t ...
margin values added to default values instead of replacing them.. what???
-a gap between the padding and border!
-floating inline elements was a disaster
-still better than ie3!
seems kind of weird that netscape was better than anything else at a time there was
-still better than ie3!
expanding support information having ie 3, 4 and netscape 4 showing what they supported and what they didn’t.
it was the early days.
This was revised in 1997.
When mult. started shipping mult browsers
Wildy inconsistent browsers.
Why we had a decade of people using tables and spacer.gifs for layout.
We had these browsers and they all did wildy diff things
Jeffrey Zeldmann and his pals were talking on a mailing list
a discussion started…
You couldn’t just create one site. you had to almost create another parallel site to work in another browser. seems crazy
on a whim started the web standards project

They were genius to get people well known in the industry to be on their advisory board. When they launched they followed ...

Roadblocking:
abc, nbc, cbs...three tvs…
if you roadblock and buy the ad time on the same channel at the same time.

You can’t do that today.. maybe.. microsoft.
they borrowed that concept by having Jeff Veen (wired),
No matter when you went on web design lists you would hear about it.
Get some big names and roadblock.
Forming action committees the CSS action committee
CSS Samurai..7 members originally
John Allsop (stylemaster): he was one of the first to ask.. can ask for CSS action committee, he gave them my name
That’s how we met.
Listed the 7 people…
But we were mostly focused on helping. Web developers we had to work with defectors. A little of the public shamming

Focused on helping both kinds of developers
Always kept in mind that we had to work with vendors…
...but weren’t averse to some publics shamming when necessary
published “top ten problems” essays
took on our side when necessary (cf. the Microsoft style patent fracas)

Microsoft was trying to do a patent of stylesheets
they got awarded the patent for stylesheets
the panels were livid but it was the CSS action
They talked them out of the press release we talked them into letting do right. Let’s chat w/them to see what they were going to do? An effective group has to be able to admit they are about to do wrong....

-never underestimate the effect of a small, select group of passionate experts

Joe Clarke is forming experts to recreate a group like this because of WPK
A small closed group can get amazing things done
in a lot of ways this group helped move things forward

Publishing a non offensive essay about it to make these things better
Always to be constructive instead of destructive if you can manage it

IE 5…
-very lax parsing rules (e.g., unitless numbers to be assumed to be pixels)
you couldn’t set box properties but they were ignored in ie 5.
-box model still broken
-still better than netscape 4!
-the first CSS hack
.. happened in the markup layer:
-all browsers saw the basic styles (since all understood link)
-only “advanced” browsers got the second style sheet(i.e., IE)
Not quite conditional commenting but dammed close
this is where it all started and it was

The straitjackets of history
-CSS implementations were buggy, some of them deeply so
-fixing those implementations meant breaking existing sites
-not fixing those implementations meant consigning CSS to the trash heap
-the jaws of this nasty trap had to be pried open...but how?

This where we refrained…
we have customers and it got really annoying to hear we have customers and sites had rendering incoporating the ie broswers.
We couldn’t not fix those implementations

netscape 4 had width and height
ie mac had the box model correct too

How do we do this?

Todd Fahmer, “wouldn’t it be nice to say to a browser this document is more advance? “ Doc type? No one uses this .. pages don’t have doc types.
Maybe we can assume an old doc type html 1 or 2…
if it has html 3 or 4 it should use the webstandards model?
Todd was bascially an early CSS rockstar.
he doesn’t do this anymore
his general about font sizing still stays in touch from time to time

Enter hero on Caffeine

Tantek Celik, ie mac implemented rendering engine
If he hadn’t done what he did.. CSS wouldn’t have caught on as it did
Because IE for mac salvation really.....
its not perfect but doc type switching.

the high points

doctype switching
display resolution setting
text zoom for all text
excellent CSS1 support
decent (if limited0 css2) support
full png support

Designers get angry...what do you mean you can change the font size?

the high points
-DOCTYPE switching
-Display resolution setting
-Text Zoom for all text
-Excellent CSS1 support
-Decent (if limited) CSS2 support
-Full PNG Support

yes there were bugs but honestly they couldn’t find…
absolute positioning but it was the kind of thing you could write the css and act the way you intended. You were lucky if that happened. It showed other ways to other browser comanies an example. You can do this or you can do better.
It was effectively a trailblazer. Without this browser release CSS use would have died. It would have been too much of a pain in the neck.
The promise of CSS are what allowed CSS to happen.
But Tantek didn’t stop there. He was one of the smartest people I’ve ever known.

Windows browser box model was broken. But it still thought width thought it was border width…
Width means this now…
you really couldn’t do real CSS layouts.
My website used a 2 cell table for all of this but precisely because of this problem. I’ll do this 3 cell table.

Tantek looking through the CSS test suite there was a way around this.
led to the Box Model Hack:
(code)
feeds one value to browsers but waves it to the ie 4 so it never sees the second value
With this simple little hack you could get it consistent
I personally thought it should have been called the voice-family hack…

the default value for the font size should be small, medium..
width 300, 400.. but very few people used it for anything other than the box model

Without this CSS wouldn’t have caught on as quickly
2001.. timeframe.
Never underestimate the hack

People started using the hack

Some of the Hacks out there
A whole puzzle solving

“if a crying shame that CSS, designed to be so simple and approachable to non-programmers, has turned into such a cabalist’s affair"-Todd Fahmer

If you have a thick border and one color that doesn’t.. there was a diagonal that formed.
This was sort of a problem this to me was a keypoint one of the reasons CSS has stayed around is because it was simple
You know what that is
Font family helvetica

Float layout was convoluded
Do this and you get this kind of layout and some will go further and find out why
We’ve managed to do this and get it working
there was a renaissance that happened
People started looking at CSS
People started experimenting using css 1
to do this.. (slide)

CSS destroy
CSS playground
that basically pushed CSS as far as it would go
hey this is where we could be going

This demo got used as a bragging point
Then there was a cool point

Then douglas bowman made wired up using CSS
Used tables only for the stocks but used everything else for positions
This site spoke to people because it was high profile .. hmm maybe CSS isn’t that bad?

Then there was this CSS Zen Garden.
Dave???
this spoke to designers
Maybe this is cool after all.. 2003

this is where we put to rest
CSS Sites were done by people like me without a design background
minus Douglas Bowman (design background)

the reason sites in css were boring was because of the people building it

“Look inside a typical CSS flamer house. What do you see? Chairs, only chairs...no tables.”

The beauty of CSS
Whether or not they look boring is aesthetic…

CSS is popping up in the weirdest places for instance
Adium
But I got Adium and I wanted a theme like this so I built one
XHTML and CSS and that’s in and a jackline

Dashboard style...

they even have a multi calendar done without tables

What’s missing?

real-world layout is still dependent on source code
some effects (e.g., equal-height columns) are still every ahrd to do with CSS

sorry missed the rest of the slide

Mine the gaps..

inman positioning cleaning
resolution-dependent layout
sIFR
et cetera

Boom!
Printing w/css
css 3 model
with has a lot of stuff in it

CSS 3
Selectorific
CSS’ example of Perl

Advanced layout
You should be able to define a grid
Page filling table stretchy fill in the gap.. yeah cool
Don’t expect this tomorrow.. 6 months.

What’s next?

CSS has unplumbed depths, but its’ still incomplete
Scripters are shoring up the currrent weak points
Presentation libraries enhance CSS and presentation in amazing ways

CSS and web standards keep popping up where they ‘re least expected

Ajax is a technique
We’ll keep this happening again due to how much promise CSS embodies

Molly’s been doing this 3 months before I am so I have to keep doing this so I can hold the record. One thing I’ve learned is that community is important but also individual action. If you subscribe to CSS discuss. They get 50 messages a day.

Individuals like Tantek, Todd, John, .. myself that did things in the community no one had thought of. They did these things and shared them and helped the community. There are still things in CSS we haven’t thought of yet.
Someone is going to come up w/a new technique that no one else has done and hopefully publish it so that we can all move forward.
That is the most amazing thing and share it!
Thank you.