CSS incompatibility across browsers is an all too familiar source of annoyance and frustration for anyone doing anything significant. Over time, I've come across several pages (for example, the box model hack page), and even books not just demonstrating, but recommending leveraging known CSS parsing bugs to define browser-specific CSS rules. I've never liked them, because they're unmaintainable, and frankly unreadable (understanding such style sheets first requires intimate knowledge of parsing bugs). An even bigger reason to try and avoid them is that potentially every new version of a browser is likely to invalidate some set of hacks that worked in the past... apparently as reported here, the "* html" trick doesn't work in IE7, as reported over here.
Here is an alternative technique I came across a while back when working with the live.com folks on Atlas... I think it works fairly well, and for its most appealing aspect... it doesn't rely on parser quirks. Lets say I had the following markup:
<html>
...
<div id="foo">...</div>
...
</html>
Now say that I wanted to fill with a different color on Firefox vs. IE vs. IE7. I use this merely as an example to illustrate the technique; obviously the point is to use it for something that really does require special casing for different browsers.
I could now define the following stylesheet in order to make the div red in most browsers, yellow in IE browsers except IE7, and finally blue in IE7.
div#foo {
background-color: red;
}
HTML.IE div#foo {
background-color: yellow;
}
HTML.IE7 div#foo {
background-color: blue;
}
The trick is to programmatically set the class attribute on the HTML tag based on the browser, and you're done. This is obviously where a little bit of javascript comes into play to do detect the browser along with its version and programmatically set the class value as appropriate. Obviously its pretty straightforward to implement this pattern. In Script#, I've tried to make this even simpler by baking in the functionality... Just use the following in your markup:
<html class="$browser $browser$major">...</html>
That's it! The Script# Application class on startup looks for macros such as $browser, $major and $minor, does some browser detection, and automatically initializes the class attribute for you. So on IE7, at runtime, you end up with:
<html class="IE IE7">...</html>
This would be fairly straightforward to incorporate into Atlas... er... the Microsoft Ajax Library as well. When doing this for real, you could use this technique to do all sorts of things - for example, account for differing box models, support or lack thereof of translucent pngs across browsers... and dealing with all sorts of real nuisances one comes across when working with CSS. Theres probably a couple of downsides I can see someone claiming. First it relies on Javascript. Secondly, a designer kind of person may or may not be used to the idea of script determining final look and feel. But like any other technique, it has its pros and cons... its something to keep in mind if relying on browser implementation bugs bug you :-)
Thoughts?
Posted on Thursday, 9/14/2006 @ 11:45 PM
| #
Ajax