Browser Specific Style for your WordPress Theme

Have you ever been developing a WordPress theme, making it look all pretty, cleaning up your code, and getting all the loose ends tied up … then, you fire up your test browsers and notice that things don’t look quite as good as you thought they did? If you’re like me, you use FireFox, and as any good CSS guru will tell you, FireFox and IE can interpret the same code quite differently.

So, you’re forced to either employ hacks like the star-html hack to compensate for IE6’s shortcomings.

But recently, Microsoft has started recommending that instead of using inline hacks in the main stylesheet, you should use contitional comments to specify browser specific stylesheets. It looks a little something like this:

<!–[if lt IE 7]>
import your stylesheet here
<![endif]–>

Basically, what this does is tell all browsers less than (that’s what the “lt” stands for) Internet Explorer version 7 to import and apply this stylesheet. Because it is commented out using the standard html comment system, all browsers will ignore this code … except Microsoft browsers. And there are other specifications you can apply here as well. For instance:

<!–[if lte IE 7]>
import your stylesheet here
<![endif]–>

All we did was change the “lt” to “lte”. What this does is says “if the browser is less than or equal to Internet Explorer 7, import this stylesheet. You can also just leave out the “lt” and “lte” altogether and just say “if IE 6” and only IE6 will import the styles.

What About Other Browsers?

But occasionally there are quirks in other browsers too. Generally there are better ways to fix browser issues, but just in case you’re in a bind or time crunch, here’s a little trick that will let you import alternate stylesheets based on the browser.

First of all, you’ll want to go to this page, and download this script. I’ve extracted the relevant code and put it into a text file that you can view and download by clicking here.

Copy and paste that code into the functions.php file of your WordPress theme below any other code and make sure you use the PHP opening and closing tags if your functions.php file is empty. If it already has code with PHP open/close tags, just make sure you paste the code between them.

Now, head over to your header.php file and find the place where the stylesheet is imported. It might look something like this:

<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>" type="text/css" media="screen" />

Make some room underneath this (and any IE specific stylesheets) and copy/paste this code:

<?php global $user_browser;
$user_browser = browser_detection(‘browser’); ?>
<!–if Safari –>
<?php if ( $user_browser == ‘safari’ ) { ?>
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_directory’); ?>/safari.css" type="text/css" media="screen" />
<?php } ?>
<!–endif–>

See Also

Catchy Podcast Name Generator

…Don’t worry, I’m putting links to sample header.php and functions.php files at the end :-)

OK, what this does is use the function we put in our functions.php file earlier to detect the user’s browser. If the browser is, say Safari, then it will import the safari.css file (be sure to make the safari.css file and put it in the root of your theme folder).

Repeat this process for other browsers like Opera (opera) and FireFox (gecko). For other possibilities, take a look at the code we pasted in the functions.php file.

And there you have it! You can now fix all those little frustrating bugs using browser specific stylesheets.

Some Sample Code to Download

Oh, and here are a couple of files that might help you get started. Either copy/paste the code, or download and rename them as PHP files.
Header.php
Functions.php

Enjoy!