有没有办法只让Opera浏览器看到一些CSS规则？
如何使CSS仅在Opera浏览器中可见
32
- Calin Don
3
2你想这样做的原因是什么？正如一些人所指出的那样，这通常不是解决CSS问题的最佳方法（IE除外）。如果我们了解了潜在的问题，也许我们可以建议更合适的解决方案。 - roryf
这个在 Opera 12 上还能用吗？ - I.G. Pascual
@roryf 我知道你的问题已经快4年了，但是为了回答这个问题，其中一个原因是在这里引用的错误情况：http://my.opera.com/community/forums/topic.dml?id=1436202，在某些版本的Opera 12中，如果某人的字体库出现问题，会混淆字体。是的，这是一个罕见的事件，但是我的客户偶然发现了这个问题。随机文本元素出现了混乱，我不能告诉她，“哦，某些Opera用户将不得不忍受它”。 - David Stinemetze
13个回答
61
在 Opera 10.63 上表现良好
noindex:-o-prefocus, .class {
color:#fff;
}
- Vitaly Batonov
4
2真棒的技巧。正是我正在寻找的：一个仅在Opera浏览器中有效的CSS选择器。但是，你可以像这样简化它：<code>*:-o-prefocus,body {background-color:red;}</code> - Komputist
8这个技巧背后的理论是，a）如果一个选择器不被支持，浏览器需要忽略整个CSS规则。b）由于这个选择器使用了“-o-”前缀，只有Opera浏览器应该支持它，其他浏览器都必须忽略它。 - Komputist
请注意：此解决方案不适用于IE <= 7。我建议您使用类似以下代码包裹您的CSS，以确保兼容性：<!--[if gt IE 100]>
<style type="text/css"> ...Vitaly's code here ... </style>
<![endif]--> - davehale23
2据我所知，它可以与Opera v12兼容！ - Matt Jensen
15
这个技巧适用于最新版本的Opera浏览器：
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#id {css rule}
}
就我所测试的范围来看，它不会影响到其他任何浏览器，但随着网络技术的飞速发展，这种情况可能会持续数月。
- certainlyakey
2
3维塔利·巴托诺夫使用 :-o-prefocus 选择器更加简单。 - Komputist
我听说这现在也影响Chrome > v17。 - Kasapo
8
使用纯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';
}
在 CSS 中：
.opera9 .element-to-hack { /*declarations for opera <= 9 only*/ }
但请务必先仔细查看CSS规范，以确保你要改变的内容确实是一个Bug。Opera 10完全支持CSS2.1并通过了所有Acid测试，所以如果某些东西显示不正确，可能是因为其他原因（代码中的其他错误、细节或特殊情况等）。
- Kornel
2
请参考Vitaly Batanov的评论：确实有一种纯CSS技巧。否则，这个技巧当然足够好了。但是纯CSS技巧应该排名更高。 - Komputist
@Komputist 我不同意，通常你需要一个hack来针对特定版本的浏览器，因为当浏览器漏洞被修复后，你的hack往往会产生一些新的不良行为。这就是为什么JS hack更好，我个人认为。 - c69
6
不要只考虑“检测Opera”。
应该思考“检测不支持X特性的浏览器”。例如，下面这个JavaScript语句可以让你检测支持moz-border-radius特性的浏览器：
typeof (getComputedStyle(document.body, '').MozBorderRadius)=='string'
对于基于WebKit的浏览器（Safari、Chrome），下面是等效的代码：
typeof (getComputedStyle(document.body, '').WebKitBorderRadius)=='string'
把这些放在一起，我们可以得出类似这样的东西：
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 */
}
注意：未经测试 :-p
- hallvors
4
3我想补充一点，当浏览器声称支持某项功能时，并不意味着它的实现是完美无缺的。因此，在某些情况下，您可能仍需要针对特定浏览器禁用某个功能。例如，Opera 10.53 中的
box-shadow 仍然存在某些重绘问题。在这种情况下，我认为除了从 Opera 中隐藏它，别无他法，你呢？ - RamboNo54如果你可以忽略一个临时的浏览器错误，我鼓励你这样做。所以如果问题只是外观上的小问题，并没有影响功能，我会鼓励你不要采取任何措施。即使这会让一些用户对Opera的外观印象变差，我认为最好避免使用解决方法和技巧，因为这可能会在以后引起更多问题。 - hallvors
我认为这个问题是关于一个纯CSS技巧的 - 可以看到Vitaly Batonov使用了一个只有Opera支持的CSS选择器的技巧。 - Komputist
是的，但任何特殊情况可能会损害未来的兼容性，因为浏览器一直在努力与标准和其他浏览器保持一致。"按照标准编写代码，而不是按照实现方式"是一个很好的指导原则（尽管在这种情况下，原帖作者可能试图让Opera看起来更好一些 ;) ）。 - hallvors
6
Opera12
@media (min-resolution: .001dpcm) {
_:-o-prefocus, .class {
background: red;
};
}
- Jane
3
我写了一个jQuery $.support扩展来检测css属性支持情况。
http://gist.github.com/556448
此外，我还编写了一个小片段，用于制作非常小的供应商修补程序。
这会导致例如以下结果：
在你的样式表中这样使用它：
// 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);
这会导致例如以下结果：
<html lang="de" class="webkit version safari">
or
<html lang="de" class="opera version">
在你的样式表中这样使用它：
html.opera #content_lock {
background:rgba(0,0,0,0.33);
}
- Jack Fuchs
1
您可以使用JavaScript编写<link>来包含特定的CSS文件。
if (navigator.userAgent.indexOf(’Opera’) != -1) {
document.write(””);
}
else {
document.write(””);
}
对于 Opera 7，您可以使用以下代码：
/*Visible to only Opera*/
@media all and (min-width: 0) {
/* css rules here */
}
然而，基于浏览器嗅探进行样式设计通常是不好的实践。
- amr
3
1我绝对不想进行浏览器嗅探，也不想使用任何JavaScript或服务器端检测。我需要使一些规则仅在Opera中可见，以便在具有边框的元素上显示CSS圆角。 - Calin Don
其他浏览器也加入了媒体查询的行列，所以这个hack现在已经过时了。 - Kornel
2这是一个很好的例子，说明为什么你应该避免使用CSS hack。 - Ben Blank
1
<link href="opera.css" rel="stylesheet" type="text/opera" media="all" />
虽然这个解决方案是一种CSS hack，而且不能保证在未来的Opera版本中得到支持。您也可以考虑使用以下解决方案：
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {
.element{/*仅适用于Opera的样式*/}
}
http://bookmarks-online.net/link/1308/css-including-style-for-opera-only
- user234726
1
- valentin
2
2Chrome 6.0.472.59似乎从这个样式表中读取，而Opera 10.62则没有。 - Lèse majesté
这个技巧是无效的 - 不符合标准。而且根据之前的评论者说，它也不起作用。 - Komputist
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接