Browser Specific Style for your WordPress Theme

Filed as Features, Guides on July 12, 2007 8:32 pm

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–>

…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!

Tags:

This post was written by

You can visit the for a short bio, more posts, and other information about the author.


Submissions & Subscriptions

Submit the post to Reddit, StumbleUpon, Digg or Del.icio.us.

Did you like it? Then subscribe to our RSS feed!



  1. By Jermayn Parker posted on July 13, 2007 at 12:48 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Very good idea but from my experiences the only real browser you need to provide an alternative for is IE6. Safari and others usually behave themselves.

    Reply

  2. By TDH posted on July 13, 2007 at 5:51 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Sure, you can do that, and I can see why Microsoft is talking about this solution, but most of the time you can just fix your CSS code to get things right. Including additional stylesheets and browser specifics at that (sucks to update) shouldn’t be done unless you really need it.

    And yeah, Safari is nice nowadays, although their textarea width handling is a possible problem for WP theme developers.

    Reply

  3. By Nathan Rice posted on July 13, 2007 at 12:04 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    You guys are absolutely right, most problems can be fixed just tweaking and fixing the CSS, but there are very rare cases where this might be the most economical/simple method to getting things working correctly. I actually include a main CSS file, a lt-ie7.css and lte-ie7.css file in every theme I release. I don’t always use them, but they’re there if I need theme (or if a user needs them when customizing).

    It’s just a “just in case” tip :-)

    Reply

  4. Matching Browser Display Between IE and Firefox | I'd Rather Be WritingJuly 17, 2007 at 3:47 am

    Your words are your own, so be nice and helpful if you can. If this is the first time you're posting a comment, it might go into moderation. Don't worry, it's not lost, so there's no need to repost it! We accept clean XHTML in comments, but don't overdo it please.

    Current day month ye@r *