This paragraph should have green text in all browsers that support even a little CSS. However this paragraph will have a orange background in IE5.0/Windows from the @imported style sheet “ie50winbandpassbefore.css” at the start of the inline style sheet, and a thick maroon border from the @imported style sheet “ie50winbandpassafter.css” at the end of the inline style sheet.
Definition
band pass filter
A filter which transmits energy in a specified wavelength band but rejects energy above and below.
Summary
In this case, the IE5.0/Windows Band Pass Filter is a filter which passes external style sheets to version 5.0 Internet Explorer for Windows browsers, but not to earlier/older browsers, nor to newer / more modern browsers.
Code
Here is the inline style sheet for this page:
@media tty {
i{content:”";/<em>” “</em>/}}; @import ‘ie50winbandpassbefore.css’; {;}/<em>”;}
}/</em> */</p>
<p>p.test { color:green; padding:1em }
strong { color:black; background:#fff; padding:0 2px; margin:-2px }</p>
<p>@media tty {
i{content:”";/<em>” “</em>/}}; @import ‘ie50winbandpassafter.css’; {;}/<em>”;}
}/</em> */
Explanation
This works using the same IE5.x/Windows escaped quote parsing bug that the box model hack, high pass filter and inline high pass filter take advantage of. In addition there is a “;” immediately preceding each @import which is both necessary for IE5.0 to recognize the @imports and causes IE5.5 to ignore the @imports.
The IE5.0/Windows Band Pass Filter can be used to import styles exclusively to IE5.0/Windows to apply either before or after other style rules, as demonstrated by the style sheets ie50winbandpassbefore.css and ie50winbandpassafter.css.
Version 4 (and earlier) browsers are filtered out and do not import either of the style sheets since they are imported using the single quotes without url() method.
Compliant CSS1 browsers ignore the contents of the unknown @media rules.
Compliant CSS2 browsers parse the @media rules, but see only a single rule that sets the ‘content’ property of the presentational tag to the string:
\";/* */}}; @import 'ie50winbandpassbefore.css'; {;}/*
(or ‘ie50winbandpassafter.css’ in the second case) where that leading double quote (“) and trailing apparent comment start (/*) are actually both inside the literal string. And this rule will never be applied for all intents and purposes because so far no one has built a compliant CSS2 browser that renders to the “tty” medium.
Result
As a result of this style sheet filtration process, the imported style sheet(s) will only be seen, retrieved and applied by the following:
* IE5.0/Windows (verified 20031013 by Jens Grochtdreis: IE5.0/Win2k)
And thus these “lower-end” browsers will not:
* IE4.x or earlier on all platforms (verified: IE4.5/MacOS9)
* NS4.x or earlier (verified: NS4.05/MacOS9)
And neither will these “higher-end” browsers:
* IE5/Mac or later (verified: IE5.0/Mac, IE5.1.7/Mac)
* IE5.5/Windows (verified: IE5.5/Win98)
* IE6/Windows or later (verified: IE6/Win2k)
* Netscape 6 or later
* or any other browser which can pass Section 7.1 of the CSS1 Test Suite.
Conclusion
Compliant browsers don’t waste any time at all fetching a separate file, unlike the high pass filter where they fetch the empty “null” external style sheet. Only IE5.0/Windows has to spend the time fetching the IE5.0/Windows band pass style sheets which can be used to send that browser extra “fix-up” style rules to work around any of its specific quirks or short-comings.
oh… it is good article, i hope… i can learning and can be my best practice for building a website. i thought you can write this article in a book, so if i want to learning css, i can borrow your book he he .
Oke guys…, this article is very lovely for me, because… now, i am studying css.
Comment by johan — 5 June, 2007 @ 2:39 am