CSS 如何制作 Chrome/Opera 特定的样式表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/945428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do a Chrome/Opera specific stylesheet?
提问by marcgg
I need to do chrome/operahacks because of a font replacement script wanted by the client that breaks things... this is sad but everything is working in IE6-7, FF2-3 and Safari. I have no way of fixing the script itself, I can only hack around it using CSS and HTML.
我需要做chrome/operahack，因为客户端想要的字体替换脚本会破坏事情......这很伤心，但一切都在 IE6-7、FF2-3 和 Safari 中工作。我无法修复脚本本身，我只能使用 CSS 和 HTML 绕过它。
I'm trying to do something in the lines of :
我正在尝试在以下方面做一些事情：
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" media="screen" />
<![endif]-->
Is it possible?
是否可以？
I saw this way of doing chrome specific fixes like:
我看到了这种针对 chrome 进行特定修复的方式，例如：
body:nth-of-type(1) .elementOrClassName
{
/* properties go here */
}
Is this working? Is there a simpler way? What about Opera?
这管用吗？有没有更简单的方法？歌剧呢？
Thanks!
谢谢！
回答by Thomas Maas
A clean javascript way to do this: http://rafael.adm.br/css_browser_selector/
一个干净的 javascript 方法来做到这一点：http: //rafael.adm.br/css_browser_selector/
It ads browser specific classes to the body tag of your html which you can use in your css like:
它将浏览器特定的类广告到您可以在 css 中使用的 html 的 body 标签，例如：
.opera #thingie, .chrome #thingie {
do: this;
}
Hope this helps.
希望这可以帮助。
回答by XP1
Avoid CSS hacks. They will break.
避免 CSS 黑客。他们会打破。
Google Chrome:
谷歌浏览器：
@media not all and (-webkit-min-device-pixel-ratio:0)
{
#example
{
width: 200px;
}
}
Safari:
苹果浏览器：
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#example
{
width: 200px;
}
}
Opera:
歌剧：
@media not screen and (1)
{
#example
{
width: 200px;
}
}
Make CSS apply only for Opera 11?
How to make CSS visible only for Opera
回答by Dylan Edwards
for Google (and Safari) you can simply use the following;
对于 Google（和 Safari），您可以简单地使用以下内容；
<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" />
this will load a webkit specific style-sheet. The 'type' can be named whatever you want but has to be included.
这将加载特定于 webkit 的样式表。“类型”可以随意命名，但必须包含在内。
You just go ahead and create your stylesheet as you please and all non-webkit browsers will simply ignore it.
您只需按照自己的意愿创建样式表，所有非 webkit 浏览器都会忽略它。
You'll have to use the hacks above for the Opera. The following worked best for me:
您必须对 Opera 使用上述技巧。以下对我来说效果最好：
@media not screen and (1)
{
#example
{
width: 200px;
}
}
I've used it to load browser-specific @font-face declarations.
我用它来加载浏览器特定的 @font-face 声明。
回答by Lobstrosity
I haven't tested this solution, but according to this blog entry, you could try the following for Chrome:
我还没有测试过这个解决方案，但根据这个博客条目，你可以在 Chrome 上尝试以下操作：
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
{
var chromeCss = document.createElement("link");
chromeCss.rel = "stylesheet";
chromeCss.href = "ChromeStyle.css";
document.getElementsByTagName("head")[0].appendChild(chromeCss);
}
回答by Sabir
.ie - Internet Explorer (All versions)
.ie10 - Internet Explorer 10.x
.ie9 - Internet Explorer 9.x
.ie8 - Internet Explorer 8.x
.ie7 - Internet Explorer 7.x
.ie6 - Internet Explorer 6.x
.ie5 - Internet Explorer 5.x
.gecko - Firefox (all versions), Camino, SeaMonkey
.ffxx - Firefox xx (change xx with number of specific version) new
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera (All versions)
.opera12 - Opera 12.x
.opera11 - Opera 11.x
.opera10 - Opera 10.x
.opera9 - Opera 9.x
.opera8 - Opera 8.x
.konqueror - Konqueror
.webkit - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
.chrome - Google Chrome (All versions)
.chromexx - Chrome xx (change xx with number of specific version) new
.safari - Safari (All versions) new
.iron - SRWare Iron
.IE -的Internet Explorer（所有版本）
.ie10 - Internet Explorer的10.x的
.ie9 - Internet Explorer中的9.x
.ie8 - Internet Explorer的8.x的
.ie7 - Internet Explorer的7.x的
.ie6 - Internet Explorer 6.x中
。 ie5 - Internet Explorer 5.x
.gecko - Firefox（所有版本）、Camino、SeaMonkey
.ffxx - Firefox xx（使用特定版本号更改 xx）新
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera（所有版本）
.opera12 - Opera 12.x
.opera11 - Opera 11.x
.opera10 - Opera 10.x
.opera9 - Opera 9.x
.opera8 - Opera 8.x
.konqueror - 征服者
.webkit - Safari、NetNewsWire、OmniWeb、Shiira、Google Chrome
.chrome - 谷歌浏览器（所有版本）
.chromexx - Chrome xx（根据特定版本号更改 xx）新
.safari - Safari（所有版本）新
.iron - SRWare铁
body { background-color:#000 }
.ie8 body {background-color:#111 }（特定于 Internet Explorer 8.x）
.win.ie8 body { background-color:#222 }（特定对于 Internet Explorer 8.x，在 Microsoft Windows 所有版本上)
.opera body { background-color:#333 } (Opera 所有版本)
.ff15 body { background-color:#444 } (特定于 Firefox 15.x)
.linux .gecko body { background-color:#555 } (Firefox, Camino, SeaMonkey 所有版本，在 x11 和 Linux 上)
.ie7 #right, .ie7 #left { width:320px }
For more information visit this link http://cssbs.altervista.org/
有关更多信息，请访问此链接 http://cssbs.altervista.org/
回答by TwystO
Just remember that : "User-Agent sniffing is baaaddd"
请记住：“用户代理嗅探是 baaaddd”
That's not and will never be a good practice.
这不是，也永远不会是一个好的做法。
It's just pain in the ass to maintain a website where User-Agent sniffing is implemented.
维护一个实施了 User-Agent 嗅探的网站真是太麻烦了。
You should prefer separated stylesheets, or css hacks if they're in low quantity or if you don't have time to make multiple stylesheets.
如果它们的数量很少或者您没有时间制作多个样式表，您应该更喜欢单独的样式表或 css hacks。
For Opera you can use this trick :
对于 Opera 你可以使用这个技巧：
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
#id {
css rule;
}
}
And Sadly, every Chrome css hacks are also applyed to Safari.
可悲的是，每个 Chrome css hacks 也适用于 Safari。
There's no way to separate the 2 renderings excepted for the old versions of Safari (<= safari3 if I remember well)
除了旧版本的 Safari（如果我没记错的话，<= safari3），没有办法分开 2 个渲染图
