Progressive Enhancement with CSS

by Aaron Gustafson

70 Reader Comments

Back to the Article
  1. @“Richard Fink”:http://www.alistapart.com/comments/progressiveenhancementwithcss?page=5#49
    I don´t think it will take that much longer for IE7 to disappear, than it will take IE6. IE8 installs on the same platforms as IE7 and has the version switch. This makes switching from IE7 to IE8 pretty easy, not like switching from IE6 to IE7. I can even imagine that for that reason IE7 will again have a smaller market share than IE6 in the end. Certainly hope not though.

    Copy & paste the code below to embed this comment.
  2. I agree with a lot of commenters here that splitting all your stylesheets into colour, type and layout is unhelpful. The suggestion that the print styles for any of these three will relate to the screen styles is pretty unimaginative too – on most of my sites, there is very little correlation between type (sans serif for screen, serif for print), colour (may use light-on-dark for screen, not for print – may use background colours on screen, often doesn’t work in print) and layout (print sheet removes most layout styles, and removes some elements completely!).

    No, where multiple stylesheets come into their own is when you have a site with a set of generic styles across all pages, but with a different colour scheme for different sections. That is exactly what ALA does! Each edition has a different colour scheme, which keeps all the colours in a separate stylesheet so they don’t clog up the main one.

    When CSS can recognise user-defined variables, this may become redundant, or at least less useful, but in the meantime, it’s a very good use for multiple stylesheets.

    Copy & paste the code below to embed this comment.
  3. I think the article title was a little misleading, I (like others) expected more e.g. bit’s and bobs from CSS3 (and browser extensions) e.g. multiple background images, css gradients, css transforms, @font-face, css tables etc, etc, (with IE 6 as a baseline browser).

    Having used third party software that utilises multiple stylesheets I have to agree with most of the comments:

    1. It’s a maintenance nightmare… 8+ stylesheets!!
    2. It will slow down the initial load of the site
    3. A CDN is used to serve content based on the (network) proximity of the user requesting the resource – the fewer the network hops to the server the quicker the response time.

    There is an “alternative”:http://blog.niccai.com/post/51688182/maintainable-css-using-ie-specific-css-selectors (better?) way of using conditional comments to target specific versions of IE without having to result to multiple stylesheets.

    There are lies, dam lies, and statistics but… I’ve access to the log stats of a (non-technical) public facing website and over the last 12 months there has been 1 visitor using IE5 and none using Netscape 4… I wouldn’t spend anytime designing for those browsers…

    This might be worth a look for writing maintainable css “CSS Systems”:http://natbat.net/2008/Sep/28/css-systems/

    Just my 2p.

    Copy & paste the code below to embed this comment.
  4. recent articles have been below par in quality. I think even Sixrevisions and Smashing magazines are getting a lot better. This article really does sounds like it was written in 2005. IE 5.5? Netscape? Which world are we living in? Splitting css into so many files is a maintenance nightmare that I am glad to do without. I use 1 stylesheet and if a page is complicated, I use another style sheet for a specific page when working with sites with more than 30 templates.

    I only hope the next articles are of a better standard.

    Copy & paste the code below to embed this comment.
  5. I’m really surprised to read this article in 2008 from somebody as experienced as Aaron. Everybody is trying to reduce HTTP requests these days, and we all know that @import is the worst, slowest way to add more stylesheets. Kids, don’t try this at home — you will hurt the web!

    Apart from the maintenance nightmare it’s simply superfluous to create extra stylesheets for print, not to mention handheld styles. Usually my print stylesheets just involve setting a few elements to display:none and fixing a few colors and widths. That can be perfectly done in one stylesheets with the @media print rule:

    @media print { #stuff-that-doesnt-get-printed { display: none } }

    Copy & paste the code below to embed this comment.
  6. This all sounds really awesome in theory. We are all about separating content and style, so why not break up the styles into logical units as well?

    But in practice I don’t know how good this is…
    Has anyone come up with actual metrics on whether it’s better to have everything in one css file (large initial size, but only one http request) versus broken up (small individual sizes, but multiple http requests) in terms of bandwidth, and perhaps page loading? If multiple http requests causes the bigger hit, then in many cases the separation is a weakness.

    Also, initially it seems good to break everything up into different chunks of style. Typography, layout, color, etc. But, as has been mentioned this can make maintenance, and especially development, hell. Currently, if I want to change an element, or there is a bug with an element, I can go directly to that element’s style definition and play with all of its properties in one place. Using this method, I would have to jump around between files searching for the right places.

    Also, with page loading, what if one stylesheet hangs when its being downloaded. So the user might see a giant red colored eyesore for a while until the next stylesheet jumps in and fixes it. With one stylesheet, it may take a bit longer for the page to completely load, but for the most part each element receives all of its styles at once.

    Copy & paste the code below to embed this comment.
  7. @sander
    IE7 ships with Vista. That’s the big problem. Every new computer with Vista = 1 new IE7 user.
    If the results of Microsoft’s efforts at pushing out IE7 to IE6 users – as a “critical update”, no less – is any guide, efforts at pushing out IE8 will come nowhere near eradication. We’ll be dealing with IE7 for many years.
    BTW, Microsoft publishes a schedule of product lifecycles listing when they will drop support (exclusive of security updates) for different products.
    IE6 on Windows XP gets shelved in late Spring 2010.

    Copy & paste the code below to embed this comment.
  8. I’m barely learning C++ and Objective C, would you guys have a recomendation for a book to learn about HTML, XHTML, and CSS? I’ve seen too many and I can’t figure out how to separate the good one from the average ones. Thank you guys.

    Copy & paste the code below to embed this comment.
  9. I always have problems getting conditional statements to work, so I actually use a very lightweight snippet of php code to call seperate stylesheets for IE and firefox. Check it out on my website in the header section. http://www.shockforcestudio.com

    Copy & paste the code below to embed this comment.
  10. As much as I hate when it’s time to apple+tab over to IE6 and 7 from firefox and hit refresh, I must admit that the 2 browsers help to point out a lot of problems with my CSS that sometimes FF/Safari etc. “ignore” and “appear” to render correctly anyway.  I find that making small adjustments to my CSS to fix IE6 and 7 issues cause no problems in FF/Safari renders and am embarrassingly grateful that my foes (IE6 and 7) pointed those things out to me.  Usually, the fixes make sense too.  I very rarely even need to make a separate style for IE6 and 7, thanks especially to standards-compliant ways of invoking has-layout and clearing floats.  The last site I made has an IE stylesheet for ONE element, the “behavior” element for PNG support in IE.  My continuing inspiration is found in the fact that even the most elite CSS designers today are still abusing CSS because it wasn’t intended to do what we’ve made it do at all.  Floating for layout?  Although necessary for us now, DIVs were intended to stack one on top of the other.  So, in exaggeration, we’re all just hacking our way to the coming days of CSS3 table support, but thank you W3C for current CSS 2.1 spec.

    Have a look at a “new book from sitepoint titled Everything You Know About CSS is Wrong”:http://www.sitepoint.com/books/csswrong1/ . 

    In contrast to the parts of this article you’re dissapointed with, you’ll appreciate “the book’s”:http://www.sitepoint.com/books/csswrong1/ drive toward the future in regards to preparing for new CSS and Browsers and what to do about older browsers, rather than discussing support for NN5 and IE older than 6.

    Copy & paste the code below to embed this comment.
  11. “I very rarely even need to make a separate style*sheet* for IE6 and 7…”

    Copy & paste the code below to embed this comment.
  12. “This is a nifty trick for getting IE5/Mac to ignore a stylesheet.”

    It may seem nifty but it makes the code brittle and easily broken. It means that everyone who ever works on this code must recognize all the tricks you are using so they don’t break them.

    I don’t call that nifty … I call that hard to maintain.

    Copy & paste the code below to embed this comment.
  13. To have the cake and eat it.

    (i build sites based on PHP, but similar prospects exist for other methods, such as SASS for ruby…)

    Write yourself a simple “css compiler”, let it concatenate (and minify) your many, many css files into one block and return that to the browser.

    I now have simply a css link tag with an href like:

    css/css_compiler.php?i=vars.php,reset.php,typography.php,grid.php,project.php

    the PHP spits out a condensed result of loading those files in turn (vars.php allows me to define global values such as “$ugly_red=’#faa’” and then use those values throughout my other css files. (parameterised CSS is good – should have been in the spec all along)

    When production time comes along, I just load that css url into the browser as is, and copy/paste the result into “site.css” and change the value in the link tag of the template to remove the time spent by PHP producing my css.

    Best of both worlds: single http request, minified css code, and I get to work on small, reusable, maintainable and understandale CSS

    As a bonus I also get to parameterise my CSS when I want to as well.

    The (very basic) ‘compiler’ I use is here – “http://pastebin.com/f4ea23657”:http://pastebin.com/f4ea23657

    Its probably bug-ridden, and its VITAL that you don’t put such a script onto a public server (it only gets used on the dev server that lives under my desk and isn’t externally routable …)

    Copy & paste the code below to embed this comment.
  14. I agree with a lot of posters that this is a bit too much. Here’s my full blog post about the matter:  http://tr.im/10u1

    Copy & paste the code below to embed this comment.
  15. In my current position I work on a site that has many dynamic pages. I would find it too timely to maintain the site wide and page specific CSS in this manner (i just prototyped a page to test). This seems as though it is geared for a small / static site.

    We load a few different CSS files (I don’t think load times from different CSS files causing multiple requests is a problem), which are usually a global.css, a portal specific CSS file, and then a page specific CSS file. I prefer to have my CSS rules in one place, because this removes the chance that you may have identical mistakes hidden throughout your 2k lines of CSS. Keep it simple, keep it fresh.

    Copy & paste the code below to embed this comment.
  16. Sorry, this is kind of an off topic question. I am using the same kind of browser detector the author used in the article. I have gotten it to work in all version of IE but not Mozilla and Firefox. Is there a browser detector I can use for Mozilla and Firefox similar to the one used in the article that doesn’t require any Javascript? Can anyone help?

    Copy & paste the code below to embed this comment.
  17. I just wanted to say that I really enjoyed the article as well as the discussion that has followed.

    I would like to respond to some of the comments with relation to actually having multiple style sheets. I think a good technique or tip, is to create one style sheet when in development of the site. Only after the CSS design is complete should you break it up. I think this process with help designers better structure their markup and make it not as cumbersome as first thought.

    Copy & paste the code below to embed this comment.
  18. Using a CDN to compensate for the additional HTTP requests doesn’t make sense to me.so i want to apply this on the <href=“http://www.justcrapsdice.com”>craps dice</a> site.The network does nothing to reduce the amount of requests. It just adds another DNS look up into the mix and adds cost to the project for no reason. If I’m not mistaken, the point of a CDN is to have the files served from a location closer to the client.Say several pages list forum topics and have a comment box (like a profile page). It makes sense to have a comments.css and a forums.css file. This greatly reduces the amount of CSS I need to write and maintain, with the additional benefit that simpler pages do not need all the CSS overhead that more complex pages do.I agree with Jens Meiert, performance and maintainability needs more digging.I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well.

    Copy & paste the code below to embed this comment.
  19. Using a CDN to compensate for the additional HTTP requests doesn’t make sense to me.so i want to apply this on the <href=“http://www.justcrapsdice.com”>craps dice</a> site.The network does nothing to reduce the amount of requests. It just adds another DNS look up into the mix and adds cost to the project for no reason. If I’m not mistaken, the point of a CDN is to have the files served from a location closer to the client.Say several pages list forum topics and have a comment box (like a profile page). It makes sense to have a comments.css and a forums.css file. This greatly reduces the amount of CSS I need to write and maintain, with the additional benefit that simpler pages do not need all the CSS overhead that more complex pages do.I agree with Jens Meiert, performance and maintainability needs more digging.I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well.

    Copy & paste the code below to embed this comment.
  20. I generally try to optimize my website css using gzip or defalte methods. These methods are for Apache Server versions.

    You can simply create “.htaccess” file and modify accordingly. This will speed up your css and website as well when it get loads.

    Copy & paste the code below to embed this comment.