Managing CSS Hacks
25 Jan 2005 10:38 AM
Joen from noscope posted an entry titled Showing CSS to IE only (The Underscore Hack). I was a bit surprised that he was recommending this hack since it doesn’t validate (Update 30/May/2005: It is actualy valid CSS 2.1). Turns out that quite a few people in his comments didn’t really know much about other valid CSS hacks which could be used. A great reference I use for this sort of stuff is the CSS Filters section over at dithered.com. I also made a quick comment on noscope about how I handle my CSS hacks. I thought it might be a good idea to talk about it here for future reference.
The method I use separates browser hacks into individual style sheets (as much as possible). I’m currently using this method on this site, but it involves a few more alternate style sheets, so I’ll show you a simplified version below. I start by creating a “master importer” style sheet. This is linked normally in the html head:
<link rel="stylesheet" type="text/css" href="mystyle.css" title="mystyle">
This style sheet contains the following lines:
@import "all.css";
/*\*/ @import "hacks-ie-win.css"; /**/
/*\*//*/ @import "hacks-ie-mac.css"; /**/
UPDATE: See a working/downloadable example here.
As you can see, I import 3 separate css files. Older browsers ignore all of these due to the import syntax used. They get a plain text version of the site.
@import "all.css";
The first import (all.css) contains styles that will be used by all browsers. I tend to create the main style sheet by only testing in Firefox, and occasionally checking it in other browsers just to make sure I’m on the right track. Once I’m happy with it, I start working on hacks for IE PC using the next import./*\*/ @import "hacks-ie-win.css"; /**/
The second file (hacks-ie-win.css) is imported by every browser apart from IE Mac, due to the escaped comment end hack. This style sheet contains a mixture of 2 IE hacks. The * html hack is used to serve styles to all IE versions and if IE 5 needs something specific, I use the “Property + Whitespace + Empty Comment” hack. These hacks also work on IE 5 Mac (which I don’t want), so that’s why I hide the whole style sheet from it via the escaped comment end hack./*\*//*/ @import "hacks-ie-mac.css"; /**/
The final style sheet (hacks-ie-mac.css) is imported by IE Mac only, thanks to the IE5 Mac Band Pass Filter which was created by Tantek Çelik (on Douglas Bowman’s request). IE Mac is a strange beast. Sometimes it only requires a couple of additional rules to fix it, while other times I’m pretty much rewriting every rule from scratch!
Next, I go back to Netscape 7, Mozilla, Safari, Opera 7 and Opera 7.5. These browsers usually do a pretty good job, but some times I’ll need to fudge some values in the first style sheet (all.css) to get them right. Finally, I check Opera 5 and 6 and use the Owen hack to make them usable. I’d rather not deal with Opera 5 and 6, but I can’t seem to find a way of hiding entire style sheets from them like I can with Netscape 4.
The main advantages (for me) using this method are:
- Simple to implement
- Keeps hacks out of the main style sheet (as much as possible)
- Allows me to group hacks into separate files for separate browsers
- Gives me a “process” to follow which leads to less headaches
- Validates
- Seems to work well in all situations (until someone proves me wrong)!
Disadvantages:
- Some people prefer to have everything in a single style sheet
- Increased number of http requests
- The wacky comment code used for imports is easy to break accidently (especially if you are working with a team)
I’m always trying to improve my CSS hack management. Anything that makes my life easier is a Good Thing™. How do you manage your CSS hacks?
- Posted by John Serris in Web
1. 25 Jan 2005, 10:58 AM | Shii said…
When I was using user-agent-dependent CSS on my website, I had the nifty command
@import url(cssurl) screen;In Firefox, this fetched
shii.org/cssurl. In Internet Explorer, it instead fetchedshii.org/url(cssurl) screen, and at that URL I put my code for “special” browsers. (You can eliminate the need for file extensions with Apache’s MultiViews.)But I’ve found it stress-relieving and easier to not even bother. I write standard CSS with no hacks at all, and if someone writes in to complain I’ll forward them to the Firefox download page.
2. 25 Jan 2005, 08:30 PM | Rob Mientjes said…
Heh, so complicated sir? I juse use
* htmland hack away for IE. No separate stylesheets. I am relentless.3. 25 Jan 2005, 09:51 PM | Joen said…
Thanks for this indepth followup, I’m sure it’ll help a lot of people. While I’m certainly not “in the know” regarding CSS, I don’t consider myself new to it either. Knowing how to filter CSS like this will certainly help me out in the future.
4. 25 Jan 2005, 11:46 PM | matt said…
I hope you’re going to pay for the icons you stole from my website
(Note from John Serris: This “matt” guy does not run Simple Bits, but I’m leaving his comment here anyway).
5. 26 Jan 2005, 04:08 AM | Indranil said…
Wow, great eye-opener for me, this one.
Thanks a bunch.
6. 26 Jan 2005, 06:17 AM | John Serris said…
Matt… you are such a funny little person :) Thanks for giving me a good laugh
7. 28 Jan 2005, 06:24 AM | Mathias Bynens said…
Rob, how about MacIE then? Am I missing something there?
John, thanks for this great insight. This is probably the best “mass CSS hack” so far. The only real disadvantage is the increased number of http requests, but who cares about that anyway. Besides, don’t stylesheets get cached?
What is this?! No XHTML? ;)
8. 28 Jan 2005, 11:11 AM | John Serris said…
Mathias, do people still use XHTML? ;) And yes, the css gets cached, so I guess the disadvantage isn’t so bad.
9. 31 Jan 2005, 09:57 PM | Daniel said…
Wow, awesome. I’ve been looking for something like this for a while. Thanks.
Oh and btw, awesome site. You’re in my links list now.
10. 01 Feb 2005, 11:19 AM | Kris said…
Great set of comments, though I think that if you write GOOD CSS you don’t really need most of those @import tags.
Eh, you just can’t please everyone. Im all for standards, but Im also a capitalist and support companies like Microsoft. GO IE!!
Oh and GO FIREFOX!!! :-)
I would recommend anyone here read Jeffery Zeldmans book on Standards. A tomb of logic.
11. 02 Feb 2005, 06:38 AM | Mathias Bynens said…
Whaddya mean, “good CSS”? Basic CSS? Not too advanced CSS? Seriously, you can’t get the crappiness of one or two browsers get in your way whilst designing a website.
12. 02 Feb 2005, 07:41 AM | Managing CSS Hacks | Blogmarks | Math Jazz said…
Managing CSS Hacks
One CSS hack to rule them all.
13. 05 Feb 2005, 12:57 AM | Rev said…
I just work with a single stylesheet, though it is not quite as ‘professional’ as the stylesheet(s) of yours, buttt. It’s fine with me (-; Nothing (no hacks) to manage tbh. (I keep loving this layout, some art)
grtz!
14. 06 Feb 2005, 07:05 AM | Dante Evans said…
I think the best solution would be to use PHP as a CSS File. All you have to do is send the content-type as
text/css. I don’t like to use browser detects though…15. 06 Feb 2005, 07:28 AM | John Serris said…
Dante, using php to sniff UA strings is unreliable (UA can be changed easily) and complicated. Another problem is proxies/caches caching the generated css. The next user sitting behind the same proxy might be using Firefox, while the cached CSS was for IE. You could force the proxy to grab a new version of the css each time, but then you are defeating the purpose of external css files (caching css on the client!).
16. 08 Feb 2005, 05:46 AM | ray said…
Nice write up… for more hack management strategies, Molly wrote a great article back in June:
www.informit.com/articles/article.asp?p=170511&seq…
17. 08 Feb 2005, 08:49 PM | Anonymous said…
I was always wondering… but JB, do you use Movable Type or this kool site?
18. 22 Mar 2005, 11:33 PM | sotha said…
awesome site!
after studying your sources (yes, i did. hehe), i was wondering, if there is any chance for me to implement “stylesheet switching” without javascript :-/
i know, it is possible to choose different styles in opera or mozilla from the browser-menue (if the page provides different stylesheets). unfortunately most people don’t know about this. so…. my different styles would remain “unseen” :-(
have you got any idea, how to implement style-switching without excessive use of javascript?
many thanks in advance :)
greets,
sotha
ps: hope my english is not too hard to understand
19. 23 Mar 2005, 06:22 AM | John Serris said…
Sotha, it’s not possible to do the styleswitching without JavaScript.
20. 26 Mar 2005, 10:09 PM | Mathias Bynens said…
In fact, it is possible, but then again you have to use cookies. Take for example Alex King’s Style Switcher for WordPress.
21. 27 Mar 2005, 06:57 AM | John Serris said…
Mathias, I just checked the sample page for that switcher. Can’t see it switching anywhere though… Without js, you simply can’t make a styleswitch on the fly. This sort of thing would require a refresh.
22. 11 Apr 2005, 08:26 PM | Rafael Madeira said…
@import “all.css";
/*\*/ @import “hacks-ie-win.css"; /**/
Well, my Firefox 1.0.2 ends up ignoring the first rule and imports “hacks-ie-win.css” instead.
Such a pity, this seemed like the perfect solution for my problem.
23. 11 Apr 2005, 09:48 PM | John Serris said…
Rafael: I just created a quick working example and it’s working fine in Firefox 1.0.2 Win. Check it out here. I also added this link to the post above. I think you probably forgot to use the * html hack in the IE WIN style sheet. Anyway, check out the example and let me know if you are still having trouble.
24. 12 Apr 2005, 04:33 AM | Rafael Madeira said…
It worked! Nothing really changed and now it worked! Don’t you just love that about html? Once I got tired of checking my code for errors because, really, there was absolutely nothing wrong with it, so I just renamed the file and it worked as intended.
Anyway, thanks a lot! I think working with individual style sheets is the best solution I’ve seen so far.
Great site, great job, great music. Keep it up.
25. 12 Apr 2005, 08:48 PM | sotha said…
thank you for your answer.
i don’t know yet, if i will find motivation for javascript. i hate the debugging. it’s not really user-friendly ;)
greets,
sotha
26. 24 May 2005, 05:02 PM | david said…
while it may not “validate” in some validators, the underscore hack is, in fact, valid css2.1.
wellstyled.com/css-underscore-hack.html
27. 30 May 2005, 02:51 AM | John Serris said…
Thanks for pointing that out David. I’ve added a note to the post.
28. 24 Nov 2005, 07:07 AM | Uri Grinwald said…
This was very insightful.
I do have one question that exists not only when I try to implement on my site but also when I check out your sample.
It seems that the initial call for the style sheet that imports all versions is not being understood as I am seeing a text version of the site.
What gives?…