如何使 CSS 仅对 Opera 可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1120335/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make CSS visible only for Opera
提问by Calin Don
Is there a way to make some CSS rules visible only for Opera (9.5 +)?
有没有办法让一些 CSS 规则只对 Opera (9.5 +) 可见？
采纳答案by certainlyakey
This hack works for the latest Opera:
此 hack 适用于最新的 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.
就我测试而言，它不会触及任何其他浏览器，但这可能会持续几个月，随着网络技术的繁荣等。
回答by Vitaly Batonov
works great for Opera 10.63
适用于 Opera 10.63
noindex:-o-prefocus, .class {
color:#fff;
}
回答by Kornel
With pure CSS hack you might be unable to safely limit upper version you're hacking (e.g. -o-prefocusmay be supported long after your hack stops fixing things and starts breaking them).
使用纯 CSS hack，您可能无法安全地限制您正在 hack 的上层版本（例如，-o-prefocus在您的 hack 停止修复并开始破坏它们之后很长时间可能会得到支持）。
// 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:
在 CSS 中：
.opera9 .element-to-hack { /*declarations for opera <= 9 only*/ }
But pleasedouble-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.)
但是请首先仔细检查 CSS 规范，以确保您正在破解的实际上是一个错误。Opera 10 完全支持 CSS2.1 并通过了所有的 Acid 测试，所以如果出现问题，可能是因为其他原因（代码中其他地方的错误、细节或不应该依赖的极端情况等） .)
回答by hallvors - restore Monica
Do not think "detect Opera".
不要认为“检测 Opera”。
Think "detect browsers that do not support feature x". For example, this JavaScript statement lets you detect browsers that support moz-border-radius:
想想“检测不支持功能 x 的浏览器”。例如，此 JavaScript 语句可让您检测支持 moz-border-radius 的浏览器：
typeof (getComputedStyle(document.body, '').MozBorderRadius)=='string'
and this is the equivalent for WebKit-based browsers (Safari, Chrome):
这相当于基于 WebKit 的浏览器（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:
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
警告：未经测试：-p
回答by Jane
Opera12
歌剧12
@media (min-resolution: .001dpcm) {
_:-o-prefocus, .class {
background: red;
};
}
回答by Hyman Fuchs
I wrote a jQuery $.support extension for detecting css property support.
我写了一个 jQuery $.support 扩展来检测 css 属性支持。
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);
}
回答by riddle
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.
您可以使用 Modernizr ( http://www.modernizr.com/) 来检测您想要使用的 CSS 功能——它将类名应用于 body 元素，以便您可以相应地构建您的 CSS。
回答by valentin
<link href="opera.css" rel="stylesheet" type="text/opera" media="all" />
<link href="opera.css" rel="stylesheet" type="text/opera" media="all" />
回答by valentin
<link href="opera.css" rel="stylesheet" type="text/opera" media="all" />
<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:
虽然这个解决方案是一种 CSS hack，但不能保证它会在未来的 Opera 版本中得到支持。您还可以考虑使用以下解决方案：
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {
.element{/*style for opera only*/}
.element{/*style for opera only*/}
}
}
http://bookmarks-online.net/link/1308/css-including-style-for-opera-only
http://bookmarks-online.net/link/1308/css-include-style-for-opera-only
回答by amr
You can use javascript to write out a <link>to include a specific CSS file.
您可以使用 javascript 写出一个<link>以包含特定的 CSS 文件。
if (navigator.userAgent.indexOf('Opera') != -1) {
document.write(””);
}
else {
document.write(””);
}
For Opera 7 you can use this:
对于 Opera 7，你可以使用这个：
/*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.
但是，基于浏览器嗅探进行样式设置通常是不好的做法。
