← funniest pie chart ever

Giant Photography Captures Landscape-Sized Landscapes [Clips] →

Maintaining Browser Specific CSS

View original post found on Ajaxian » Front Page authored by Dion Almaer

September 26th, 2008 | ajax

Nick Cairns saw our post on conditional CSS for browsers and followed up discussing how he handles maintaining IE specific CSS selectors:

We keep our IE related styling right below the common (standards-based) declarations. BUT, we DON’T use hacks. Underscore hacks, * hacks, and all of those things that we all gave up with the birth of IE7 should remain dead and buried. Instead, we’re going to use IE’s conditional commenting to create IE specific CSS selectors. We do this by adding a conditional comment block as the outer most wrapper in our html template (ie. the first tag inside the ).

HTML:

  1.  
  2.   </body><body>
  3.      <!–[if IE 7]><div id=“body1″ class=“IE IE7 IE67″><![endif]–>
  4.      <!–[if IE 6]><div id=“body1″ class=“IE IE6 IE56 IE67″><![endif]–>
  5.      <!–[if IE 5]><div id=“body1″ class=“IE IE5 IE56″><![endif]–>
  6.      <!–[if !IE]>–>
  7.           <div id=“body1″ class=“W3C”>
  8.      <!–<![endif]–>
  9.                 /* THE REST OF YOUR HTML GOES HERE */
  10.           </div>   
  11.   </div></div></div></body> 
  12.  

Now, in this sample, we do have support for older legacy versions of IE, so you could always reduce the number of conditions if your project doesn’t need this level of support. And, you could also easily extend it to include IE8, or to do minus versioning such as IE8-.

With this conditional block in place, it becomes quite easy to place IE only style declarations right below their standards-based counterparts. As an example:

CSS:

  1.  
  2. #header { overflow: hidden; }
  3. .IE #header { zoom: 1; }
  4.  

0 comments ↓

There are no comments yet...Kick things off by filling out the form below.

Leave a Comment