CSS Turns 10 Years Old

An anonymous reader writes "Cascading Style Sheets celebrate their tenth anniversary this week. The W3C put together the CSS10 site in recognition of this milestone with a Hall of Fame, essays from the past decade, a gallery, and more." I was glad to see the CSS Zen Garden selected for the Hall of Fame, and disappointed (but not surprised) that no browser on my computer correctly renders the Acid2 test.

Comments

ACID2 Compliance

[AKAImBatman]

"[I was] disappointed (but not surprised) that no browser on my computer correctly renders the Acid2 test."

Time to get a new computer.

Here's a list of ACID2 compliant browsers. It's longer than one might think.

Re:ACID2 Compliance

[Kelson]

Time to get a new computer.

Heck, chances are Opera will run on his current computer.

Isn't it interesting, though, that most of the Acid2-compliant browsers are either Mac or Unix-based? I suppose that has to do with the fact that most Windows-only browsers just embed the IE rendering engine, and most cross-platform browsers use Gecko (here's to Gecko 1.9 passing Acid2 when it's finished!). That basically leaves KHTML and Webkit, which are firmly entrenched in *nix and MacOS respectively, and a couple of independent engines: Opera (cross-platform) and iCab (Mac).

Re:ACID2 Compliance

[catbutt]

Although you could start using Safari, I have found a better compromise.

I use Firefox for day to day browsing. But every so often, when I find the need to view the sublime smiley face image in all its glory, I fire up Safari for just that. It serves my needs, since I really only need to see the smily image maybe once a day or so.

Re:ACID2 Compliance

[CastrTroy]

This outlines the problem. Safari has been "Fixed" so that the acid2 test renders correctly, yet still contains lots of rendering bugs. I would have to say as a web developer that I run into many more rendering bugs on Safari than I do on Firefox (although IE is the worst). I can probably code a browser that correctly renders the acid 2 test in 3 days. It won't render any other pages properly, but it will render the acid2 test.

Re:ACID2 Compliance

[egomaniac]

Hell, I can create a web browser that will render Acid2 correctly in five minutes.

Step 1: Retrieve Acid2 HTML
Step 2: Completely ignore it and display a screen shot of the correct rendering

Re:ACID2 Compliance

[Kelson]

Safari has been "Fixed" so that the acid2 test renders correctly, yet still contains lots of rendering bugs.

This nicely demonstrates the fact that Acid2 is not a CSS compliance test (something which I've seen claimed in many discussions). If Opera 9 and Safari 2 can both pass Acid2, but Opera 9 has broader and/or less buggy CSS support, then Acid2 cannot tell you the overall level of compliance.

It's important to remember what Acid2 is: namely, a wish list for web developers. It's a bunch of features that developers would like to use, but which had (until recently) limited, buggy, or just plain no support in major browsers. The prestige of passing Acid2 (and, conversely, the shame of not passing it) was supposed to motivate browser developers to essentially fill in the corners of their CSS support, making it feasible for web developers to start using more of their toolboxes.

It's taken time, but it's succeeded, with one notable "we don't care, we don't have to" exception: Internet Explorer. Of the four major engines, KHTML and Opera have it, and Gecko is getting it soon. And the biggest player on the block seems to be doing its best to prevent us from actually using our tools if we want the majority of web surfers to see our sites as designed.

10 years old...

[Kelson]

...and we're still waiting for a complete CSS2 implementation. Though to be fair, CSS2 is only 8.5 years old, and has been undergone a couple of minor revisions. I've seen good comparisons of browser support for CSS2 and CSS3. Anyone know of a good summary of current browsers' CSS1 support?

Re:10 years old...

[poot_rootbeer]

It's pretty poor IMO that a widespread standard such as CSS 2.0 still isn't implemented fully by any browser.

Maybe that's not only because browser developers have been lazy (IE) or preoccupied with rewriting the browser from the ground up (Netscape/Firefox) for the past 8.5 years, but also because CSS 2.0 is a convoluted, sloppily designed specification?

Re:10 years old...

[Shados]

but also because CSS 2.0 is a convoluted, sloppily designed specification

Correct. Honestly, I don't really ever want to see an -actively pushed-, and considered "standard" specification proposition go out without a reference implementation. Sit down, agree to a specification, propose it, then make a reference implementation, THEN start pushing it.

When you look at most successful specs, from videocard chipsets, to Java specifications, they come with a reference implementation: this makes sure that everything makes sense in -practice-, not just in theory. With CSS, it is all about theory, without real world tests.

The only reason it got pushed as standard, is because the web evolved too fast for its own good, and no one realised what was happening before it was too late, to propose an alternative to CSS.

A little ironic?

[iamjoltman]

Is it just me, or is it a little ironic that the page that celebrates 10 years of CSS is so bland looking?

Wow!

[NoMoreNicksLeft]

PNG was almost 10 years old when IE finally supported it! Maybe this means that IE8* will have CSS! Hurray!

*IE8 is expected to debut sometime in late 2018.

Re:Wow!

[NoMoreNicksLeft]

Thank you. My joke wasn't nearly clumsy enough on its own, I needed someone completely oblivious to sarcasm to come along and add that part in.

10 years

[wumpus188]

... and still no vertical centering. </rant>

Re:10 years

[Scarblac]

Really? Only HTML and CSS? No table and no javascript messing around rewriting the document?

In what way is table not HTML?

Uh oh

[sirnuke]

Uh oh
#navigation li Invalid number : text-shadow Property text-shadow doesn't exist : 0 2px 4px #000

Re:Uh oh

[Bogtha]

The W3C's CSS validator has recently been changed to check against CSS 2.1 by default instead of CSS 2. The text-shadow property was removed from CSS 2.1 because virtually no browser developers bothered to implement it. The stylesheet is still a valid CSS 2 stylesheet, but you wouldn't know that because nobody's bothered to come up with a way of labelling stylesheets to denote what level of CSS they are meant to conform to.

Re:Safari has done Acid2 for more than a year!

[Shados]

The sad part is, Safari can pass Acid 2, but last I checked, it didn't handle onload image event contexts properly. Sad.

Usable positioning in another 10?

[bill_mcgonigle]

Hey, and maybe in another ten years we'll have a position system that works reliably across browsers and can survive the window being resized, the dpi being changed, or the font being enlarged. Other than tables I mean.

I did the CSS -showcase thing a few months ago and about 10% of the layouts by the CSS Masters of the Universe fit the above criteria. It may not be impossible, but the bar's too high.

Re:CSS turns 10, typographers still crying

[croddy]

The great thing about a personal computer is that I can customize the settings to my personal preferences. If, god help us all, you ever do find a way to embed typefaces in web pages, I'll be painlessly overriding your designs with black Bitstream Vera on a pale gray background.

I can't wait either.

Yes and in 10 Years

[fullphaser]

They have yet to convince me just how they are going to make the table obsolete, every time you turn a corner you are hearing from CSS users (including myself) the end of the table is near, don't use the table, I think the real question ought to be why not use the table, besides the lag, the complications with non css table layouts actually tend to go down in my experience. Yes I could spend 2 days figuring out why the div layout is being difficult and use CSS hacks to make it cross browser, but in the long run the div/css layout has a lot to work on before you see it being adopted as anything more than a side note for those who want to show off their skills. Right now CSS because of its major lack of vertical control is far less stable than the table structure, yes we are told you should burn in hell for even thinking of using tables, but on the end note it works, and quite frankly If I am going to get more stable results at the the price of not promoting the great CSS, than I can get over it. I am glad CSS has had 10 years and a congratulations are in order for them, but please if you are going to promise the end of an era or style try to make sure you can back it up with proof like the decline of nearly every major dynamic web software relying on tables to ensure stability (with CMS's trying to move to the div, the BBS stuck in a rut because css/divs just don't seem to help do them well

It was worth it

[WebCowboy]

The real effect of CSS was to make web layout more complicated, so as to keep a role for programmers in web design. Otherwise, the artists would be in full control by now.

The artists DID have control for a dark time in the mid-to-late 1990s, when the Internet bubble was in the earliest stages of inflation. I like to call it the "JPEG Jigsaw Puzzle Age" of the WWW.

While I think that CSS is far from perfect (it WAS, ironically enough, inspired by a concept from Microsoft after all) I do in fact find a properly-written CSS-formatted HTML page much EASIER to follow. Back in the dark JPEG Jigsaw Puzzle age, when trying to view or parse HTML source, it was cluttered with FONT-this and IMG SRC="spacer.gif"-that and TABLEs inside TABLEs inside TABLEs containing image maps. It was absolutely DREADFUL. And no, nested DIVs are NOT the same as nested tables, because tables have rows and columns and are meant for TABULAR DATA--NOT for general structuring of content. DIVs get no more complicated (from a content perspective) than simple nesting, whereas TABLEs have specialised TR collections within them, which in turn have TDs...and COLSPAN and ROWSPAN even further complicate and confuse when used for layout purposes.

CSS is more than a formatting tool--it enables content and presentation separation as well as semantic web design. The web would be beautiful but completely unusable GARBAGE if artists were in "full control". Similarly, the web would be efficient and powereful, but ugly and arcane if programmers were in "full control" (that is, we'd probably still be messing with Gopher, Archie, WAIS or similar powerful but ugly and/or user-unfriendly systems). If the artists and programmers could cooperate properly (and development tools that make use of CSS and HTML standards more effectively enabled such cooperation perhaps) then we get balance between effective presentation and functionality.

I suppose the biggest problem with CSS, beyond inconsistent interpretation of CSS by various browsers (which isn't CSS' fault) is that it is far too easy to mis-use it, and most CSS isn't properly or effectively used (probably because artists are trying to control it ;-). Many (or most?) people who employ CSS see it the way the parent poster Animals sees it: as some kind of fancy layout-macro system. I see a lot of places where class selectors are used when IDs were more appropriate (or vice versa). But even MORE irksome is when I see IDs and classes in HTML and CSS named stupidly: div id="toprightblock"? class="bigboldbluefont"? It makes me want to vomit! Basically, it's like the W3C gave us a set of fancy Henkel knives to use for gourmet cooking and we're all using them to gouge open tins of Chef-Boy-Ar-Dee ravioli.

A properly designed XHTML-and-CSS page is absolutely beautiful to behold: It is attractive yet simple to navigate. It is accessible (it degrades gracefully in audio and text-only browsers, and there is no need for "printer-friendly" links--ever--so get rid of them--NOW). It is easy to manage (don't like the way it looks just change the CSS, and if you need to update the content you can do so in the XHTML with virtually no effect on presentation). It is easy to parse and very human-readable (if you properly name your elements that is--use id="navigationMenu" instead of "toprightblock" and class="articleName" instead of "bigboldblue"). Without all that TABLE/TD/TR/IMG SRC="spacer.gif"/FONT/blah blah clutter in the HTML you can easily see the document structure, links, etc...and without all the

blahblahblah

...etc content clutter in the CSS you can clearly see how each component in a document is supposed to be displayed.

Sorry...had to get this out...sometimes I can't resist a troll...