This paragraph should have green text in all browsers that support even a little CSS. However this paragraph will have a red background in IE5.x/Windows from the @imported style sheet “midpassbefore.css” at the start of the inline style sheet, and a thick yellow border from the @imported style sheet “midpassafter.css” at the end of the inline style sheet.
Definition
mid pass filter
AKA band pass filter. A filter which transmits energy in a specified wavelength band but rejects energy above and below.
Summary
In this case, the Mid Pass Filter is a filter which passes external style sheets to version 5.x 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 ‘midpassbefore.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 ‘midpassafter.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.
The mid pass filter can be used to import styles exclusively to IE5.x/Windows to apply either before or after other style rules, as demonstrated by the style sheets midpassbefore.css and midpassafter.css.
Version 4 (and earlier) browsers are filtered out and do not import either of the mid pass style sheets since the style sheets 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 'midpassbefore.css'; /*
(or ‘midpassafter.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 mid pass style sheet(s) will only be seen, retrieved and applied by the following:
* IE5.0/Windows (verified 20031013 by Jens Grochtdreis: IE5.0/Win2k)
* IE5.5/Windows (verified: IE5.5/Win98)
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)
* 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.css” external style sheet. Only IE5.x/Windows has to spend the time fetching the mid pass style sheets which can be used to send those browsers extra “fix-up” style rules to work around any of their specific quirks or short-comings.
