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 Manager

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

CSS Filtering

05.04.2006

| 4133 views |

        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

Tags: