How to make CSS visible only for Opera

Question

Hello!

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

Thank you!

Answer 1

The only way I can think of is to check the user agent and only reference the style sheet when it's an opera browser. Since the user agent can be messed with this might not be 100% reliable.

Answer 2

Not in any way I would recommend.

Check for Javascript or PHP browser sniffers on Google. Some may be so outdated that you need to add detection for Opera 9.5+, however.

Browser sniffers (for styling) are generally bad practice.

Also, note that Opera 9.5+ gives users the option of masking their browser as IE, rendering any kind of sniffing useless.

Edit: As you can see in another answer, there is window.opera.version(). I didn't know the window.opera object contained this information. HOWEVER, you should probably look to see if this object is still available when someone has set Opera to be seen as IE or some other browser.

Answer 3

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.

Answer 4

There's no pure-CSS hack that I know of.

If you have to hack, you'll need to use JavaScript:

// 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 5

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 6

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 7

You could use Modernizr ( http://www.modernizr.com/ ) to detect CSS features you want to use – it applies class names to the body element so you can then construct your CSS accordingly.

Answer 8

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

sample here

Answer 9

<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 10

I have tried EVERY CSS "hack" that is supposed to work for opera 10.10 and NONE OF THEM WORK EXCEPT THIS ONE :

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

It was posted by certainlyakey and i don't have enough of a rep yet to vote it up but this is THE answer. I tested it in Safari, Chrome, ie7, ie8, firefox 3.6 and of course opera and it only effects opera. I love opera, I use it as my personal browser (not for dev, thats firefox's job) and I can attest there are aren't alot of situations when you have to use a hack on Opera but sometimes it is necessary when all other methods fail.

This hack FTW! Thanks again certainlyakey.

Answer 11

The Hack

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

Worked wunderfull! Thanks!

Answer 12

I wrote a jQuery $.support extension for detecting css property support.

http://gist.github.com/556448

---

Additionally i wrote a little snippet to make really little vendor hacks:

// Sets browser infos as html.className
var params = [];
$.each($.browser, function(k, v) {
  var pat = /^[a-z].*/i;
  if(pat.test(k)) { params.push(k); }
});
params = params.join(' ');
$('html').addClass(params);

This results for example in:

<html lang="de" class="webkit version safari">
or
<html lang="de" class="opera version">

In your Stylesheets use it this way:

html.opera #content_lock {
  background:rgba(0,0,0,0.33);
}

Answer 13

works great for Opera 10.63

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