“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.
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 …)
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.
Nick Conflitti
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.
Hayden Hancock
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.
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.
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.
70 Reader Comments
Back to the Articlejon thomas
“I very rarely even need to make a separate style*sheet* for IE6 and 7…”
Robert Shaver
“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.
Richard Cotton
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 …)
Bruce Clark
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
Juston Gaughan
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.
Nick Conflitti
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?
Hayden Hancock
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.
craps dice
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.
craps dice
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.
brain.ui
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.