CSS filter

A CSS Filter is a coding technique used to hide or show CSS markup depending on the browser's brand and/or version number. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. Web developers will implement CSS Filters when attempting to achieve consistent layout appearance in browsers that do not have a consistent CSS behavior.

Some of these CS Filtes make use of tags called Conditional Comments to denote special instructions. Other developers have exploited the rendering flaws of certain browsers when Conditional Comments were not available or were perceived to be a better solution at the time.

The practice of exploiting rendering flaws in different browsers is commonly referred to as CSS Hacks. These hacks may provide desired results across all the browsers the developers chooses to support at the time, however, they may not have the same results when new browsers are released.

Conditional Comments

Conditional comments are often used by web developers for selectively feeding HTML markup to Internet Explorer [ [http://msdn2.microsoft.com/en-us/library/ms537512(VS.85).aspx Microsoft Developers Network] ] only. The technique also allows the targeting of specific versions of IE browsers.

Below are typical examples of usage where only Internet Explorer 5 and 6 will see what is within the comment tags.

or

"Hacks"

"Hacks" are style definitions that exploit known peculiarities and bugs to control whether style rules are seen by a specific browser version. Care should be taken when using hacks: website authors should check that hacks still work as intended when new version of browsers are released.

Import Hacks

The @import statement is not supported at all in Netscape 4, so many sites will import their real stylesheets from a small inline stylesheet to hide it from IE. IE 5 Mc has parsing bugs related to the import statement.

Parsing Error Hacks

There are many hacks based on CSS parser bugs in particular browsers, particularly parsing of comments, and backslash-escaping.

Commented Backslash

This hack uses a bug in Internet Explorer for Mac related to comment parsing. A comment ending in "*/" is not properly closed in IE Mac, so rules that need to be ignored in IE mac can be placed after such a comment. Another comment is needed after the rule to close the comment for IE mac.

/* Ignore the next rule in IE mac */selector { ...styles... }/* Stop ignoring in IE mac */

"Box Model Hack"

Called the "Box Model Hack" because the bug it is most often used to work around is the Internet Explorer box model bug, this hack provides a different set of properties to IE and other browsers.

#elem { width: [IE width] ; voice-family: ""}""; voice-family:inherit; width: [Other browser width] ;}html>body #elem { width: [Other browser width] ;}

The first "voice-family" statement is set to the string '"}"', but an IE parser bug will interpret it as a string with a single backslash followed by a } for the end of the rule. voice-family is chosen because it will not affect rendering on a screen stylesheet. The second rule uses the html>body hack for browsers such as Opera 5 that have the parsing bug but do not have the box model bug (and, additionally, which support the child selector)

Another solution is using the "_" bug of IE6 and less :

#elem { width: [W3C Model Width] ; _width: [BorderBox Model] ; /* Another solution : -width: [BorderBox Model] ; */}

IE7 now uses the [http://www.w3.org/TR/CSS21/box.html W3C Box Model] if you include a correct Document Type Declaration (DTD) in your document. If you omit the DTD from your document, IE7 will use the Border-Box Model, but will not apply the "_width" property declaration, resulting in an improper rendering of your page.

Selector Hacks

Star HTML hack

The html element is the root element of the W3C standard DOM, but Internet explorer versions 5.5 and 6 include a mysterious parent element. Fully-compliant browsers will ignore the * html selector, while IE 5.5 and 6 will process it normally. This enables rules to be specified for these versions of Internet Explorer which will be ignored by all other browsers. For example, this rule specifies text size in Internet Explorer 5.5 and 6, but not in any other browsers. * html p {font-size: 5em; }

Same way, only IE7 will catch this rule: *:first-child+html p {font-size: 5em; }Note that the "star plus" hack that filters rules for IE7 only works in standards-based mode. If IE7 is set to quirksmode, the filter will be ignored. The "Star HTML" hack will most likely also be ignored since the IE developers fixed this particular bug in IE7 [http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx The IEBlog] ] .

html>body hack

Versions of Internet Explorer before version 7 do not support the "child selector" (>), allowing rules to be specified for all browsers except Internet Explorer. For example, this rule will turn paragraph text blue in Firefox, but not in IE before version 7. html>body p {color: blue; }

Negation pseudo class hack

All versions of Internet Explorer and Opera do not support the "negation pseudo class" (not()) [ [http://reference.sitepoint.com/css/pseudoclass-not Sitepoint CSS Reference] ] which is a CSS Version 3 pseudo class selector.

.yourSelector {color: black;} /* values for IE */

html:not( [dummy] ) .yourSelector {color: red;} /* values for Safari and Firefox */

@media all and (min-width: 0px) { .yourSelector {color: blue;} } /* values for Opera */

The negation tag basically says that any element in the selection (class, id, element type, etc.) that does not have a certain property set will be targeted by the following properties.

Criticisms of Hacks

Hiding code using hacks often leads to pages being incorrectly displayed when browsers are updated. Many Hacks that used to hide CSS from Internet Explorer 6 and lower no longer work in Internet Explorer 7 due to Internet Explorer 7's improved support for CSS standards. The Microsoft Internet Explorer development team have asked that people use conditional comments insteadSee IE Blog] of hacks.

Notes

External links

* [http://centricle.com/ref/css/filters/ CSS Filters] - A fairly complete table of CSS "hacks" which show and hide rules from specific browsers
* [http://www.communis.co.uk/dithered/css_filters/css_only/index.html CSS Filters - CSS-only Filters Summary] - More CSS filters.
* [http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/ Emulating border-color: transparent in Internet Explorer 6] Emulating border-color: transparent in Internet Explorer 6.