Question

有没有办法让一些CSS规则仅适用于Opera（11）？

Answer 1

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

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 */
}

浏览器测试：

red：Opera 11
green：Opera 10和10.5 + WebKit浏览器
none：Opera 9.26 + Firefox 3.6 + IE9

它与error-handling以及 NOT 否定全局结果的事实有关（WebKit浏览器在没有有效值的情况下不能正确评估方向）。由于presto 2.7支持orientation，因此第二个媒体查询 FALSE 。

false orientation hack 对我来说听起来不错。

Answer 2

你有这么好的理由吗？

我总是建议不要进行浏览器检测。几乎在每个人都想使用它的情况下，使用特征检测更好。如果您发现是否支持您想要的功能，那么当您赶上时，您将自动开始支持其他浏览器的新版本，而无需像浏览器检测脚本那样始终使您的网站保持最新状态。 / p>

对于功能检测，我建议的最佳工具之一是使用Modernizr。

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

Answer 3

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

Answer 4

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

您可以使用像PHP这样的服务器端语言来检测浏览器的User Agent，也可以使用免费提供的 Javascript 解决方案{{3 }}

上述解决方案尚未包含Opera 11，所以让我们通过检查他们的CSS Browser Selector来检查Opera 11的用户代理字符串。（实际上他们在references）上有自己的文章

Opera / 9.80（Windows NT 5.1; U; en）Presto / 2.7.39版本/ 11.00

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

Answer 5

你去......

/* 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
}

Answer 6

以下样式确实只会在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黑客可能在将来不再有效。因此我强烈建议您仅使用jQuery（jQuery.browser）为Opera添加动态样式。

Answer 7

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

#foo:read-only { overflow: auto; }

Answer 8

查看此SO Community Wiki。

CSS只适用于Opera 11吗？

8 个答案: