如何使 CSS 仅对 Opera 可见

Posted 2023-02-25

技术标签:

【中文标题】如何使 CSS 仅对 Opera 可见【英文标题】：How to make CSS visible only for Opera 【发布时间】：2010-11-10 08:35:16 【问题描述】：

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

【问题讨论】：

您想这样做的原因是什么？正如一些人指出的那样，这通常不是解决 CSS 问题（IE 除外）的最佳方法，如果我们了解潜在问题是什么，我们可能会提出更合适的建议这仍然适用于 Opera 12 吗？ @roryf 我知道您的问题是将近 4 年前的问题，但只是为了回答这个问题，原因之一是此处引用的错误：my.opera.com/community/forums/topic.dml?id=1436202 某些版本的 Opera 12如果某人的字体库搞砸了，字体就会混乱。是的，这是一个罕见的事件，但我的客户随机发现的。随机的文本元素显得杂乱无章，我不能只是告诉她，“哦，好吧，某些 Opera 用户将不得不忍受它”。 【参考方案1】：

非常适合 Opera 10.63

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

【讨论】：

绝妙的把戏。正是我要找的：一个只在 Opera 中工作的 CSS 选择器。但是你可以像这样简化它： *:-o-prefocus,body background-color:red; 这个技巧背后的原理是：a) 如果有一个选择器不支持，浏览器必须忽略整个 CSS 规则。 b) 由于 this 选择器使用 -o- 前缀，因此只有 Opera 应该支持它 - 所有其他选择器都必须忽略它。仅供参考：此解决方案不适用于 IE 据我所知与 Opera v12 兼容！感谢上帝赐予你这样的聪明人！【参考方案2】：

此 hack 适用于最新的 Opera：

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

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

【讨论】：

Vitaly Batonov 对 :-o-prefocus 选择器的使用要简单得多。我听说这现在也会影响 chrome > v17 那是一个真正的黑客攻击 :)【参考方案3】：

使用纯 CSS hack，您可能无法安全地限制您正在破解的更高版本（例如，-o-prefocus 可能会在您的 hack 停止修复并开始破坏它们之后很长时间才得到支持。）。 p>

// 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 测试，所以如果某些东西看起来不正确，可能是由于其他原因（代码中其他地方的错误、您不应该依赖的细节或极端情况等） .)

【讨论】：

查看 Vitaly Batanov 的评论：是一个纯 CSS 技巧。否则这个技巧当然足够好了。但是纯 CSS 技巧应该排名更高。 @Komputist 我不同意，通常您希望针对特定版本的浏览器进行黑客攻击，因为当浏览器错误得到修复时，您的黑客攻击通常会产生一些新的不良行为。这就是为什么 JS hack 更好，恕我直言。【参考方案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

【讨论】：

我只想补充一点，当浏览器应该支持某项功能时，并不意味着它的实现是完美无缺的。因此，在某些情况下，您可能仍想禁用特定浏览器的功能。就像 Opera 10.53 中的 box-shadow 一样，仍然存在一些重绘问题。在这种情况下，我认为除了将其隐藏在 Opera 之外别无他法。你呢？如果你可以忽略一个临时的浏览器错误，我鼓励你这样做。因此，如果问题纯粹是装饰性的，对功能没有影响，我鼓励您对此完全不做任何事情。即使它让一些遇到问题的用户看起来更糟，我认为最好避免会导致进一步问题的变通方法和黑客攻击。我相信这个问题是关于纯 CSS 技巧的 - 请参阅 Vitaly Batonov 技巧，使用 Opera 支持的 CSS 选择器。是的——但是任何类型的特殊大小写都可能在未来损害兼容性，因为浏览器一直在努力更好地与标准和彼此保持一致。 “代码符合标准，而不是实现”是一个很好的指导方针（即使在这种情况下，原始海报可能试图让 Opera 中的东西看起来更好；））【参考方案5】：

Opera12

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

【讨论】：

【参考方案6】：

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

【讨论】：

【参考方案7】：

我写了一个 jQuery $.support 扩展来检测 css 属性支持。

http://gist.github.com/556448

另外，我写了一个小 sn-p 来制作非常小的供应商黑客：

// 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);

【讨论】：

【参考方案8】：

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

【讨论】：

【参考方案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 */

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

【讨论】：

我当然不想进行浏览器嗅探，或者任何类型的 JavaScript 或服务器端检测。我需要使一些规则仅对歌剧可见，以便在带边框的元素上显示 CSS 圆角。其他浏览器已经加入了媒体查询群，所以这个hack现在已经过时了。因此，这是一个很好的例子，说明了为什么你应该避免 CSS hack。【参考方案10】：

sample here

【讨论】：

Chrome 6.0.472.59 似乎从这个样式表中读取，而 Opera 10.62 没有。这个技巧无效 - 不符合标准。另外，根据之前的评论，它也不起作用。【参考方案11】：

<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

【讨论】：

【参考方案12】：

我不会以任何方式推荐。

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

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

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

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

【讨论】：

“伪装成 IE”选项是否包括隐藏 window.opera 变量？如果没有，至少应该仍然可以通过 JavaScript 进行检测。如果 window.opera 对象是唯一的事情，你就无法区分 Opera 9.5+ 和更早的版本。提问者特别引用了 Opera 9.5+，所以我不确定他是否只关心 9.5+，或者他是否特别需要针对 9.5+。将编辑我的答案。当然，不知道有window.opera.version()... 可见我对 Opera 的关心程度。 :)【参考方案13】：

@certainlyakey 对我来说很棒：

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

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

【讨论】：

以上是关于如何使 CSS 仅对 Opera 可见的主要内容，如果未能解决你的问题，请参考以下文章

如何在three.js场景中使对象仅对一台摄像机可见

使元素仅对 md 大小的设备可见

如何使 CSS3 圆角在 Chrome/Opera 中隐藏溢出

如何让Blogger QuickEdit小部件仅对管理员可见？

CSS如何使div在焦点上可见不起作用

DW设计网页如何使DIV能自适应窗口大小居中显示，并且兼容IE、火狐、谷歌、opera等浏览器？