如何制作Chrome/Opera特定的样式表？

Question

由于客户要求字体替换脚本，导致一些问题需要进行 chrome/opera hacks。虽然这很令人遗憾，但在 IE6-7、FF2-3 和 Safari 中都能正常工作。我无法修复脚本本身，只能使用 CSS 和 HTML 进行 hack。

我正在尝试实现以下操作：

<!--[if IE 6]>
   <link rel="stylesheet" href="ie6.css" type="text/css" media="screen" />
<![endif]-->

这可行吗？

我看到有一种使用 Chrome 特定修复的方法，例如：

body:nth-of-type(1) .elementOrClassName
{
/* properties go here */
}

这个方法有效吗？有更简单的方式吗？那么 Opera 呢？

- marcgg

---

我喜欢你能识别JavaScript中的Opera的方式：if(window.opera) { /针对Opera的特定操作/ }也许你可以使用它来添加特定样式。我不知道Google Chrome是否可以这样做。 - Andrija

谢谢，如果我找不到一种特定的CSS方法，这将有所帮助。 - marcgg

为什么不能胡乱修改JavaScript代码？如果无法修改JavaScript文件，你能否用自己的代码覆盖他们的某个或某些函数？ - Nosredna

导致问题的是客户创建的脚本，他们不想让我修改它......我可以使用andrija或lobstrosity的JS修复程序来更新JS，但我更希望做一些更清晰的事情。我认为有一个适用于Chrome和Opera的CSS条件。 - marcgg

Answer 1

一个干净的JavaScript方法来实现这个功能：http://rafael.adm.br/css_browser_selector/

它会在您的HTML的body标签中添加特定于浏览器的类，您可以在CSS中使用这些类：

.opera #thingie, .chrome #thingie {
  do: this;
}

- Thomas Maas

---

这不完全是我想要的，但这是一个干净的方法，因为显然没有纯CSS的方法来做到这一点。谢谢！ - marcgg

谢谢你分享这个。它将成为我所有项目的基本设置的一部分！非常感谢。 - Joshua Kissoon

Answer 2

避免使用CSS hack，它们会破坏页面。

Google Chrome：

@media not all and (-webkit-min-device-pixel-ratio:0)
{  
    #example
    {
        width: 200px;
    }
}

苹果浏览器：

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    #example
    {
        width: 200px;
    }
}

Opera。

@media not screen and (1)
{
    #example
    {
        width: 200px;
    }
}

如何使CSS仅适用于Opera 11？

如何使CSS仅在Opera中可见

LTE Opera 10的未来兼容CSS Hack

- XP1

---

这也是一种hack方法，而且已经失效了。Chrome版本不再与Chrome匹配，Safari版本与Chrome和Firefox匹配。 - ZachB

Answer 3

对于 Google（和 Safari），你可以简单地使用以下内容：

<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" />

这将加载一个针对Webkit特定的样式表。'type'可以命名为任何您想要的名称，但必须包含。

您只需按照自己的意愿创建样式表，所有非Webkit浏览器都会简单地忽略它。

对于Opera，您将需要使用上述技巧。以下方法对我来说效果最佳:

@media not screen and (1)
    {
    #example
    {
    width: 200px;
    }
}

我曾使用它来加载特定于浏览器的@font-face声明。

- Dylan Edwards

---

添加 HTTP 请求 - Brownrice

Answer 4

我没有测试过这个解决方案，但根据这篇博客文章，你可以尝试以下方法来检测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);
}

- Lobstrosity

---

他说他只能接触HTML和CSS，但不能接触JavaScript。 - Nosredna

我理解的是，他无法修改实际进行字体替换的外部JavaScript文件，但如果他可以编辑HTML，他总是可以添加一个脚本标签 :) - Lobstrosity

可以的，但如果可能的话最好不要。如果你告诉我这是唯一的方法，那么...我想我没有其他选择了！ - marcgg

Answer 5

.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 - Konqueror
.webkit - Safari，NetNewsWire，OmniWeb，Shiira，Google Chrome
.chrome - Google Chrome（所有版本）
.chromexx - Chrome xx（将xx替换为特定版本的数字）新
.safari - Safari（所有版本）新
.iron - SRWare Iron

.[操作系统代码].[浏览器代码] .yourclass { 左内边距:5px; 字体大小:14px }

主体 { 背景颜色:#000 }
.ie8 body {background-color:#111 }（专门针对Internet Explorer 8.x）
.win.ie8 body { background-color:#222 }（仅适用于Microsoft Windows所有版本的Internet Explorer 8.x）
.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 }

这段代码与编程有关，意思是设置IE7浏览器中ID为“right”和“left”的元素宽度为320像素。

欲了解更多信息，请访问以下链接http://cssbs.altervista.org/

- Sabir

Answer 6

请记住：“用户代理嗅探是不好的”

这永远都不是一个好习惯。

实现用户代理嗅探只会让网站维护变得非常麻烦。

你应该优先选择分离的样式表，或者如果样式表数量较少或者没有时间制作多个样式表，则可以使用CSS hack。

对于Opera浏览器，您可以使用以下技巧：

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

可悲的是，所有Chrome的CSS hack也适用于Safari。

除了旧版本的Safari（<= safari3如果我没记错），没有办法分开这两个渲染。

- TwystO