Saturday, June 9, 2007

Star html Selector Bug

The following Cascading Style Sheet (CSS) selectors are all incorrectly interpreted by Microsoft Internet Explorer as if the first universal selector (asterisk) does not exist:

* html /* basic form */
* * body /* whitespace between asterisks is significant */
* html body /* higher specificity than either of above */

Thus far, this bug has been found in IE5/mac, IE5.15/mac, IE5.21/mac, IE5.0/Win, IE5.5/Win, and IE6/Win. It occurs whether the (X)HTML document is in quirks or standards mode. This bug is not present in Mozilla 0.9.9/Win, Moz1.0/Win, Opera5.02/Win, Opera6.01/Win, NS4.x/Win, Moz1.1/mac.

In valid HTML and XHMTL documents html is always the root element and body is always a child of the root element, and never a grandchild (or great grandchild). Therefore, the first 3 CSS selectors above should not match any element. Nonetheless, they are valid selectors.
If no other major CSS-aware browser that recognizes the universal selector misinterprets the above selectors this bug can be put to good use. By using any of the above erroneous selectors we can specify CSS rules that are meant only for IE. If necessary we can serve alternate rules to other browsers.

If this selector truly targets only IE it is a near converse of the Tantek Çelik Hack, specifically the "be nice to Opera" rule where the child selector is used to hide CSS declarations from IE, The star html selector shows the rule to IE only rather than hide it.

div#normal, div#msie { margin: 1em; padding: 1em; background: #def; }/* the following rule is recognized only by IE */
* html body div#msie { background: #009; color: white; font-style: italic; }