32

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

TylerH
  • 20,799
  • 66
  • 75
  • 101
Calin Don
  • 865
  • 2
  • 11
  • 19
  • 2
    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 – roryf Aug 29 '09 at 19:33
  • Is this still working for Opera 12? – I.G. Pascual Sep 12 '12 at 12:35
  • @roryf 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: http://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". – David Stinemetze Mar 10 '13 at 23:21

13 Answers13

61

works great for Opera 10.63

noindex:-o-prefocus, .class {
  color:#fff;
}
Vitaly Batonov
  • 1,112
  • 3
  • 12
  • 21
  • 2
    Excellent trick. Just what I was looking for: A CSS selector that works only in Opera. However you could simplify it like this: *:-o-prefocus,body {background-color:red;} – Komputist Sep 29 '11 at 19:35
  • 8
    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. – Komputist Sep 29 '11 at 19:51
  • FYI: this solution does not work for IE <= 7. I suggest you wrap your CSS in something like this just to be sure: – davehale23 May 04 '12 at 17:06
  • 2
    Works with opera v12 as far as I can tell! – Matt Jensen Dec 01 '12 at 00:08
15

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.

certainlyakey
  • 492
  • 1
  • 6
  • 13
8

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

Kornel
  • 97,764
  • 37
  • 219
  • 309
  • 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. – Komputist Sep 29 '11 at 19:36
  • @Komputist 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. – c69 Nov 03 '12 at 15:03
6

Opera12

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .class {
        background: red;
    };
}
Jane
  • 208
  • 2
  • 9
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

hallvors
  • 6,069
  • 1
  • 25
  • 43
  • 3
    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? – RamboNo5 May 22 '10 at 09:02
  • 4
    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. – hallvors May 26 '10 at 12:35
  • I believe the question is about a pure CSS trick - see Vitaly Batonov trick by using a CSS selector tha tonly Opera supports. – Komputist Sep 29 '11 at 19:49
  • 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 ;) ) – hallvors Oct 31 '11 at 11:08
3

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.

riddle
  • 655
  • 1
  • 6
  • 9
3

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);
}
Jack Fuchs
  • 400
  • 3
  • 7
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.

JoshBerke
  • 66,142
  • 25
  • 126
  • 164
1

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.

amr
  • 1,255
  • 3
  • 15
  • 23
  • 1
    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. – Calin Don Jul 13 '09 at 16:09
  • Other browsers have joined Media Query party, so this hack is now out of date. – Kornel Jul 13 '09 at 22:17
  • 2
    And it's therefore an excellent example of why you should avoid CSS hacks. – Ben Blank Jul 13 '09 at 22:48
1

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

sample here

valentin
  • 27
  • 1
1

<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

0

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.

  • Does that "masquerade as IE" option include hiding the `window.opera` variable? If not, detection should still be possible via JavaScript, at least. – Ben Blank Jul 13 '09 at 22:51
  • 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. –  Jul 14 '09 at 00:26
  • Of course, had no idea there was `window.opera.version()`… Shows how much I care about Opera. :) –  Jul 14 '09 at 01:13
0

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

Kaos
  • 754
  • 1
  • 8
  • 13