For my Serious redesign, I push the envelope in terms of CSS’ advanced selector functionality. Stuff like:

• p:first-child
• p:first-child:first-letter
• p:first-child:after
• p:first-child:first-line

Plus lots of other stylistic tricks that require CSS3 support in order to display as intended. Fortunately, most of the browsers to which I am catering with this new design have no problems with most of the advanced stuff. Of course, Internet Explorer chokes on just about everything, but fortunately IE’s proprietary conditional comments make it easy to fix things up with some “special” styles:

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" media="Screen" href="http://perishablepress.com/press/wp-content/themes/serious/css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" media="Screen" href="http://perishablepress.com/press/wp-content/themes/serious/css/ie7.css" />
<![endif]-->
<!--[if IE 8]>
	<link rel="stylesheet" type="text/css" media="Screen" href="http://perishablepress.com/press/wp-content/themes/serious/css/ie8.css" />
<![endif]-->

Bam, just like that. In each of these stylesheets, I essentially “undo” all of the cool CSS effects that modern browsers get, including some crafty <pre> treatments that you are hopefully enjoying ;) Notice that we can specify an additional/alternate stylesheet for any version of IE. For the Serious theme, I provide around 20 remedial rules for IE 6, 7, and 8. Once IE 9 is released, we’ll need four additional stylesheets. Moving on..

So that takes care of Microsoft, but there are still other browsers to consider. I designed the new Serious theme to look perfect in the latest version of Firefox (3.5), which uses a different rendering engine than Safari, Opera, and Chrome. Fortunately, I didn’t need to change much for older versions of Firefox, but some of the other modern browsers required a few tweaks to get things looking just right. To do this, I could have used a bunch of ugly CSS hacks, but there are too many risks and “gotchas” when it comes to differentiating between Safari and Opera, for example. So I decided to keep things as simple and specific as possible. Here’s how I did it..

Really Simple Browser Detection for Modern Browsers

Before getting into it, let me just acknowledge that browser detection should only be used as a last resort. If you can design a site without needing any hacks or alternate presentational trickery, then good for you, no browser detection needed. When it comes to pushing the envelope and trying new things, however, you’ll almost always find presentational discrepancies in modern browsers. In any case, it turns out that I do feel as if browser detection was the ideal solution for the new design, mostly due to the fact that the modifications were few and fairly cosmetic in nature, so no big deal if JavaScript is not available to the user.

Basically, I want to apply an additional stylesheet to each of the modern browsers. To do this with IE, conditional comments work perfectly. I almost wish that every browser included some sort of conditional-comment functionality. It would make all this browser-detection stuff unnecessary. In any case, here is a list of browsers that I want to target with CSS (in no particular order):

• Camino
• Chrome
• Opera
• Safari

For these four browsers, I created four unique stylesheets and then conditionally link to them with a few snippets of jQuery:

<div class="altcss">

	<script type="text/javascript">$.browser.camino = /camino/.test(navigator.userAgent.toLowerCase()); if ($.browser.camino) { 
	document.write('<link rel="stylesheet" href="http://domain.tld/css/camino.css" type="text/css" media="screen">'); }</script>

	<script type="text/javascript">$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); if ($.browser.chrome) { 
	document.write('<link rel="stylesheet" href="http://domain.tld/css/chrome.css" type="text/css" media="screen">'); }</script>

	<script type="text/javascript">$.browser.opera  = /opera/.test(navigator.userAgent.toLowerCase());  if ($.browser.opera)  { 
	document.write('<link rel="stylesheet" href="http://domain.tld/css/opera.css"  type="text/css" media="screen">'); }</script>

	<script type="text/javascript">$.browser.safari = /safari/.test(navigator.userAgent.toLowerCase()); if ($.browser.safari) { 
	document.write('<link rel="stylesheet" href="http://domain.tld/css/safari.css" type="text/css" media="screen">'); }</script>

</div>

Basically, each of these snippets tests the client’s user-agent string and writes a <link> to any matching stylesheet. Of course JavaScript is required on the user’s browser, so it’s best not to use this technique for anything beyond minor cosmetic enhancements.

As for the code itself, I am know there are more elaborate ways of sniffing and detecting browsers, but I wanted to keep things as simple as possible. Also, this code could also be simplified to exist within a single <script> element:

<div class="altcss">

	<script type="text/javascript">

		$.browser.camino = /camino/.test(navigator.userAgent.toLowerCase()); if ($.browser.camino) { 
		document.write('<link rel="stylesheet" href="http://domain.tld/css/camino.css" type="text/css" media="screen">'); }

		$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); if ($.browser.chrome) { 
		document.write('<link rel="stylesheet" href="http://domain.tld/css/chrome.css" type="text/css" media="screen">'); }

		$.browser.opera  = /opera/.test(navigator.userAgent.toLowerCase());  if ($.browser.opera)  { 
		document.write('<link rel="stylesheet" href="http://domain.tld/css/opera.css"  type="text/css" media="screen">'); }

		$.browser.safari = /safari/.test(navigator.userAgent.toLowerCase()); if ($.browser.safari) { 
		document.write('<link rel="stylesheet" href="http://domain.tld/css/safari.css" type="text/css" media="screen">'); }

	</script>

</div>

And of course, you aren’t limited to the browsers specified here. You could easily target another by emulating the pattern according to the user-agent or name of the additional browser. For example, we could add a custom stylesheet for the Flock browser like so:

<script type="text/javascript">$.browser.flock = /flock/.test(navigator.userAgent.toLowerCase()); if ($.browser.flock) { 
document.write('<link rel="stylesheet" href="http://domain.tld/css/flock.css" type="text/css" media="screen">'); }</script>

Finally, because this is JavaScript, I place this block of code at the end of my XHTML document, just before the closing <body> element. It could just as easily be argued that this code should be placed in the document <head> because it’s ultimately referring to CSS, but I will leave it up to you to decide for yourself.

Update: in the comments, Gustavo informs us that, as of jQuery 1.4, the $.browser variable is replaced by $.support. So if you’re using jQuery 1.4 or better, you’ll need adjust the code accordingly. Here is an example showing how this would look for the Flock browser:

<script type="text/javascript">$.support.flock = /flock/.test(navigator.userAgent.toLowerCase()); if ($.support.flock) { 
document.write('<link rel="stylesheet" href="http://domain.tld/css/flock.css" type="text/css" media="screen">'); }</script>