31

有没有办法让一些 CSS 规则只对 Opera (9.5 +) 可见？

4

13 回答 13

60

适用于 Opera 10.63

noindex:-o-prefocus, .class {
  color:#fff;
}
于 2010-10-26T07:43:28.393 回答
15

此 hack 适用于最新的 Opera：

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

据我测试，它不会触及任何其他浏览器，但这可能会持续几个月，随着网络技术的蓬勃发展等。

于 2009-08-14T22:11:13.287 回答
8

使用纯 CSS 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 规范，以确保您正在破解的内容实际上是一个错误。Opera 10 具有完整的 CSS2.1 支持并通过了所有 Acid 测试，所以如果某些东西看起来不正确，可能是由于其他原因（代码中其他地方的错误、您不应该依赖的细节或极端情况等） .)

于 2009-07-13T22:29:31.547 回答
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

于 2009-08-26T14:29:25.947 回答
6

歌剧12

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .class {
        background: red;
    };
}
于 2012-07-24T13:59:05.977 回答
3

你可以使用 Modernizr ( http://www.modernizr.com/ ) 来检测你想要使用的 CSS 特性——它将类名应用到 body 元素，这样你就可以相应地构建你的 CSS。

于 2009-08-29T19:29:18.943 回答
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);
}
于 2010-08-29T19:25:13.057 回答
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{/*style for opera only*/}

}

http://bookmarks-online.net/link/1308/css-including-style-for-opera-only

于 2009-12-18T17:59:37.990 回答
1

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

样品在这里

于 2009-11-25T10:26:40.343 回答
1

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

于 2009-07-13T16:00:07.560 回答
1

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

但是，基于浏览器嗅探进行样式设置通常是不好的做法。

于 2009-07-13T16:02:26.900 回答
0

@certainlyakey 对我来说很棒：

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

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

于 2011-04-21T13:23:22.943 回答
0

我不会以任何方式推荐。

在 Google 上检查 Javascript 或 PHP 浏览器嗅探器。但是，有些可能已经过时，您需要为 Opera 9.5+ 添加检测。

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

另外，请注意 Opera 9.5+ 允许用户将他们的浏览器屏蔽为 IE，从而使任何类型的嗅探都变得毫无用处。

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

于 2009-07-13T16:01:36.590 回答