No More CSS Hacks?
There’s an article over at Stylegala entitled No More CSS Hacks. It describes a method of using server-side script to detect a user’s browser type (instead of the traditional client-side methods) so you can write browser-specific CSS without resorting to javascript or CSS hacks.
At first glance, it sounds good. Thinking on it a bit, the examples they show would be a slight nightmare for the way I work. On a regular basis, I build fairly large, very corporate CSS-driven sites with challenging CMSs (read as: I work with integrators that aren’t always 100% familiar with HTML, much less well-formed HTML) and challenging designs (read as: designs that look good, but aren’t always conceived with ease-of-production in mind).
The upshot being I write long, dense, complicated CSS files that, on a good day, can be hard to parse (by humans, I mean).
Fortunately, I’m able to keep my CSS hacks to a minimum. The only hack I ever need these days is the IE underscore hack. If you’re not familiar:
div.foo {color: red; _color: blue;}
In IE, the color applied is blue, in all other browsers, red. The really nice things about the underscore hack is that it’s unintrusive, yet easy to spot by eye. It can be placed immediately following the item it’s overriding, so I can easily tell what is being “fixed.” In addition, making sure to throw IE6 into quirks mode means I get IE5 & 6 compatability at the same time, and the high quality of the other browsers we support (Firefox, Safari) means that I only have to hack for IE. (Not to say I don’t have other browser-related problems, but I’m able to fix them without CSS hacks.)
Anyway, back to the point. Applying the server-side techniques as they’ve laid them out, would make my CSS files a swamp of unreadable code, which isn’t acceptable, seeing as I often have to hand projects off to other developers (not to mention the client) once the initial development has occured.
That having been said, I do see a very graceful way to make use of server-side browser detection: Sniff for browsers in the HTML file, not the CSS file, and instead of writing browser-specific CSS, write a call to browser-specific CSS files. So, along with styles.css you can also have ie.css and safari.css and firefox.css, which are only written when the server detects those browsers.
It would still mean changing the way I write CSS a bit. Instead of the underscore hack, I’d write something like this:
div.foo {color: red;} /* color overwritten in ie.css */
This way I (or a future developer) wouldn’t have to be intimately familiar with the alternate CSS files, and wouldn’t go insane because I can’t figure out why the text is STILL RED in IE. (Believe me, I’ve torn out many a hair trying to debug something that was being overwritten farther down in the CSS file.)
It’s conceivable that CSS files might become a mess of comments, but which is better — a mess of human-readable comments? Or a mess of computer-readable PHP?
June 2nd, 2005 at 6:53 pm
Your hack not work, not behave!!!!!!
June 2nd, 2005 at 10:33 pm
I’m not sure what you mean, Charleno… I hope you will come back.
June 3rd, 2005 at 2:20 pm
I’ve just had a look at the article at stylegala, and it remembered me of the spagetti javascript code we used to write in the good old Netscape 4 vs. IE 4 era. The scary thing is that there were people who thought it is a good idea.
June 3rd, 2005 at 7:35 pm
Yeah that hack is much more elegant than the *html #mydiv hack Ive been using for a long time.
Some other helpful hacks, im sure lots of you have seen:
html>body #selector {rule;}
/* hides the rule from IE only */
* html #selector {rule;}
/* hides the rule from everything but IE */
/*\*//*/
@import “ie5mac.css”;
/**/
/* feeds sheet to ie5 mac only */
June 4th, 2005 at 3:54 am
That’s exactly how I work. However, the only disadvantage (if you see things in absolutes) is that it doesn’t valibate as purist (facist) valid CSS.
Thoughts?
June 5th, 2005 at 11:59 pm
Do you eanna know what is really cool and unintrusive?
CssCompiler by Daniel Mota http://icebeat.bitacoras.com/archivo/117/csscompiler but it’s in spanish so go asnd get a translator.
June 6th, 2005 at 5:28 am
I’m not convinced about using PHP to sniff browsers - it is just a degree away from the old school browser sniffing. It doesn’t take into account the spoofing of User Agent ID’s that some browsers do for example.
CSS hacks work because they rely on broken bits of a browser that in modern software do not exist, and so can be used with some security. I’ll stick with them.
June 6th, 2005 at 8:20 pm
Philip:
I’m a proponent of standards and validation, but not at all costs, expecially in CSS.
If XHTML doesn’t validate because of a stray smart quote, or an unencoded ampersand, it most likely isn’t going to break anything. If, however, a tag is malformed, it will break XML feeds. So, in the case of HTML, validation is helpful.
If CSS doesn’t validate, what is it going to hurt? In my experience, nothing. This leads me to believe that valid CSS is a helpful ideal, but in practice, it’s not needed.
What I do need is a front-end that looks how I want it to look, with a minimum of fuss.
June 7th, 2005 at 1:41 pm
CSS Negotiation (aka CSS Filtering) is possible without relying on server-side technology and they don’t affect validation.
June 8th, 2005 at 1:05 am
Oooo, a plug from an ‘A-lister’ :P
Thanks Shaun ;)
I’m a little confused as to why you would prefer an invalid IE hack (_underscore) over conditional comments or any of the other valid methods?
Conditional comments will always win in my book as it’s the only clientside solution that saves bandwidth.
August 11th, 2005 at 11:21 am
actually for IE5.x IE5.5 IE 6, one could put all in IE conditional comments, this means no hack re quired, and import specific styles for IE5.0 http://www.tantek.com/CSS/Examples/ie50winbandpass.html, or/and for IE5.5 IE5.5 http://www.tantek.com/CSS/Examples/ie55winbandpass.html and first put IE6, IE7 and up styles then the imported styles for IE5.0- IE5.5 so when they get imported there css rules get applied
September 29th, 2005 at 4:15 pm
Well, this undersocre hack is invalid to the webstandarts by w3consortium (www.w3.org)
so, this is why all of us avoid it.
September 29th, 2005 at 7:45 pm
Well, while I agree standards are important, I’ll just reiterate what I said above: