The so-called "CSS hacks" are particular patterns used by authors to deliver style rules only to one browser or to prevent a browser from reading certain rules that might cause rendering problems. These patterns may rely on parsing bugs, wrong DOM implementations or syntactical constructs supported only by the targeted browser. Hacks may validate or not. In this article I'll review the most popular hacks used by authors to target IE during the years of the IE's predominance.
The Box Model hack
This hack is used in order to hide style rules from Internet Explorer 5 Windows. It relies on a parsing bug related to the correct handling of escaped sequences inside strings. The pattern is the following:
body {
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
The voice-family property is used only as a container of the escaped sequence,
since this is an aural property that has no effect on the visual rendering of a document
(note, however, that its first value is then overridden by the inherit value).
Internet Explorer 5 reads first the '{' token (interpreted as the end of the declaration block) and then
an escape ('\') that hides the following declarations. In other words, Explorer 5 can only read the first
declaration of the block.
The Tan hack
This hack is used in order to hide style rules from Internet Explorer 5 Windows. It relies on a parsing bug related to the correct handling of escapes inside property names. The pattern is the following:
#box {
width: 200px;
w\idth: 180px;
}
An important thing to keep in mind is the exact placement of the escape character. Explorer 5 ignores the declaration only when the escape is inside the property name and comes before any alphabetical character except of a, b, c, d, e, f. In fact, these six alphabetical characters will be interpreted as hexadecimal Unicode characters, undoing the hack. However, this hack is not valid, since the escaped property name will be interpreted as malformed.
The Star-HTML hack
This hack is used in order to deliver style rules only to Internet Explorer 6 (and lower). It relies
on a wrong DOM implementation that affects Explorer since 1997. According to the specifications,
the actual root element of any well-formed (X)HTML document is the html element. Instead,
Explorer 6 (and lower) considers the html element as wrapped in another unknown element. The pattern
is the following:
* html #box {width: 200px}
Variants of this pattern are used in order to target Internet Explorer 7. The patterns are the following:
*:first-child + html #box {width: 200px}
* + html #box {width: 200px}
The Underscore hack
This hack is used in order to deliver style rules only to Internet Explorer 6 (and lower). It relies on a different interpretation of the CSS specifications which allow browsers to use an underscore (_) or hyphen (-) as a prefix for a vendor-specific property name. However, the CSS specifications state also that such properties will never be used in a future CSS standard. In other words, these vendor-specific properties are not valid CSS property and thus this hack won't validate. The pattern is the following:
p {_color: red}
An alternative is as follows:
p {*color: red}
The above variant is used to target Internet Explorer 7.
