9

有没有办法让一些 CSS 规则只适用于 Opera (11)？

4

7 回答 7

11

我喜欢挑战！
我花了一些时间，但我终于找到了它：

body {background:0} /* default */
@media not screen and (1) {
body {background:red} /* OP 11 */
}
@media not screen and (orientation) {
body {background:green} /* for the earlier versions of Opera that pick the first media query's rule + chrome/safari */
}

测试的浏览器：

  • 红色：歌剧 11
  • 绿色：Opera 10 和 10.5 + WebKit 浏览器
  • 无：Opera 9.26 + Firefox 3.6 + IE9

它与错误处理以及NOT否定全局结果有关（WebKit 浏览器在没有有效值的情况下无法正确评估方向）。由于orientationpresto 2.7 支持第二个媒体查询是FALSE。

错误定向黑客对我来说听起来是个好名字。

于 2011-01-18T13:59:03.457 回答
5

你有充分的理由要这样做吗？

我总是建议不要进行浏览器检测。在几乎所有人们想要使用它的情况下，使用特征检测是一个更好的主意。如果您发现您想要的功能是否受支持，那么您将在其他浏览器的新版本赶上时自动开始支持它们，而无需像使用浏览器检测脚本那样不断地努力使您的网站保持最新状态。

对于特征检测，我建议的最好工具之一是使用Modernizr。

对于浏览器检测——尤其是像 Opera11 这样的全新浏览器——我真的不能提出任何万无一失的建议。正确的答案是查看用户代理字符串，但用户可以很容易地更改它以欺骗另一个浏览器（通常是，尤其是 Opera 用户，因为他们是最常试图绕过的网站浏览器检测并尝试阻止它们）

于 2011-01-10T15:13:02.727 回答
2

您可以尝试使用http://www.headjs.com/

于 2011-01-10T14:58:50.033 回答
2

我不知道只有 CSS 的方式，因为 Opera 11 仍然很新。

您可以使用PHP 等服务器端语言User Agent来检测浏览器，也可以使用免费提供的Javascript解决方案CSS Browser Selector。

上面的解决方案还不包括 Opera 11，所以让我们通过检查他们的引用来检查 Opera 11 的用户代理字符串。（实际上他们有关于如何检测歌剧的文章）

Opera/9.80 (Windows NT 5.1; U; en) Presto/2.7.39 版本/11.00

当您现在查看上述 CSS 浏览器选择器的 Javascript 时，您会发现它只是在读取navigator.userAgent并与许多变体进行比较 - 只需添加您的 Opera 11 变体就可以了（或等到开发人员更新javascript - 甚至更好，更新脚本并告诉作者！）。

于 2011-01-10T14:58:59.950 回答
2

以下样式确实只会在 Opera 中呈现。有关详细信息，请参阅Webmonkeys博客文章：

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    #myid { background-color: #F00; }
}

但请记住，所有类型的 CSS hack 将来可能不再适用。所以我强烈建议您使用 jQuery ( jQuery.browser ) 为 Opera 添加动态样式。

于 2011-01-17T21:05:15.657 回答
2

干得好......

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
here you can display anything you want just for opera
}
于 2011-01-17T02:52:54.330 回答
1

read-only伪类是 Opera 的一个简单过滤器：

#foo:read-only { overflow: auto; }
于 2013-06-12T16:32:26.500 回答