Browser-specific CSS @ rules
I've been messing with some new CSS ideas lately with a remodel of this site in mind, and I created a layout that I liked, so I started to code it. It worked great in Safari and Firefox, and I was at a point where I was comfortable with it. So I launched Virtual PC to give the layout the infamous Internet Explorer 6 test.
It didn't render properly. Not that I was terribly surprised, mind you. So I tweaked and adjusted and ended up with something that was reasonably close to how the layout might appear in a modern browser.
It required some hackery to do it. I had to use some CSS selectors that IE6 can't possibly understand. e.g. html>body>#main The basic idea is that you write some CSS rules, in this case the width, and then overwrite the rule with a modern CSS selector so that old browsers like IE don't understand the second rule and simply ignore it.
Here's how it all works:
#main { width: 35%; }
html>body>#main { width: 37%; }
The technique is quite common. It works well, but the concept is dumb. It means that I have written separate code for separate browsers, and while a minor infraction like this one is generally considered to be a necessary evil, there is still a problem with it:
What if Internet Explorer has the same rendering problems, but gains the ability to understand modern CSS selectors?
We're going to be hurting as web developers. Our arsenal of hacks designed to hide proper code from IE will fail, and IE will no longer render our pages properly. I'm using IE as an example because it's the current black sheep of browsers, but the dilemma applies to any buggy browser, and all browsers have their bugs.
CSS is outfitted with @rules. They're commonly used to perform miscellaneous tasks like including an external style sheet (@import), or to specify a particular medium that styles are to apply to (@media). I propose that a new set of @rules be implemented that are specific to the particular device.
For example, @MSIE 6.0 might only apply to a browser in which the string "MSIE 6.0" appears in the userAgent. @googlebot might apply to google's web crawler, and @Opera/7.x would apply to Opera. But it isn't limited to desktop web browsers. There could as well be @Blazer, @Deskjet, @Epson Stylus Photo. There need be no limit!
This would require the browser or device to read @ rules that apply to them, and ignore @ rules that don't, but I think it would give web developers a great way to add specific styles to specific devices without having to make greater sacrifices to their pages' mark-up. Instead of seeking new hacks to make width work in IE, I could whip up a few specific styles for it instead that over-ride other styles.
It would provide a means to compensate for a bug in any one device without interfering with anything else, and it would provide a means in the future for developers to patch any site that might need a quick patch for one errant browser.
- under:
- Web Development
- Posted on
- 2005-06-15
Comments:
Keen idea
But unfortunately I don't think it'll fly.
What I think I'll end up doing is keeping a single style sheet mentality but do the content negotiation with PHP.
Using a little browser sniffing by examining the http headers ($_SERVER['HTTP_USER_AGENT']) that the browser sends (major browsers do this correctly) we can determine who we're talking to.
Then you simply send the file with the correct header, in this case:
header("content-type: text/css");
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT");
and your file is properly parsed as a css file by the browser. You need the expires line to be sure that the file is properly cached - dynamic content isn't always cached by the browser, which is ok for web pages but not for stylesheets.
Again, not really ideal, but I think a better evil than the hacks... and overall safer once IE7 hits the streets since it will be easier to dish out to its peculiar hacks this way if it turns out to act differently than IE6 did.
And even now it will help since I need to keep IE 5.5 compatibility on one of my sites this will allow me to do it properly since some of my hacks for 5.5 conflict with 6...
This site: http://www.icant.co.uk/articles/cssconstants/ has some great stuff on this subject. No, I didn't completely plagiarize from that site - I did have the concept in mind - but he did provide some finer points to the execution. Its a good read.
This article is closed to further commentary. But you can always contact me directly.