Slashdot Log In
CSS Turns 10 Years Old
Posted by
kdawson
on Tue Dec 19, 2006 02:10 PM
from the celebrating-in-style dept.
from the celebrating-in-style dept.
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.
This discussion has been archived.
No new comments can be posted.
The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
ACID2 Compliance (Score:5, Interesting)
(http://www.intelligentblogger.com/ | Last Journal: Monday August 27, @11:47AM)
Time to get a new computer [apple.com].
Here's a list [wikipedia.org] of ACID2 compliant browsers. It's longer than one might think.
Re:ACID2 Compliance (Score:4, Informative)
(http://www.hyperborea.org/journal/ | Last Journal: Tuesday September 11, @05:30PM)
Heck, chances are Opera [opera.com] 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 (Score:5, Funny)
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 (Score:5, Insightful)
(http://www.kibbee.ca/)
Re:ACID2 Compliance (Score:4, Funny)
(http://slashdot.org/)
Step 1: Retrieve Acid2 HTML
Step 2: Completely ignore it and display a screen shot of the correct rendering
Re:ACID2 Compliance (Score:5, Insightful)
(http://www.hyperborea.org/journal/ | Last Journal: Tuesday September 11, @05:30PM)
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... (Score:5, Interesting)
(http://www.hyperborea.org/journal/ | Last Journal: Tuesday September 11, @05:30PM)
Re:10 years old... (Score:4, Interesting)
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... (Score:5, Informative)
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? (Score:5, Funny)
Safari has done Acid2 for more than a year! (Score:1, Redundant)
(Last Journal: Saturday August 28 2004, @02:35PM)
Are you on acid?
Apples Safari has been able to render Acid 2 for more than a year now.
- - -
http://mil.int.gov.edu.org [edu.org]
Re:Safari has done Acid2 for more than a year! (Score:4, Informative)
And apparently (Score:2, Redundant)
(http://www.informationr.us/ | Last Journal: Monday November 05, @09:38AM)
It just works! (Score:2, Informative)
(http://www.skia.net/)
You're clearly not using a mac [slashdot.org].
Wow! (Score:5, Funny)
(http://pdatabase.dyndns.biz/ | Last Journal: Saturday June 04 2005, @11:50AM)
*IE8 is expected to debut sometime in late 2018.
Re:Wow! (Score:5, Funny)
(http://pdatabase.dyndns.biz/ | Last Journal: Saturday June 04 2005, @11:50AM)
10 years (Score:5, Funny)
Re:10 years (Score:4, Informative)
(http://marshallbrain.com/manna1.htm)
Really? Only HTML and CSS? No table and no javascript messing around rewriting the document?
In what way is table not HTML?
Oh thanks /. I feel old now :( (Score:1)
(Last Journal: Thursday August 21 2003, @11:52AM)
Dont let me start with 1995 and my commodore 64 computer
Ten Year Anniversary Page @ w3c.org (Score:1)
(http://profiles.yahoo.com/drummer_nrg)
http://www.w3.org/Style/CSS10/ [w3.org] first link points to the press release and the CSS Hall of Fame [w3.org] is worth visiting, too!
It was about ten years ago that I saw Hakon present CSS to some of the engineers and product managers at Netscape, where I was a technology evangelist. That was a great moment in my career, where I knew how much trouble we had with the rendering engine as well as how much responsibility we had to fight the good fight for standards.
Thanks to Hakon and Bert, congrats to the w3c, and keep on on styling your designs!
http://www.csszengarden.com/ (Score:2, Funny)
Come on guys, it might be valid CSS, but it is not easy on the eyes.
Uh oh (Score:4, Interesting)
(http://sirnuke.sytes.net/)
#navigation li Invalid number : text-shadow Property text-shadow doesn't exist : 0 2px 4px #000
Re:Uh oh (Score:4, Informative)
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.
10 years of "how come" (Score:2)
(http://my.opera.com/usability)
Gah! Ten? (Score:2)
(http://sntc.iri5.net/ai/)
Great! Now let's use it!! (Score:1)
(http://www.tekwiz.net/)
CSS turns 10, typographers still crying (Score:2)
(http://www.designpoolstudio.com/)
Even if browsers were to finally properly support tracking, x-height controls, etc., CSS is still obnoxiously rudimentary in comparison to the typesetting tools that exist for static type. Hell, it's been over a decade and there is still no widespread adoption of a way to embed an f'n typeface in cross platform / cross browser way that does not annoy everyone. ugh.
Re:CSS turns 10, typographers still crying (Score:4, Interesting)
I can't wait either.
Usable positioning in another 10? (Score:5, Insightful)
(http://blog.bfccomputing.com/ | Last Journal: Tuesday August 07, @06:50PM)
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.
Yes and in 10 Years (Score:4, Insightful)
(http://www.fullphaser.com/)
That's 10 years of not using it! (Score:1, Troll)
(http://ninenine.com/)
Slashdot using invalid css? (Score:1)
(http://mgran.blogspot.com/)
18 December 2006 - Fuji CSS Validator released (more) http://jigsaw.w3.org/css-validator/ [w3.org]
--
W3C CSS Validator Results for http://www.slashdot.org/ [slashdot.org]
Sorry! We found the following errors
URI : http://images.slashdot.org/base.css?T_2_5_0_138 [slashdot.org]
16 h1, h2, h3, h4, h5, h6 Invalid number : text-shadow Property text-shadow doesn't exist : #000 0 0 0
176 Invalid number : min-width Property min-width doesn't exist : 0
178 Combinator ~ between selectors is not allowed in this profile or version
345 div.storylinks ul li.comments Invalid number : text-shadow Property text-shadow doesn't exist : #000 0 0 0
638 div.storylinks ul li.bin Invalid number : text-shadow Property text-shadow doesn't exist : #000 0 0 0
659 a.ac-source Invalid number : background-color darkgray is not a color value : darkgray
668 #ac-select-widget Invalid number : background-color lightgray is not a color value : lightgray
674 #ac-select-widget input Invalid number : border lightgray is not a color value : 2px solid lightgray
688 #ac-choices
URI : http://images.slashdot.org/slashdot.css?T_2_5_0_1
15 a#newuser Invalid number : text-shadow Property text-shadow doesn't exist : #000 0 0 0
Warnings (224)
URI : http://images.slashdot.org/handheld.css?T_2_5_0_1
17 Same colors for color and background-color in two contexts #logo h1 a and #slogan h2
26 Same colors for color and background-color in two contexts div#links div.block div#links-sections-title and
26 Same colors for color and background-color in two contexts div.block div.title and
26 Same colors for color and background-color in two contexts div#links div.block div#links-sections-title and
26 Same colors for color and background-color in two contexts div#links div.block div.title and
10 years of almost pure jibberish... (Score:1)
Here I am with mod points and I am frittering away my time to use them by replying to this.
CSS... Ah yes the grand attempt to make HTML more usefull. It has been somewhat successful, but thats the problem then isn't it, its only somewhat successful, and all of the finer points that would make web sites really functional are left to chance.
My basic problem with CSS is that in its laudable attempt to make something from a thing that was never meant to be what it has been twisted and shoe-horned into, is that no one will call a rather well polished turd, well, a turd.
CSS at best is marginaly comprehensable. The Documentation is horrible. The grammer for the various incarnations of weak hacks is totaly unrelated to itself. I have made a solid attempt at using CSS. Some of it is pretty straight up, yet the finer points of it are black alchemy. Now I am not saying I am the sharpest tool in the box, but neither am I the dullest.
Sadly CSS is help together contextualy. For example, Position Relative. Well relative to what? The preceeding DIV? The immediately preceeding line of HTML? It needs to be glued together better, objectified if you will. In my opinion if something is declared relative, it should be a requirement that it be declared what it is relative to, instead realying on simply the preceeding line, ie: position relative(object). This glues it firmly to another object and therefor cements the relationship and each object knows what it should be relative to and can behave accordingly.
Ok and then there is the whole EM -v- PX debate, and the CSS people can't even make up their own minds about the best usage of it. Now this is not quite the same as a discussion about using i++ -v- i = i + 1. This is about fundamental behavior of the user agent in its interaction with the content! Should padding around an object be some relative to the size of the font as in this example [bigbaer.com] which shows a padding: 1.5em?? I was under the impression that pixels are used to deal with the placement of an object within the browser window, relative to its upper left hand corner being 0,0 and its lower right hand extreme ( even if it is beyond the viewport and must be scrolled to ) being the x,y limit of the virtual screen space.
CSS extends standard HTML tags, yet one can create completely new things with CS. Then as I aluded to previously there are the grammer conventions. .content which is shorthand for document.content ( once again everthing being relative ) and the statements that beging with pound symbols (#) or not as the case may be, again non intuitive useage.
Then there are the various browser work arounds. Now clearly this is not the problem of CSS or its designers, this is the problem of user agent implimentations and their programemrs, or really is it... Lets ponder this for a moment with the PX - EM debate, or the position absolute debate. it would seem that CSS designers and the actual spec authors want to use everyhting with everthing else except where they don;t want it and then only if condition X exists. Now from a programers point of view, this is what we call, out worst nightmare. We like to write code that is straight forward and follows a given set of rules. We handle exceptions when the input violates those rules and handle them accordingly, usualy by showing some sort of message that is minimly explanitory and at least somehwat polite. I for one would really like to see a CSS rule matrix, developed by the CSS people that is coprehensive to the layout process. It would an interesting exercise and programemrs who try to write code to interpret this hodge-podge would probably be eternaly greatfull, well as greatfull as a programmer can get when people screw up their well ordered world.All in all I think the goals of both HTML and CSS are laudable, but they are fundementaly broken. No
Heh, those funny typos (Score:3, Funny)
CSS (Score:1)
(http://www.sofarida.com/)
CSS bad decision (Score:1)
(http://www.geocities.com/tablizer | Last Journal: Saturday March 15 2003, @01:22PM)
10 years old (Score:1)
(http://theseer.wordpress.com/)
CSS validator useless (Score:2)
(http://wyoguide.sf.net/)
Yet whenever an error is spotted the resulting error message is more or less useless.
td,th,tr{
align:left;
vertical-align:baseline;
}
=> td, th, tr Die Eigenschaft align existiert nicht : left
Now each browser I tried interprets this correct even if it might be wrong formulated. Why can't the validator detect it as well and give a better error message?
Another case is the "size=1" argument in a "select" statement.
select.mini {
width:10em;
size:1;
}
=> select.mini Ungültige Nummer : size Die Eigenschaft size existiert nicht : 1
Again any browser is able to interpret this correct only the validator isn't.
The question arises why have the W3C validator such silly beginners syntax detection while any browser is far better? How can standardization been taken serious if W3C can't provide better tools?
O. Wyss
Cut the crap! (Score:1)
I'd rather browser makers worked on fixing bugs [mozilla.org] (may take a while to load) and more rich features.
Huh. (Score:2)
(http://www.nulldevice.com/)
I think a huge problem is that a lot of people use CSS like they use font tags - instead of reusing tags and classes, and allowing for cascades, they create a new class for every block that they want to style.
Thank god for DeCSS (Score:2)
Wow! (Score:2)
There's certainly still room for improvement, and from what I read we can expect big things for it in 2007.
I still think de_dust is the best though.
Re:CSS or CS:S? (Score:3, Funny)
(Last Journal: Saturday January 13 2007, @02:19AM)
What's a Fire Millen? (Score:1, Offtopic)
(Last Journal: Tuesday August 07, @01:18PM)
Re:And here I thought (Score:2)
(http://inglorion.net/ | Last Journal: Thursday October 06 2005, @07:17AM)
It took that long? I never knew.
Re:Was it worth it? (Score:2)
Because it's always fun to have to change 342 different areas/tags to make page or site wide change.
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.
No one forces you to use CSS, if your hypothetical artist wants to they can have all the fun they want with html. Well that is until their templated editor craps out on something (I'm assuming they're not utterly stupid), they need to do something semi-complex (ie: javascript, user controlled templates, etc.), someone else needs to take over the mess they made, bandwith is becoming a problem and so on.
Re:Was it worth it? (Score:2)
(http://www.fylo.net/)
The real effect of CSS (and its goal) is separation of content from presentation.
CSS is about as much programming as HTML. Ever tried to execute a stylesheet? I don't think so. Calling it a macro system proves you have no idea what you're talking about.
The only added complexity in using CSS is that it's another syntax to learn. Offsetting that is the fact that table layouts are bloated and their structure is hard to follow. CSS layouts result in leaner, cleaner documents. As they say, "It's about content, stupid."
As for the "artists", they're still around, thinking that a web page is a canvas that they can paint whatever they like on. They never knew HTML, they didn't bother to learn CSS, they have no use for any web standards because they are ar-teests, that's why they use Flash. Or still slice up their Photoshop mockups into tables.
It was worth it (Score:5, Insightful)
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
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
Sorry...had to get this out...sometimes I can't resist a troll...
Re:And here I thought (Score:2)
Re:Was it worth it? (Score:1)