How to make CSS visible only for Opera

Question

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

Exemplificative

what is the reason you want to do this? as several people have pointed out this isn't usually the best way to go about fixing CSS issues (IE excepted), if we understood what the underlying problem was we might be able to suggest something more appropriate – Flamboyant

Is this still working for Opera 12? – Sympathizer

@Flamboyant I realize your question was nearly 4 years ago, but just to answer the question, one reason for this is in the case of the bug referenced here: my.opera.com/community/forums/topic.dml?id=1436202 where certain versions of Opera 12 jumbles fonts if someone's font library is messed up. Yes it's a rare incident, but one that my client randomly discovered. Random text elements appeared jumbled and I couldn't just tell her, "Oh well certain Opera users will have to put up with it". – Bonar

Answer 1

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.

Immortal

Vitaly Batonov's use of the :-o-prefocus selector is much simpler. – Autacoid

I hear this now affects chrome > v17 as well – Subfusc

Answer 2

works great for Opera 10.63

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

Inguinal

Excellent trick. Just what I was looking for: A CSS selector that works only in Opera. However you could simplify it like this: <code>*:-o-prefocus,body {background-color:red;}</code> – Autacoid

The theroy behind this trick is that a) browsers are required to ignore the entire CSS rule if there is one selector that it doesn't support. And b) since the this selector uses the -o- prefix, only Opera is supposed to support it - all other must ignore it. – Autacoid

FYI: this solution does not work for IE <= 7. I suggest you wrap your CSS in something like this just to be sure: <!--[if gt IE 100]> <style type="text/css"> ...Vitaly's code here ... </style> <![endif]--> – Harter

Works with opera v12 as far as I can tell! – Bobsleigh

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.)

Maurene

See Vitaly Batanov's comment: there is a pure CSS trick. Otherwise this trick is of course fine enough. But the pure CSS trick should rank higher. – Autacoid

@Autacoid i disagree, often you want a hack to target specific VERSIONS of browser, because when the browser bug is fixed, your hack will often produce some new undesired behaviour. This is why JS hack is better, imho. – Sunstroke

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

Bullwhip

I just want to add that when a browser supposedly supports a feature, it doesn't mean its implementation is flawless. So in some cases you might wanna disable a feature for a specific browser anyway. Like box-shadow in Opera 10.53 still has some redraw issues. I see no other way than hiding it from Opera in this case. Do you? – Tetragrammaton

If you can get away with ignoring a temporary browser bug I'd encourage you to do so. So if the issue is purely cosmetic without impact on functionality, I'd encourage you to do absolutely nothing about it. Even if it makes Opera look worse to a few users who come across the problem, I think it's better to avoid workarounds and hacks that will cause problems further on. – Bullwhip

I believe the question is about a pure CSS trick - see Vitaly Batonov trick by using a CSS selector tha tonly Opera supports. – Autacoid

Yes - but any sort of special-casing might harm compatibility in the future, because browsers keep trying to align better with the standards and with each other. "Code to the standard, not to the implementation" is a good guideline (even though the original poster in this case is probably trying to make things look better in Opera ;) ) – Bullwhip

Answer 5

Opera12

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .class {
        background: red;
    };
}

Flowers

Answer 6

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.

Sprightly

Answer 7

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);
}

Anthologize

Answer 8

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.

Samoyedic

Answer 9

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.

Fanti

I certainly don't want to do browser sniffing, or any kind of JavaScript or server-side detection. I need to make some rules visible only for opera to display CSS rounded corners on elements with border. – Exemplificative

Other browsers have joined Media Query party, so this hack is now out of date. – Maurene

And it's therefore an excellent example of why you should avoid CSS hacks. – Cultivate

Answer 10

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

sample here

Trimetallic

Chrome 6.0.472.59 seems to read from this stylesheet while Opera 10.62 doesn't. – Floriaflorian

This trick is invalid - not standards compliant. Plus that it doesn't work either, according to previous commenter. – Autacoid

Answer 11

<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

Pronghorn

Answer 12

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.

Federate

Does that "masquerade as IE" option include hiding the window.opera variable? If not, detection should still be possible via JavaScript, at least. – Cultivate

If the window.opera object is the only thing to go on, you cannot differentiate between Opera 9.5+ and earlier versions. The asker was quoting Opera 9.5+ specifically so I am not sure if he only CARES about 9.5+ or if he specifically needs to target 9.5+. Will edit my answer. – Federate

Of course, had no idea there was window.opera.version()… Shows how much I care about Opera. :) – Federate

Answer 13

@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.

Parrot