DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

CSS Filtering

05.04.2006
| 4611 views |
  • submit to reddit
        I'm a big fan of keeping all css hacks out of the main stylsheet.

To target IE6, you must use a conditional comment
<!--[if IE 6]><link rel="stylesheet" href="ie6.css" media="screen" type="text/css" /><![endif]-->


To target IE5, you can use a conditional comment or the following filters:

Just IE5
@media tty {
  i{content:"\";/*" "*/}}; @import 'ie5.css'; {;}/*";}
}/* */ 

Just IE5.5
@media tty {
  i{content:"\";/*" "*/}}@m; @import 'ie5-5.css'; /*";}
}/* */ 

Both IE5 and IE5.5 (this is my preferred method)
@media tty {
  i{content:"\";/*" "*/}} @import 'midpassbefore.css'; /*";}
}/* */ 


IE5 for the Mac does not have a conditional comment, so a css filter can be used
/*\*//*/
  @import "ie5mac.css";
/**/
 


A solution:
HTML
<head>
  ...
  <link rel="stylesheet" href="media.css" media="screen,projection" type="text/css" />
  <link rel="stylesheet" href="iehacks.css" media="screen" type="text/css" />
  <!--[if IE 6]><link rel="stylesheet" href="ie6.css" media="screen" type="text/css" /><![endif]-->
  <link rel="stylesheet" href="/assets/css/print.css" media="print" type="text/css" />
</head> 
iehacks.css
/******* IE5/mac stylesheet ************/
/*\*//*/
  @import "ie5mac.css";
/**/
/******* IE5 Windows *******************/
@media tty {
  i{content:"\";/*" "*/}} @import 'midpassbefore.css'; /*";}
}/* */ 

sources:
http://tantek.com/CSS/Examples/ie50winbandpass.html
http://tantek.com/CSS/Examples/ie55winbandpass.html
http://www.stopdesign.com/examples/ie5mac-bpf/
http://tantek.com/CSS/Examples/midpass.html
http://www.dithered.com/css_filters/index.html