CSS Specific Rule for Opera 12

CSS specific rule for Opera 12?

Here is an officially recommended hack for Opera (in case everything else fails):

doesnotexist:-o-prefocus, .example {
  color: red;
}

http://www.opera.com/docs/specs/presto2.12/css/o-vendor/

via: https://stackoverflow.com/a/4021618

p.s.: notice comment by davehale32, that this hack does not work for IE6. I have no IE6 at my disposal now, so i can't confirm or deny that.

How to make CSS visible only for Opera

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.

Make CSS apply only for Opera 11?

body {background:0} /* default */
@media not screen and (1) {
body {background:red} /* OP 11 */
}
@media not screen and (orientation) {
body {background:green} /* for the earlier versions of Opera that pick the first media query's rule + chrome/safari */
}

Browsers tested:

• red: Opera 11
• green: Opera 10 and 10.5 + WebKit browsers
• none: Opera 9.26 + Firefox 3.6 + IE9

It's related to the error-handling and also the fact that NOT negates the global result (WebKit browsers don't evaluate orientation correctly without a valid value). Since orientation is supported in presto 2.7 the second media query is FALSE.

The false orientation hack sounds like a good name to me.

How to do a Chrome/Opera specific stylesheet?

A clean JavaScript way to do this: http://rafael.adm.br/css_browser_selector/

It ads browser specific classes to the body tag of your HTML which you can use in your CSS like:

.opera #thingie, .chrome #thingie {
  do: this;
}

Inaccurate rem units in Opera12 and IE9

So... I have switched back to em untits. Except few (minor) glitches in IE9 (which are well known subpixel problems) everything is perfect in ALL browsers. Moreover, as before rem issue, I have no problem with media queries which also use em units. Sadly, it seems that rem units are not yet stable enough to use them across existing web browsers. Case closed...

Apply style ONLY on IE

Update 2017

Depending on the environment, conditional comments have been officially deprecated and removed in IE10+.

---

Original

The simplest way is probably to use an Internet Explorer conditional comment in your HTML:

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

There are numerous hacks (e.g. the underscore hack) you can use that will allow you to target only IE within your stylesheet, but it gets very messy if you want to target all versions of IE on all platforms.

---

Related Topics