Exact Browser Targeting In CSS With No Hacks
Every standards-based web designer knows that CSS rendering differences across browsers is a major headache. Possibly the biggest headache we have in our profession. IE6 has issues like the double float margin bug and many others. IE7 fixes many IE6 issues but introduces a few new ones. Firefox 2 and Firefox 3 have rendering differences — personally I’ve encountered vertical alignment differences with two form elements right next to each other. Not to mention Firefox 2 renders -moz-border-radius as a jagged mess and Firefox 3 renders it beautifully because of anti-aliasing. Firefox and Safari render some form elements differently, especially buttons. Safari and WebKit render text-shadow very nicely however Google’s new browser Chrome trips over itself with border-radius, shadow, and has some opacity problems, all due to Chrome using the Skia graphics engine that’s not fully-baked yet.
In short, every browser has its quirks and issues. Normally you either choose to deal with these issues by saying a certain browser is not supported, or by using conditional comments (IE-only), or a combination of hacks and workarounds. These have been the accepted ways to deal with infuriating browser differences, until now.
About a month ago I stumbled upon the most brilliant piece of code I’ve seen in my life, and what truly amazes me is that it’s such a simple idea but it makes my life profoundly easier that it’s like magic. Life-altering magic.
The CSS browser selector script is a very short Javascript snippet that detects a browser via their user agent string (can be spoofed or changed I realize) and then appends a class or multiple classes to your HTML element detailing what browser is currently being used. For example if someone is using IE7 on Windows, the classes on the HTML element would be “win ie ie7″ and you could target any element on the page using descendent selectors. Now, you can target the troublesome IE6 browser like this:
.ie6 #myDiv { float: none; }
Amazing!
It’s been around for awhile too, so I recommend if you’ve been ripping your hair out over cross-browser consistency, give this a shot. It isn’t the magical cure-all fix but it lets you elegantly target browsers (even target FF2 and FF3 separately, to give FF3 a nice -moz-border-radius while keeping FF2 users from seeing jagged edges) without any ridiculous CSS hacks.
Every site I work on from now on will have this because, for me, it’s now the only way to fly.
Isaac # —
Alternatively, you can make it work even without using JavaScript (which not all browsers support/have turned on) by writing a PHP (or ASP/Perl/Python etc.) script which detects which User Agent you have and creates a customised CSS stylesheet (or just a part of a stylesheet that overwrites the main CSS).
You may have to mod-rewrite this from (eg.) csscorrect.php to csscorrect.css for it to work in some situations (eg. Drupal themes). The big advantage is that it doesn’t require any reliance on the user having JS available, so will *always* work.
This JS method is an interesting way to do it - possibly neater, and would work on 99% of people who aren’t mad enough to disable JS, but you should test your site with and without JS to ensure that it degrades nicely, and this method would cause problems with that.
Post A Comment