Make CSS applicable only to Opera 11?

Question

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

Answer 1

I like the problems! It took me a while, but I finally found this:

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 rule + chrome/safari */ } 

checked browsers:

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

This is due to error-handling , as well as the fact that NOT negates the global result (WebKit browsers do not evaluate orientation correctly without a valid value). Since orientation supported in preo 2.7, the second media query is FALSE.

Fake hack orientation sounds like a good name to me.

Answer 2

Is there a good reason you want to do this?

I always recommend that you do not perform browser detection. In almost every case, when people want to use it, it is better to use the object detection function. If you find out if the function you support is supported, you will automatically start supporting new versions of other browsers when they catch up, without constant work, so that your site is updated, as with browser detection scripts.

To discover features, one of the best tools I can offer is to use Modernizr .

For browser discovery - especially the brand of a new browser such as Opera11, I cannot offer anything that will be perfect. The correct answer is to look at the User Agent line, but this can be easily changed by the user to trick another browser (and often this is especially true for Opera users, since they most often try to bypass sites that make the browser and try to block them)

Answer 3

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

Answer 4

I don't know CSS-only, since Opera 11 is still VERY new.

You can use server-side languages ​​such as PHP to discover the User Agent browser, or you can use the freely available Javascript CSS Browser Selector solution.

The above solution does not yet include Opera 11, so let it check the line User Agent User Agent, checking the links. (In fact, they have their own article on how to define an opera )

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

When you now look at the Javascript of the aforementioned CSS browser selector, you can see that it just reads navigator.userAgent and compares it with many options - just add the Opera 11 option and you're good to go (or wait while the developer updates 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 will only be visible in Opera. See the Webmonkeys blog post for more 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 sorts of CSS hacks may no longer work in the future. Therefore, I highly recommend that you add dynamic styles only for Opera with jQuery ( jQuery.browser ).

Answer 7

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

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

Answer 8

Check out this SO Community Wiki .