Mid Pass Filter

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:"\";/*" "*/}} @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'; /*";}
}/* */

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(.1) browsers parse the @media rules, but see only a single rule that sets the 'content' property of the presentational <i> 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(.1) 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:

And thus these "lower-end" browsers will not:

And neither will these "higher-end" browsers:

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.

Valid XHTML 1.0 Strict. Valid CSS.

Creative Commons License This web page is licensed under a Creative Commons License.