How to make CSS visible only for Opera

Question

Is there a way to make some CSS rules visible only for Opera (9.5 +)?

Answer 1

@certainlyakey works awesome for me:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { #id {css rule} }

I have a page with a button, and the text would not render correctly in Opera. The button appears many times (add to cart). After applying this fix it worked perfectly.

Answer 2

works great for Opera 10.63

noindex:-o-prefocus, .class {
  color:#fff;
}

Answer 3

Do not think "detect Opera".

Think "detect browsers that do not support feature x". For example, this JavaScript statement lets you detect browsers that support moz-border-radius:

typeof (getComputedStyle(document.body, '').MozBorderRadius)=='string'

and this is the equivalent for WebKit-based browsers (Safari, Chrome):

typeof (getComputedStyle(document.body, '').WebKitBorderRadius)=='string'

Putting that together, we can come up with something like

function detectBorderRadiusSupport(){
    var styleObj;
    if( window.getComputedStyle ){
        styleObj=window.getComputedStyle(document.body, '');
    }else{
        styleObj=document.body.currentStyle;
    }
    return typeof styleObj.BorderRadius != 'undefined' || typeof styleObj.MozBorderRadius != 'undefined' || typeof styleObj.WebKitBorderRadius != 'undefined';
}

// the below must be inside code that runs when document.body exists, for example from onload/document.ready/DOMContentLoaded event or inline in body

if(!detectBorderRadiusSupport())document.body.className+=' fakeBorderRadius';

CSS:

body.fakeBorderRadius .roundMyCorners{
    /* CSS for Opera and others to emulate rounded corners goes here, 
    typically various background-image and background-position properties */
}

Caveat: untested :-p

Answer 4

<link href="opera.css" rel="stylesheet" type="text/opera" media="all" />

sample here

Answer 5

<link href="opera.css" rel="stylesheet" type="text/opera" media="all" />

Though this solution is rather a CSS hack and there is no guarantee it will be supported in future releases of Opera. You might also consider to use the following solution:

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {

.element{/*style for opera only*/}

}

http://bookmarks-online.net/link/1308/css-including-style-for-opera-only

Answer 6

You can use javascript to write out a <link> to include a specific CSS file.

if (navigator.userAgent.indexOf(’Opera’) != -1) {
    document.write(””);
}
else {
    document.write(””);
}

For Opera 7 you can use this:

/*Visible to only Opera*/
@media all and (min-width: 0) {
    /* css rules here */
}

However, it's generally bad practice to do styling based on browser-sniffing.