How to make CSS visible only for Opera

Question

Is there a way to make some CSS rules visible only for Opera?

Answer 1

works great for Opera 10.63

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

Answer 2

This hack works for the latest Opera:

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

It doesn't touch any other browser as far as i tested, but this may be actual for several months, with web technologies boom etc.

Answer 3

With pure CSS hack you might be unable to safely limit upper version you're hacking (e.g. -o-prefocus may be supported long after your hack stops fixing things and starts breaking them).

// remember to limit maximum version, because hacking all future versions
// will eventually break the page 
if (window.opera && window.opera.version() < 10)     
{
   document.documentElement.className += ' opera9';
}

and in CSS:

.opera9 .element-to-hack { /*declarations for opera <= 9 only*/ }

But please double-check CSS spec first to ensure that what you're hacking is actually a bug. Opera 10 has full CSS2.1 support and passes all Acid tests, so if something doesn't appear right, it might be because of other reasons (error somewhere else in the code, detail or corner case you shouldn't rely on, etc.)

Answer 4

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