A better way to have browser specific CSS

codeIf you are developing websites you know that not everything works across all browsers. You also know you have to make special allowances for some browsers (*cough* IE *cough*).

Before you may have had special external style sheets that directed those special CSS rules for specific browsers.

Something like this:

<!-- [if IE 7]>  <link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css"  />< ![endif]-->
<!-- [if IE 6]>  <link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css"  />< ![endif]-->

Wouldn’t it be nice to be able to have all your CSS in one single style sheet to keep your speed up? If this appeals to you, you can add conditional styles based on the browser:

<!-- [if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!-- [if IE 7 ]>    <html class="ie7"> <![endif]-->
<!-- [if IE 8 ]>    <html class="ie8"> <![endif]-->
<!-- [if IE 9 ]>    <html class="ie9"> <![endif]-->
<!-- [if (gt IE 9)|!(IE)]><!--> <!--<![endif]-->

When you are using IE7 to test a website, it will now have the new class applied to the HTML tag. The other advantage is this doesn’t add extra tags to your body tag should you need to use them.

Now you can create your CSS in the same style sheet like this:

.header { color: #000;}
.ie6 .header { color: #fff; }

Credit for this idea goes to Paul Irish. There is a great discussion about the pros and cons of this technique on his webpage here.

Posted in

Lena Shore

Lena is a full-time freelancer and nerd that specializes in web development, graphic design, and illustration. She enjoys building things, learning new things, pursuing creative endeavors, and giving free advice.

2 Comments

  1. Brandon Johnson on April 17, 2013 at 7:00 pm

    DUH!
    I don’t know why this wasn’t so obvious before – its one of those things that should be such a given that your stunned stupid when you see it.

    Thanks Lena!

    • Lena Shore on April 18, 2013 at 6:49 am

      Glad it was helpful! I felt like you when I first discovered it. (:

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.

Archives