advanced code snippet search

Posted By

pckujawa on 01/20/07


Tagged

css hack ie ie7


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

Hirmine
basicmagic
Sahoglu
vali29


CSS hack to target IE7 and under

 / Published in: CSS
 

URL: http://www.ibloomstudios.com/article7/

I pulled this off of Nicholas Gagne's blog at http://www.ibloomstudios.com/article7/. All rights belong to him.

Expand | Embed | Plain Text 
  1. The IE7 CSS Hack
  2. Saturday, January 28, 2006 by Nicholas Gagne
  3.  
  4. The developers of Microsoft Internet Explorer 7 claimed to have removed all of the CSS hacks, I had a feeling that, based on Microsoft's reputation of having one of the poorest QA process, a CSS hack for IE7 must exist. I am aware that we could ues Internet Explorer's conditional comments to deliver a seperate stylesheet, but there are known problems with that method if someone has more than one version of IE installed, so for this article we will focus on a CSS hack.
  5.  
  6. I happened upon a Beta 2 Preview build of Internet Explorer 7, and set up a test page. Here is what my CSS looks like:
  7.  
  8. #item {
  9.     width: 200px;
  10.     height: 200px;
  11.     background: red;
  12. }
  13.  
  14. Here is the corresponding HTML:
  15.  
  16. <div id="item">some text here</div>
  17.  
  18. Now I begin by adding a lang attribute to my body element:
  19.  
  20. <body lang="en">
  21.  
  22. Now, add the CSS to target our div element and start filtering out browsers:
  23.  
  24. *:lang(en) #item{
  25.     background:green !important;
  26. }
  27.  
  28. I've used !important to override the background property previously set. The :lang selector is not supported by IE7 and therfore all versions of Internet Explorer will not read these styles. Unfortunately, Safari also does not support this attribute. We will need to add some more CSS to target Safari:
  29.  
  30. #item:empty {
  31.     background: green !important
  32. }
  33.  
  34. The :empty selector is part of the CSS3 specification, and although it is not accurately supported by Safari, it will still select the element (whether it is empty or not). Now, the green box will show up in every browser except all versions of Internet Explorer. With this IE7 CSS hack you will be able to apply specific styles that will only affect all versions of Internet Explorer including Internet Explorer 7. The IE7 CSS hack has been tested, and found to be working correctly, in the following browsers:
  35.  
  36.     * IE7 Beta 2 Preview/Win
  37.     * IE5.01+/Win
  38.     * Firefox 1.5/Win
  39.     * Opera 8.5/Win & Linux
  40.     * Netscape 7.01, 8/Win
  41.     * Mozilla 1.7.12/Win & Linux
  42.     * Safari 2/Mac
  43.     * Firefox 1.0.4/Linux
  44.     * Epiphany 1.4.8/Linux
  45.     * Galeon 1.3.20/Linux

Report this snippet  

You need to login to post a comment.