Stories
Slash Boxes
Comments

News for nerds, stuff that matters

Slashdot Log In

Log In

Create Account  |  Retrieve Password

CSS Turns 10 Years Old

Posted by kdawson on Tue Dec 19, 2006 02:10 PM
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.
+ -
story
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.
 Full
 Abbreviated
 Hidden
More
Loading... please wait.
  • ACID2 Compliance (Score:5, Interesting)

    by AKAImBatman (238306) * <(akaimbatman) (at) (gmail.com)> on Tuesday December 19 2006, @02:11PM (#17303148) Homepage Journal
    "[I was] disappointed (but not surprised) that no browser on my computer correctly renders the Acid2 test."


    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)

      by Kelson (129150) * on Tuesday December 19 2006, @02:17PM (#17303246) Homepage Journal
      Time to get a new computer.

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

        • Aside from KDE ports to other platforms, khtml can be used standalone on Windows, SkyOS, and AmigaOS (amongst others).

          Can be, yes -- there's even a Windows KHTML browser in early alpha stages called Swift -- but practically speaking, most KHTML browsers today are running on *nix platforms, and most Webkit browsers are on Mac OS X. Yes, you can run a non-Webkti KHTML browser on Mac OS X, but Webkit is available right there. And IIRC someone ported Webkit to GTK to run it on cell phones (Nokia?), but for

    • by catbutt (469582) on Tuesday December 19 2006, @02:38PM (#17303572)
      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.
      • by CastrTroy (595695) on Tuesday December 19 2006, @02:48PM (#17303726) Homepage
        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.
        • by egomaniac (105476) on Tuesday December 19 2006, @03:02PM (#17303908) Homepage
          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
        • by Kelson (129150) * on Tuesday December 19 2006, @03:14PM (#17304082) Homepage Journal
          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.

    • Do any browsers really do CSS right? Firefox is missing drop shadows and IE7, Safari, and Opera still don't center content correctly all the time. Still things are a lot better than with older browsers such as IE6.

      I wish the standards would be realistic and just realize that no browser is ever going to be 100% perfect in how it renders a page and that in some cases the standard isn't going to be perfect either. I hate to praise IE but IE has a way to only load certains stylesheets for IE or even certain ver
  • 10 years old... (Score:5, Interesting)

    by Kelson (129150) * on Tuesday December 19 2006, @02:12PM (#17303160) Homepage Journal
    ...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 [webdevout.net]. Anyone know of a good summary of current browsers' CSS1 support?
    • Re: (Score:3, 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.
      • Re:10 years old... (Score:4, Interesting)

        by poot_rootbeer (188613) on Tuesday December 19 2006, @02:33PM (#17303502)
        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... (Score:5, Informative)

          by Shados (741919) on Tuesday December 19 2006, @03:26PM (#17304240)
          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.
      • I don't know if we should give browsers any slack just because CSS2 is "only 8.5 years old".

        Sorry, I left out the scare quotes around "only."

  • by iamjoltman (883526) on Tuesday December 19 2006, @02:12PM (#17303162)
    Is it just me, or is it a little ironic that the page that celebrates 10 years of CSS is so bland looking?
  • Slashdot's advertisers STILL CAN'T GET IT RIGHT. I just saw a CSS error, in Firefox 1.5, that disappeared with a reload. Obviously a top of screen banner ad went bad.
  • I was ... disappointed (but not surprised) that no browser on my computer correctly renders the Acid2 test.

    You're clearly not using a mac [slashdot.org].

  • Wow! (Score:5, Funny)

    by NoMoreNicksLeft (516230) <.john.oyler. .at. .comcast.net.> on Tuesday December 19 2006, @02:16PM (#17303230) Journal
    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! (Score:5, Funny)

        by NoMoreNicksLeft (516230) <.john.oyler. .at. .comcast.net.> on Tuesday December 19 2006, @02:32PM (#17303488) Journal
        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.
      • Too bad PNG is still not supported correctly by IE (alpha channel).

        I take it you haven't been following news about IE7? Or did I miss something and it's got some major bug in its alpha channel support?

        • IE7 won't replace IE5 and IE6 for quite a few years to come. Today's support comes from yesterday. As the parent wrote, we should have proper CSS support from IE users at around 2018.
  • 10 years (Score:5, Funny)

    by wumpus188 (657540) on Tuesday December 19 2006, @02:20PM (#17303310)
    <div class='rant'> ... and still no vertical centering. </rant>
    • Re: (Score:3, 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.
        • Re: (Score:3, 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.
          • The part that irks me about the whole "table were never meant to be used for layout" deal, is that in most other environment, there are multiple layout methods. CSS implements most of those. Even a subset of "table layouts" in the form of the display:table-cell, display:table, etc, but no actual grid/table layout of some kind. To do some stuff, these ARE the easiest way to do things.

            So in the same way in other environments we have "data tables", to display tabular data, and "table layout" to do what tables
        • Tables are supposed to be used for tabular data, not content layout.

        • I have no problem centering something vertically or making two columns of the same height with dynamic content using nothing but a combination of HTML and CSS.
          Really? Only HTML and CSS? No table and no javascript messing around rewriting the document?

          Then why don't you share your genius with us, oh great AC?
  • Yay, yet another bunch of web pages with light grey text on white background! Just what the world needed.

    Come on guys, it might be valid CSS, but it is not easy on the eyes.
    • There are dozens of different entries at that site. Maybe hundreds, it's been a few years since I looked though all of them. Most of them do not have light grey text on a black background. The neat thing about the site is that the html is exactly the same, only the CSS changes.
    • Re: (Score:3, Interesting)

      You did check the hundreds of other stylings of the same content, didn't you?

      In case you didn't, here [csszengarden.com] are [csszengarden.com] a few [csszengarden.com] examples [csszengarden.com].

      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

  • Uh oh (Score:4, Interesting)

    by sirnuke (866453) on Tuesday December 19 2006, @02:44PM (#17303678) Homepage
    Uh oh [w3.org]
    #navigation li Invalid number : text-shadow Property text-shadow doesn't exist : 0 2px 4px #000
    • Re:Uh oh (Score:4, Informative)

      by Bogtha (906264) on Tuesday December 19 2006, @04:31PM (#17305378)

      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.

  • 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.
    • ``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.
  • I'm sorry, but I can't wait until my options for web type are more then the font tag, a crappy style sheet, a picture that looks like type, Flash, or some sort of odd embeded media option that a only fraction of people can view. I hope by the time Slashdot posts "CSS turns 20" we've finally embraced our SVG overlords, or some sort of superior vector graphic solution.

    Even if browsers were to finally properly support tracking, x-height controls, etc., CSS is still obnoxiously rudimentary in comparison to the
    • by croddy (659025) on Tuesday December 19 2006, @03:43PM (#17304504)
      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.

      • Re: (Score:3, 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.
  • by bill_mcgonigle (4333) * on Tuesday December 19 2006, @03:25PM (#17304220) Homepage Journal
    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.
  • by fullphaser (939696) on Tuesday December 19 2006, @03:48PM (#17304588) Homepage
    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
  • by scdeimos (632778) on Tuesday December 19 2006, @07:38PM (#17307680)
    Nice to know that not even W3C can afford to spell check everything: teached CSS [w3.org]. It's not just /. editors! :)
    • 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.
    • It was worth it (Score:5, Insightful)

      by WebCowboy (196209) on Tuesday December 19 2006, @05:10PM (#17305996)
      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. [slashdot.org]

      Sorry...had to get this out...sometimes I can't resist a troll...
    • 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