- Hacking Strategies
- Hacks and Workarounds
- Filtration Systems
- Hack it Up, Take It Home
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Filtration Systems
Filters are really just hacks with a fancy name. Specifically, a filter filters out other browsers so you can create a style sheet to hack for a specific browser or browser set only.
High Pass Filter
This filter is a means of filtering CSS rules to a variety of browsers while ensuring that unwanted styles don't get maligned by those problem browsers. The high pass filter takes into account the idea that we want to move toward as hack-free an environment as possible, but still be able to deliver CSS to browsers in some controlled way.
So while we're still hacking away, we're moving those hacks out of the main HTML and CSS documents.
In the case of the high pass filter, you'll first create a linked style sheet with @import rules written to trick browsers without proper implementation:
<link rel="stylesheet" href="highpassfilter.css" />
This style sheet itself contains two rules:
@import "null?\"\{";
@import "highpass.css";
The first rule is a trick using the same technique in the Box Model Hack to throw off those browsers that can't parse the style value. The second style sheet, highpass.css, will contain your actual styles, which will then be imported into the style sheet and carried over into the compliant browser via the link, leaving the hack separate from the main HTML document and separate from the clean style sheet.
The Mid Pass Filter
This filter allows you to provide a style sheet for versions IE 5.x of Windows without including any other browser. This means you can fix the Box Model and other problems in IE5.x versions without adding those hacks directly to your main documents.
In the case of the mid pass filter, you'll trick the browser using the @media rule with a value of TTY.
Consider the following:
@media tty {
i{content:"\";/*" "*/}} @import 'midpassbefore.css'; /*";}
}/* */
p.test { color:green; padding:1em }
strong { color:black; background:#fff; padding:0 2px; margin:-2px }
@media tty {
i{content:"\";/*" "*/}} @import 'midpassafter.css'; /*";}
}/* */
Because of the filtration process based on bugs with the @media rule, both the first and last @media tty rules will be seen only by IE 5.x browsers for Windows and ignored by all other browsers. The style information in the middle will be interpreted by all browsers.
IE 5.0 Windows Band Pass Filter
This filter works on the same premise as the mid pass filter, but is specific to IE 5.0 for Windows only. Every other browser before or after is filtered out:
@media tty {
i{content:"\";/*" "*/}}; @import 'ie50winbandpassbefore.css'; {;}/*";}
}/* */
p.test { color:green; padding:1em }
strong { color:black; background:#fff; padding:0 2px; margin:-2px }
@media tty {
i{content:"\";/*" "*/}}; @import 'ie50winbandpassafter.css'; {;}/*";}
}/* */
So in this case, the styles you place in an imported style sheet using the @media tty rule and the associated syntax will be picked up by IE 5.0 only:
i{content:"\";/*" "*/}}; @import 'ie50winbandpassbefore.css'; {;}/*";}
}/* */
Any other CSS in the sheet will be picked up by any browser that supports those styles.
IE 5.5 Windows Band Pass Filter
By now, you have the hang of what these filters are doing, and in this case you're filtering for IE 5.5, specifically. Anything you put into the imported style sheet using the IE 5.5 filtration syntax will be used by IE 5.5 only, with no other browsers able to access that style.
@media tty {
i{content:"\";/*" "*/}}@m; @import 'ie55winbandpass.css'; /*";}
}/* */
Any additional normal style information within the style sheet will be picked up by those browsers supporting the styles therein, but the styles in the ie55winbandpass.css file is be picked up only by IE 5.5.
NOTE
All the filters in this section were developed by Tantek Çelik and are distributed freely with attribution under a Creative Commons license, http://www.tantek.com/CSS/Examples/.