Discuss: Progressive Enhancement with CSS
by Aaron Gustafson
- Editorial Comments
62 Nifty and brittle
“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.
posted at 08:32 pm on November 7, 2008 by Robert Shaver
63 I found a way...
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
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 …)
posted at 01:42 pm on November 12, 2008 by Richard Cotton
64 I have an opinion on this.
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
posted at 09:23 pm on November 12, 2008 by Bruce Clark
65 Large Site Headaches
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.
posted at 01:03 am on December 2, 2008 by Juston Gaughan
66 Browser Detectors
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?
posted at 01:03 pm on December 22, 2008 by Nick Conflitti
67 Good article
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.
posted at 04:23 am on January 13, 2009 by Hayden Hancock
68 GREAT THOUGHTS
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.
posted at 04:45 am on March 25, 2009 by craps dice
69 GREAT THOUGHTS
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.
posted at 04:46 am on March 25, 2009 by craps dice
70 Optimize your css...
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.
posted at 07:47 am on October 14, 2011 by brain.ui
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)




61 minor corretion above...
“I very rarely even need to make a separate style*sheet* for IE6 and 7…”
posted at 08:21 pm on November 6, 2008 by jon thomas