The “Be Mean to Opera” Hack

By John, 11 June, 2002

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.

Topics: CSS

Comments4

The content of this field is kept private and will not be shown publicly.

Anonymous (not verified)

15 years 7 months ago

Thanks, John. Nice to know that some people are actually considering Opera. Surprised me.

Don Reyes (not verified)

14 years 8 months ago

Here is a code that will hide CSS from Opera 6 and 7.

Now that 8 and 9 is out I have not tried it to see if it works.

Why consider Opera, does anyone use it? Actually, to be fair, memory leaks in IE and Firefox are a complete pain in the butt. Chrome is great in terms of speed but for addons, say no more!