Slashdot Mirror


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.

34 of 176 comments (clear)

  1. ACID2 Compliance by AKAImBatman · · Score: 5, Interesting
    "[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.
    1. Re:ACID2 Compliance by Kelson · · Score: 3, Informative
      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).

    2. Re:ACID2 Compliance by catbutt · · Score: 5, Funny

      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.

    3. Re:ACID2 Compliance by CastrTroy · · Score: 5, Insightful

      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.

      --

      Anthropic principle: We see the universe the way it is because if it were different we would not be here to see it.
    4. Re:ACID2 Compliance by egomaniac · · Score: 3, Funny

      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

      --
      ZFS: because love is never having to say fsck
    5. Re:ACID2 Compliance by Kelson · · Score: 4, Insightful
      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.

    6. Re:ACID2 Compliance by Drooling+Iguana · · Score: 2, Funny

      Flash.

      --
      ... I'm addicted to placebos
    7. Re:ACID2 Compliance by badpazzword · · Score: 2, Funny

      Because they wrote specific hacks, just to be able to pass the test. Because most browsers need specific hacks, just to be able to render regular web pages.
      --
      When ideas fail, words become very handy.
  2. 10 years old... by Kelson · · Score: 5, Interesting

    ...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?

    1. Re:10 years old... by Salvance · · Score: 2, Insightful

      I don't know if we should give browsers any slack just because CSS2 is "only 8.5 years old". It's pretty poor IMO that a widespread standard such as CSS 2.0 still isn't implemented fully by any browser.

      --
      Crack - Free with every butt and set of boobs
    2. Re:10 years old... by poot_rootbeer · · Score: 3, Interesting

      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?

    3. Re:10 years old... by Shados · · Score: 4, Informative
      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.
  3. A little ironic? by iamjoltman · · Score: 4, Funny

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

  4. It just works! by skia · · Score: 2, Informative

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

    You're clearly not using a mac.

    --

    --

  5. Wow! by NoMoreNicksLeft · · Score: 5, Funny

    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.

    1. Re:Wow! by NoMoreNicksLeft · · Score: 4, Funny

      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.

  6. Re:CSS or CS:S? by Ingolfke · · Score: 2, Funny

    I'm not up on the finer points out the definitions for "nerd" and "geek" but it would seem to me that if your first thought about a core web technology like CSS was about Counter Strike your more likely to be a loser then a nerd... maybe a nerdy loser.

  7. 10 years by wumpus188 · · Score: 5, Funny

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

    1. Re:10 years by Yvan256 · · Score: 2, Insightful

      ... and still no "height=100% of parent container" either. We're still forced to do either javascript and/or visual hacks to make two columns of the same height with dynamic content inside each column.

    2. Re:10 years by brunascle · · Score: 2, Informative

      that's what they're talking about.

      i dont remember the specifics of it, but i ran into this problem last year trying to set height=100% on a table. when it didnt work, i hunted down the reason: apparently, proper HTML has never had height=100% as a valid value for a table. the w3c explained that tables were never meant to be used for layout, but only for displaying tabular data.

    3. Re:10 years by Scarblac · · Score: 3, Informative

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

      In what way is table not HTML?

      --
      I believe posters are recognized by their sig. So I made one.
  8. Uh oh by sirnuke · · Score: 4, Interesting

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

    --
    Zing!
    1. Re:Uh oh by Bogtha · · Score: 3, 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.

      --
      Bogtha Bogtha Bogtha
  9. Gah! Ten? by Ai+Olor-Wile · · Score: 2

    CSS10? But IE still doesn't have CSS2... aha! It's a binary joke! I get it now! There are 10 kinds of browsers in the world: those that implement CSS properly and those that don't.

    1. Re:Gah! Ten? by RAMMS+EIN · · Score: 2

      ``There are 10 kinds of browsers in the world: those that implement CSS properly and those that don't.''

      Sadly, I think there is only 1 kind.

      --
      Please correct me if I got my facts wrong.
  10. Re:Safari has done Acid2 for more than a year! by Shados · · Score: 3, Informative

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

  11. Usable positioning in another 10? by bill_mcgonigle · · Score: 4, Insightful

    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.

    --
    My God, it's Full of Source!
    OUTSIDE_IP=$(dig +short my.ip @outsideip.net)
  12. Re:http://www.csszengarden.com/ by ewhac · · Score: 2, Interesting
    You did check the hundreds of other stylings of the same content, didn't you?

    In case you didn't, here are a few examples.

    The point of the site is to illustrate how the exact same HTML file can be displayed in an infinite number of ways by simply changing the CSS. The site is essentially an argument for a semantic Web.

    Schwab

  13. Re:CSS turns 10, typographers still crying by croddy · · Score: 3, Interesting
    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.

  14. Yes and in 10 Years by fullphaser · · Score: 4, Insightful

    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

    --
    Did someone say cake?
  15. Re:CSS turns 10, typographers still crying by Aqua+OS+X · · Score: 2, Interesting

    Believe it or not, some graphic designers / typographers actually know what they hell they're doing; and they've been schooled to use typesetting to as a communication tool that can actually increase comprehension, legibility, reading speed, etc. Yet I can't necessarily say thats all, or the majority, of "graphic designers."

    That said, yes, properly styled and typeset text needs to live and accessible. It's currently not (at least in any practical form), and that's the problem.

    --
    "Things are more moderner than before- bigger, and yet smaller- it's computers-- San Dimas High School football RULES!"
  16. It was worth it by WebCowboy · · Score: 4, Insightful
    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...
  17. Heh, those funny typos by scdeimos · · Score: 2, Funny

    Nice to know that not even W3C can afford to spell check everything: teached CSS. It's not just /. editors! :)

  18. One post of almost pure jibberish... by soliptic · · Score: 2, Informative

    For example, Position Relative. Well relative to what? The preceeding DIV?

    No.

    The immediately preceeding line of HTML?

    No.

    It needs to be glued together better, objectified if you will.

    No it doesn't, it's clear already.

    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,

    "Relying on the preceding line"? It does no such thing.

    "Well relative to what" - simple answer - the closest parent element / DOM node with absolute position.

    If no elements have had position:absolute explictly declared, the overall canvas (body element) is assumed instead.

    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.

    The fact you see both doesnt (necessarily) mean they "can't make up their own minds", it means they (we) know there is a time when either might be best, and use them accordingly.

    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 which shows a padding: 1.5em??

    It depends. Is the padding on the element something which should grow and shrink with user text resizing, or is the element something which is of a fixed pixel size, (eg) something designed as 'chrome' like a rounded corner or combination of background images which have to line up pixel accurately to maintain the illusion of the overall interface.

    Something like line-height is better specified in ems, since you want it to remain proportionate to text size. Arguably, something like column width is too. Although this a grey area of compromise between demands of the client, purism of the designer, legal requirements of accessibility, practical requirements of browser support, etc. Hence, using both depending on where the compromise line is made.

    I was under the impression that pixels are used to deal with the placement of an object within the browser window,

    See above; your impression is simplistic, sometimes pixels are used, other times ems are a more appropriate unit (to create liquid layouts which can adapt to user text resizing - which people may set to remain comfortable reading on small/huge monitors, if they have vision impairment, etc. Still other times percentages of parent elements are appropriate.

    .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.

    You seem to be talking about .classes and #ids. Albeit you get it a bit mixed up: document.whatever looks like javascript DOM speak, but there is no document element in CSS; you use elementname.classname hence div.newsitem or a.external or ul.shaded li.odd. Non-intuitive? All you've got to remember is "." means class and "#" means ID. How hard is that? Of course it's not intuitive but what is? The dozens of reserved symbols and tokens in any markup or programming language from HTML to C far outstrip the "confusion" of .class vs #id.

    People complain about IE and Microsoft and i do as well, but you must give creedence to the way they did things for their browser.

    If I had any remaining suspicions that you worked in the professional web design field (which I didn't), you'd have just shattered them for good. Even forgetting any co