Question

有没有办法让一些CSS规则仅对Opera（9.5 +）可见？

Answer 1

适用于Opera 10.63

noindex:-o-prefocus, .class {
  color:#fff;
}

Answer 2

这个黑客适用于最新的Opera：

 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
       #id {css rule}
 }

据我测试，它没有触及任何其他浏览器，但这可能是几个月的实际情况，随着网络技术的繁荣等。

Answer 3

使用纯CSS黑客你可能无法安全地限制你正在黑客攻击的上层版本（例如，在你的黑客停止修复并且开始破坏它们之后很久就可以支持-o-prefocus。

// 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规范，以确保您所攻击的内容实际上是一个错误。 Opera 10具有完整的CSS2.1支持并通过所有Acid测试，因此如果某些内容看起来不正确，可能是由于其他原因（代码中的其他地方出错，您不应该依赖的细节或角落等等）。）

Answer 4

不要认为“检测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

Answer 5

<强> Opera12

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .class {
        background: red;
    };
}

Answer 6

您可以使用Modernizr（http://www.modernizr.com/）来检测您要使用的CSS功能 - 它将类名应用于body元素，以便您可以相应地构建CSS。

Answer 7

我写了一个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);
}

Answer 8

我能想到的唯一方法是检查用户代理，并在它是Opera浏览器时仅引用样式表。由于用户代理可能会被搞乱，因此可能不是100％可靠。

Answer 9

您可以使用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 */
}

然而，基于浏览器嗅探来进行样式化通常是不好的做法。

Answer 10

＆lt; link href =“opera.css” rel =“stylesheet”type =“text / opera” media =“all”/＆gt;

sample here

Answer 11

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

虽然这个解决方案是一个CSS黑客，但无法保证它将在未来的Opera版本中得到支持。您可能还考虑使用以下解决方案：

@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

Answer 12

我不会以任何方式推荐。

检查Google上的Javascript或PHP浏览器嗅探器。有些可能已经过时了，你需要为Opera 9.5+添加检测功能。

浏览器嗅探器（用于样式化）通常是不好的做法。

另外，请注意Opera 9.5+为用户提供了将浏览器屏蔽为IE的选项，使得任何类型的嗅探无用。

编辑：正如您在其他答案中看到的，有window.opera.version()。我不知道window.opera对象包含这些信息。但是，当有人将Opera设置为IE或其他浏览器时，您应该查看此对象是否仍然可用。

Answer 13

@certainlyakey对我来说很棒：

@media all和（-webkit-min-device-pixel-ratio：10000），不是全部和（-webkit-min-device-pixel-ratio：0）{ #id {css rule} }

我有一个带按钮的页面，在Opera中文本无法正确呈现。该按钮多次出现（添加到购物车）。应用此修复后，它工作得很好。

如何使CSS仅对Opera可见

13 个答案: