Cross-Browser Compatibility can be almost always is a nightmare. Something that looks amazing in Chrome version 22 might look completely different in Firefox 3.5 (or IE7). To make things even more fun (sarcasm), making a minor CSS change to correct a problem in IE8 completely ruins Chrome. The process of ironing out these small problems, and the subsequent small problems, can turn a CSS ninja into a psychopath in no time flat. To ensure I keep my sanity, I’ve come up with a way to target CSS at certain browser using a little javascript and a few classes. I originally got the idea from the WordPress theme “TwentyEleven“. They use this to target the different IE’s.
Now, making those small changes are a pie of cake. For example:
.chrome22 div.something{width:100%!important;}
.msie7 div.something{width:55.9%!important;}
There is a working demo up at http://jsfiddle.net/PeJA8/. Interesting notes for mobile devices:
- Android version 2.* to 4.* show up as .safari40
- iOS shows up as .safari(iOS version without the period, like 51 or 60)