This web page is licensed under a Creative Commons License.Please upgrade to a browser that supports web standards, specifically one that claims to fully support CSS1.
Attention! This was a test of the inline high pass filter system. If this paragraph has a green 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 yellow background, or this paragraph has a red dashed or solid border, or any combination thereof (including all), then your browser has failed. This was only a test.
In this case, the Inline High Pass Filter is a filter placed directly into a style sheet and ensures that any following style rules are seen only by user agents with fairly solid CSS1 support.
This page contains a single inline style sheet (using the <style> element) which has one nonsense rule that only browsers which properly support CSS1 parsing (including escaped characters) are able to see past.
This is accomplished with the use of an escaped double quote within a string, which triggers a parsing bug in older browsers, and tricks them into prematurely closing the string, and thus treating the what immediately follows as the beginning of a style sheet comment, rather than simply treating it as part of the string.
<style type="text/css">
p.attention { background:yellow }
i{content:"\"/*"}
p.attention { background:lime }
</style>
The first style rule is seen by all browsers that support CSS.
It's there simply to cause some default behavior in browsers that support
even the tiniest amount of CSS. The second rule 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
high pass filter to selectively @import
a style sheet only into CSS1 parsing compliant browsers.
This monkey wrench tricks those older browsers into thinking the string is
completed, after which they see '/*', which is of course the
start of a CSS comment. Thus older browsers treat the entire remainder
of the style sheet as one big comment, and fail to apply any following style rules.
Of course, for browsers which properly support CSS1 parsing,
they simply see a rule that sets the 'content' property on all 'i' elements to
'\"/*'. This is a nonsense rule because the content property is
not supported on elements in general (only on the :before and :after pseudo-elements in CSS2),
and a properly semantically marked up document won't be using the essentially presentational
'i' element.
Finally, such compliant browsers will see the third rule, while non-CSS-parsing-compliant browsers won't.
As a result of the inline high pass filter, the rules after the filter will only be seen by the following:
The Inline High Pass Filter provides high pass filtering without ever leaving the current document. Inline style sheets can be easier to edit within the context of the document, and also eliminate the FoUC.
The tradeoff is of course the presence of a hack in your stylesheet, and in your document. But sometimes the simplicity of inline styling makes up for a little noise in the style sheet. Just as with the high pass filter, only you can decide when you are comfortable letting non-compliant browsers eat unstyled markup.
This web page is licensed under a Creative Commons License.