Make CSS apply only for Opera 11?

Question

Is there a way to make some CSS rules apply only for Opera (11)?

Answer 1

I love challenges!
It took me some time but I finally found it:

body {background:0} /* default */
@media not screen and (1) {
body {background:red} /* OP 11 */
}
@media not screen and (orientation) {
body {background:green} /* for the earlier versions of Opera that pick the first media query's rule + chrome/safari */
}

browsers tested:

• red: Opera 11
• green: Opera 10 and 10.5 + WebKit browsers
• none: Opera 9.26 + Firefox 3.6 + IE9

It's related to the error-handling and also the fact that NOT negates the global result (WebKit browsers don't evaluate orientation correctly without a valid value). Since orientation is supported in presto 2.7 the second media query is FALSE.

The false orientation hack sounds like a good name to me.

Answer 2

Is there a good reason you want to do this?

I'd always recommend against doing browser detection. In almost every case where people want to use it, it's a better idea to use feature detection instead. If you find out if the feature you want is supported, then you'll automatically start supporting new versions of other browsers when they catch up, without having to constantly work to keep your site up to date as you would with browser detection scripts.

For feature detection, one of the best tools I can suggest is to use Modernizr.

For browser detection - especially brand a new browser like Opera11 - I can't really suggest anything that will be foolproof. The correct answer is to look at the User Agent string, but that can easily be changed by the user to spoof another browser (and often is, especially by Opera users, as they're the one most often trying to get around sites that do browser detection and try to block them)