Make CSS apply only for Opera 11?

Question

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

Answer 1

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)

Answer 3

You could try using http://www.headjs.com/

Answer 4

I don't know of a CSS-only way as Opera 11 is still VERY new.

You can either use server-side languages like PHP to detect the User Agent of the browser or you can use the freely available Javascript solution CSS Browser Selector.

The above solution does not yet include Opera 11, so let's check Opera 11's User Agent string by checking their references. (Actually they have their own article on how to detect opera)

Opera/9.80 (Windows NT 5.1; U; en) Presto/2.7.39 Version/11.00

When you now look at the Javascript of the above mentioned CSS Browser selector you can see it is just reading out the navigator.userAgent and comparing it to many variations - just add your Opera 11 variation and you are good to go (or wait until the developer updates the javascript - or even better, update the script and tell the author about it!).

Answer 5

Here you go......

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
here you can display anything you want just for opera
}

Answer 6

The following style would indeed only get rendered in Opera. See Webmonkeys blog post for details:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    #myid { background-color: #F00; }
}

But keep in mind, that all sort of CSS hacks might not work anymore in the future. So I would strongly recommend you to add the styles dynamic only for Opera with jQuery (jQuery.browser).

Answer 7

The read-only pseudo-class is a simple filter for Opera:

#foo:read-only { overflow: auto; }