Is there a way to make some CSS rules visible only for Opera (9.5 +)?
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
回答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.
回答2:
works great for Opera 10.63
noindex:-o-prefocus, .class {
color:#fff;
}
回答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.)
回答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
回答5:
Opera12
@media (min-resolution: .001dpcm) {
_:-o-prefocus, .class {
background: red;
};
}
回答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.
回答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);
}
回答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.
回答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.
回答10:
<link href="opera.css" rel="stylesheet" type="text/opera" media="all" />
sample here
回答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
回答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.
回答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.
