如何使CSS仅对Opera可见

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支持,并通过了所有的测试酸,所以如果事情没有出现合适的,这可能是因为其它原因(错误别的地方的代码,细节或拐角情况下,你不应该依赖等.)

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;
    };
}