CSS hack: Difference between revisions

Revision as of 02:01, 28 February 2007

Revision as of 17:54, 24 June 2007

Line 30:

=== "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 <code>@import</code> 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 mac has parsing bugs related to the import statement.

<!--details?-->

==== Parsing Hacks ====

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

===== "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.

<pre>#elem {

width: [IE width];

voice-family: "\"}\"";

voice-family:inherit;

width: [Other browser width];

}

html>body #elem {

width:[Other browser width];

}

</pre>

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 is for browsers such as [[Opera (Internet suite)|Opera]] 5 that have the parsing bug but do not have the box model bug.

==== Selector Hacks ====

===== Star HTML hack =====