Please upgrade to a browser that supports web standards, specifically one that claims to fully support CSS1.

Attention! This was a test of the high pass filter system. If this paragraph has a blue background and there is no preceding upgrade message, then your browser has passed. If there is a preceding upgrade message, or this paragraph has huge text (much bigger than the other paragraphs), or this paragraph has a red background, or this paragraph has a yellow dashed or solid border, or any combination thereof (including all), then your browser has failed. This was only a test.

High Pass Filter

Definition

high pass filter
A filter with a transmission band starting at a lower cutoff frequency and extending to (theoretically) infinite frequency.

Summary

In this case, the High Pass Filter is a filter with a transmission band starting at a minimum requirement of solid CSS1 support, and extending to (theoretically) any future level of CSS.

This page effectively "links" to an external style sheet "highpass.css" in such a way that only browsers which properly support CSS1 parsing (including escaped characters) are able to see the external style sheet.

Method

This is accomplished by linking to a "filter" style sheet which uses a parsing bug in older browsers to trick them into failing to recognize the imported style sheet contained therein.

 <link rel="stylesheet" href="highpassfilter.css" />

And then, "highpassfilter.css" contains:

  @import "null.css?\"\{"; 
  @import "highpass.css";

Explanation

The first '@import' is a dummy - it is there simply to contain the parsing monkey wrench '\"\{' which throws off older browsers. This is the same mechanism which is used in the boxmodelhack to selectively send styling instructions to older browsers. This monkey wrench tricks those older browsers into thinking they should import a style sheet called 'null.css?\', which of course is empty.

Then, the poor, misled browsers think they see the beginnings of a non-sensical style declaration (white space reformatted for demonstration purposes):

 {  ";@import"  highpass  .  css  ";

which, has no selector, begins with a string (instead of a property), has the nonsensical 'highpass' property, a spurious period '.', another nonsensical property 'css' and ends not only in an incomplete string ';' lacking its terminating double-quote, but ends with the lack of a right curly brace '}' to properly close the declaration.

Of course, for browsers which properly support CSS1 parsing, there are simply two @imported style sheets:

 null.css?"{
 highpass.css

The first style sheet, 'null.css?"{', is treated as the file 'null.css' follwed by the CGI query '"{', which is ignored, as is the effectively empty 'null.css' file.

The second style sheet, 'highpass.css' is the actual style sheet which contains the style rules intended for the document.

Result

As a result of this style sheet import filtration process, rules in the actual style sheet will only be seen by the following:

Conclusion

Using the High Pass Filter, both the actual HTML document and the actual CSS style sheet are kept clean and free of any hacks. The only hack in use, for that matter, is neatly contained in the "filter" style sheet.

This "nearly hack-free" means of authoring provides authors the freedom to write clean, valid external CSS1 style sheets to be read and compatibly understood by the few browsers that do so. Only you can decide when you are comfortable letting non-compliant browsers eat unstyled markup.

Q & A

Q: How do you get the highpassfilter to validate via the W3C [CSS] validator?
A: Note the 'null.css' file above. In order to validly use the highpassfilter, you must also place such a file in the same directory as your highpassfilter style sheet.
Q: If the 'null.css' file is empty, that is, contains no comments, just empty white space for example, then IE5/Mac appears to hang for 30 seconds or so.
A: That's not a question, but we'll pass along the info. Note that our 'null.css' file contains the comment /* nothing to see here */ and we suggest folks include a similar comment in their null file(s) as well.

Valid XHTML 1.0 Strict. Valid CSS.

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