Best IT Recipes

How to make CSS visible only for Opera

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

+30
css opera css-hack
Jul 13 '09 at 15:55
source share
13 answers

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 does not apply to any other browser, as far as I tested, but it can be relevant for several months, with a boom in web technologies, etc.

+15
Aug 14 '09 at 22:11
source share

works great for Opera 10.63

 noindex:-o-prefocus, .class { color:#fff; }
+58
Oct 26 2018-10-10T00:
source share

With pure CSS hacking, you won’t be able to safely limit the upper version that you crack (for example, -o-prefocus can be maintained 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 first try checking the CSS specification first to make sure that you actually crack the error. Opera 10 has full CSS2.1 support and passes all Acid tests, so if something doesn’t display correctly, it may be due to other reasons (an error is somewhere else in the code, in the details, or in the corner you shouldn’t rely on, etc ..)

+8
Jul 13 '09 at 22:29
source share

Opera12

 @media (min-resolution: .001dpcm) { _:-o-prefocus, .class { background: red; }; }
+6
Jul 24 '12 at 13:59
source share

Do not think "discover Opera."

Think of "detecting browsers that do not support the x function." For example, this JavaScript statement allows you to 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'

Combining this, 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 */ }

Caution: untested: -p

+5
Aug 26 '09 at 14:29
source share

You can use Modernizr ( http://www.modernizr.com/ ) to detect the CSS functions you want to use - it applies class names to the body element, so you can then create your own CSS.

+3
Aug 29 '09 at 19:29
source share

I wrote the jQuery $ .support extension to detect support for the css property.

http://gist.github.com/556448



In addition, I wrote a small snippet to make really small provider hacks:

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

This leads, for example, to:

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

Your style sheets use this:

 html.opera #content_lock { background:rgba(0,0,0,0.33); }
+3
Aug 29 2018-10-10 at
source share

The only way I can think of is to check the user agent and only reference the stylesheet when it is an Opera browser. Because the user agent may be confused with this, it may not be 100% reliable.

+1
Jul 13 '09 at 16:00
source share

You can use javascript to write <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, as a rule, this is bad practice for styling based on browser sniffing.

+1
Jul 13 '09 at 16:02
source share

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

sample here

+1
Nov 25 '09 at 10:26
source share

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

Although this solution is more likely to hack CSS, there is no guarantee that it will be supported in future versions of Opera. You can also 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

+1
Dec 18 '09 at 17:59
source share

I do not recommend it at all.

Check if you have a Javascript or PHP browser in your browser. Some may be so outdated that you need to add detection for Opera 9.5+, however.

Browser sniffers (for styling) are usually bad practice.

Also, note that Opera 9.5+ provides users with the ability to mask their browser as IE, making sniffing unnecessary.

Edit: as you can see in another answer, there is window.opera.version() . I did not know that the window.opera object contains this information. HOWEVER, you should probably see if this object is accessible when someone installed Opera as IE or some other browser.

0
Jul 13 '09 at 16:01
source share

@certainlyakey works amazingly 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 will not display correctly in Opera. The button appears many times (add to cart). After applying this fix, it worked great.

0
Apr 21 2018-11-11T00:
source share


More articles:


All Articles