The “Be Mean to Opera” Hack

This hack can be used to hide CSS from Opera (versions 5 and below):

html>body .myDiv { m\yProperty: myval; }

IE5/win and Opera 3-5 suffer from the same CSS parsing bug that is exploited in Tantek’s Box Model Hack. (Without Tantek’s hack, real-world CSS development would be much harder.) The Tantek hack has a “Be Nice to Opera” rule that allows developers to filter out Opera and simply target their CSS to correct IE5/win’s broken box model. To specifically target Opera, though, developers need to modify the “Be Nice to Opera” rule using the Simplified Box Model Hack. For example, using the following CSS, only Opera 3-5 will display the div.myDiv using red text.

div.myDiv {
  color: black;
}
html>body div.myDiv {
  color: red;
  c\olor: black; /* be ~mean~ to Opera -- http://www.albin.net/css/be_mean_to_opera */
}

What the heck does that mean? The “Be Mean to Opera” selector means: “select the div.myDiv descendent of the body element if the body element is a child of the html element.” Since the body element is always a child of the html element, this rule can be modified to match anything inside the body element.

IE/win (versions 6 and below) don’t support CSS2’s child selector and, thus, will ignore the entire html>body rule. Opera (versions 5 and before) will ignore the property that has an escape (\) character in it. Any letter G-Z can be escaped with a backslash (\) without affecting it’s meaning. In other words, ‘\g’ will be read by a non-buggy CSS parser as ‘g’. Don’t escape the letters A-F; they are interpreted as hexidecimal numbers when escaped (‘\f’ means ‘15’ in hexidecimal). Opera 6, IE5/Mac, IE6/win, Netscape 6, and Mozilla all have CSS parsers that interpret escaped characters correctly; all but IE6/win (because of it’s lack of support for CSS2’s child selector) will read the html>body { c\olor: black; } property.