仅针对带有 CSS 的 Firefox答案

【问题标题】：Targeting only Firefox with CSS仅针对带有 CSS 的 Firefox
【发布时间】：2010-10-31 11:19:59
【问题描述】：

使用条件 cmets 很容易通过特定于浏览器的 CSS 规则来定位 Internet Explorer：

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

有时行为不端的是 Gecko 引擎 (Firefox)。 用你的 CSS 规则只针对 Firefox 而不是单个其他浏览器的最佳方法是什么？也就是说，不仅 Internet Explorer 应该忽略仅限 Firefox 的规则，WebKit 和 Opera 也应该忽略。

注意：我正在寻找“干净”的解决方案。在我看来，使用 JavaScript 浏览器嗅探器将“firefox”类添加到我的 HTML 中并不符合干净的条件。我宁愿看到一些依赖于浏览器功能的东西，就像条件 cmets 只是 IE 的“特殊”......

【问题讨论】：

可能想看看一些类似的问题和他们的相关答案...stackoverflow.com/questions/738831/…
有什么方法可以在 windows 机器和 mac 上定位 firefox？

标签： css firefox css-hack

【解决方案1】：

好的，我找到了。这可能是目前最简洁、最简单的解决方案，并且不依赖于打开 JavaScript。

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

&lt;h1&gt;This should be red in FF&lt;/h1&gt;

它基于另一个 Mozilla 特定的 CSS 扩展。这些 CSS 扩展的完整列表就在这里：Mozilla CSS Extensions。

【讨论】：

"@-moz-document" 后面的 url-prefix() 到底是什么意思？只是好奇。
@Matt，这是一种过滤应用该 CSS 的网站的方法。另一种选择是使用domain() 过滤器。例如，@-moz-document domain(google.com) {...} 将仅在 google.com 域上应用随附的 CSS 规则。
我喜欢您不必像在 IE 中那样为此创建一个全新的 CSS 文档。
@JohnIsaacks 对于 IE 条件 cmets，您不需要单独的样式表。它们可以是内联的。你是否想这样做是另一个问题。
值得注意的是，从 2018 年 3 月发布的 Firefox 59 开始，此解决方法不再有效：bugzilla.mozilla.org/show_bug.cgi?id=1035091

【解决方案2】：

更新（来自@Antoine 评论）

你可以使用@supports

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}

&lt;h1&gt;This should be red in FF&lt;/h1&gt;

更多关于@supports here

【讨论】：

这是一个比 @-moz-document url-prefix() 示例更好的解决方案，它也可以与 SCSS 解析器配合使用，而另一个则没有。
我用的是火狐，还是白的，是不是因为我用的版本？
@Antoine 你是对的！它不适用于最新版本的FF。我更新了我的答案。它现在应该可以工作了。谢谢指出！
我也一样，@JavierC.H. -- 这是 Firefox 89 中唯一对我有用的方法，至少在 Mac 上是这样。

【解决方案3】：

以下是处理三种不同浏览器的方法：IE、FF 和 Chrome

<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
    width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
    #categoryBackNextButtons{
        width:486px;
    }
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
    width:486px;
}
</style>
<![endif]-->

【讨论】：

如果我理解正确的话，最上面的不是 chrome，而只是指定了您为 Firefox 和 IE 覆盖的默认行为。
非常有用。作为一个前 Firefox 爱好者，我很遗憾我必须像这样对 Firefox 进行特定的黑客攻击，但只要它有效，我就可以忍受它。
如果您想将 IE 检测建议添加到 .css 文件中，则该建议不起作用。不过，您可以在 HTML 中以这种方式包含样式表。如果您想在 CSS 文件中包含 IE CSS，我建议您看这里：keithclark.co.uk/articles/…
仅在 Blink（例如 Chrome）默认正确的前提下投了反对票。所有引擎都有问题，虽然 Chrome 最大的问题是它的 IE6 级别垄断了一个迫切需要竞争的市场。

【解决方案4】：

这里有一些只针对 Firefox 浏览器的浏览器技巧，

使用选择器技巧。

_:-moz-tree-row(hover), .selector {}

JavaScript 黑客

var isFF = !!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF = !!navigator.userAgent.match(/firefox/i);

媒体查询黑客

这将适用于 Firefox 3.6 及更高版本

@media screen and (-moz-images-in-menus:0) {}

如果您需要更多信息，请访问browserhacks

【讨论】：

您能否详细说明“使用选择器技巧”以及您提供的示例具体是如何工作的？谢谢。
好吧，我自己搞定了：基本上它所做的就是将第二个选择器隐藏到其他不理解第一个选择器的浏览器中。在这种情况下，只有 Mozilla 理解 _:moz-tree-row(hover)，因此它将是唯一能够处理随后出现的 .selector{} 的人。这个特定的黑客目前适用于所有版本的 Firefox，查看browserhacks.com 了解更多信息。
我使用了媒体查询技巧：\@media screen 和 (-moz-images-in-menus:0) {} 这与 \@media screen 和 (-webkit-min-device -pixel-ratio:0) 并且 Visual Studio 不会使用它引发警告。
请注意 -moz-images-in-menus:0 已在 Firefox 52 中删除 - bugzilla.mozilla.org/show_bug.cgi?id=1302157

【解决方案5】：

首先，免责声明。我并不真正提倡我在下面提出的解决方案。我编写的唯一特定于浏览器的 CSS 是针对 IE（尤其是 IE6），尽管我希望不是这样。

现在，解决方案。你要求它优雅，所以我不知道它有多优雅，但它肯定只会针对 Gecko 平台。

这个技巧只有在启用 JavaScript 并使用 Mozilla 绑定 (XBL) 时才有效，这些绑定在 Firefox 和所有其他基于 Gecko 的产品内部大量使用。作为比较，这类似于 IE 中的 CSS 属性，但功能更强大。

我的解决方案涉及三个文件：

ff.html：要设置样式的文件
ff.xml：包含 Gecko 绑定的文件
ff.css：Firefox 特定样式

ff.html

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

ff.xml

<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl">
    <binding id="load-mozilla-css">
        <implementation>
            <constructor>
            <![CDATA[
                var link = document.createElement("link");
                    link.setAttribute("rel", "stylesheet");
                    link.setAttribute("type", "text/css");
                    link.setAttribute("href", "ff.css");

                document.getElementsByTagName("head")[0]
                        .appendChild(link);
            ]]>
            </constructor>
        </implementation>
    </binding>
</bindings>

ff.css

h1 {
 color: red;
}

更新： 上面的解决方案不是很好。如果不是附加一个新的 LINK 元素，而是在 BODY 元素上添加 that "firefox" 类，那就更好了。这是可能的，只需将上面的 JS 替换为以下内容：

this.className += " firefox";

该解决方案的灵感来自Dean Edwards' moz-behaviors。

【讨论】：

【解决方案6】：

使用 -engine 特定规则确保有效的浏览器定位。

<style type="text/css">

    //Other browsers
    color : black;


    //Webkit (Chrome, Safari)
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        color:green;
    }

    //Firefox
    @media screen and (-moz-images-in-menus:0) {
        color:orange;
    }
</style>

//Internet Explorer
<!--[if IE]>
     <style type='text/css'>
        color:blue;
    </style>
<![endif]-->

【讨论】：

【解决方案7】：

您的想法的一个变体是有一个server-side USER-AGENT detector，它将确定要附加到页面的样式表。这样您就可以拥有firefox.css, ie.css, opera.css, etc。

您可以在 Javascript 本身中完成类似的事情，尽管您可能不认为它是干净的。

我通过添加包含all common styles and then specific style sheets 的default.css 来覆盖或增强默认值来完成类似的操作。

【讨论】：

这确实是一种不错且稳定的方法 —谢谢 —虽然它仍然取决于浏览器嗅探。我宁愿使用依赖于能力的东西，比如 Gecko-only CSS 规则或其他东西。我确实使用相同的基本方法：默认样式和特定于浏览器的附加组件。
@avdaag：在大多数情况下，功能检测是首选，但是当您尝试注入 hack 以“修复”特定渲染引擎的错误时，从理论上讲，以用户代理为目标是最优解。您没有歧视未知浏览器；并且 user-agent 字段应该告诉你浏览器正在使用什么渲染引擎，所以即使出现了罕见的 Gecko 浏览器，它仍然会得到修复。也就是说，由于不恰当地使用浏览器检测，许多浏览器现在伪造了他们的用户代理字符串。所以在实践中它可能不会那么好。

【解决方案8】：

既然 Firefox Quantum 57 对 Gecko （统称为 Stylo 或 Quantum CSS）进行了实质性的（并且可能是突破性的）改进，您可能会发现自己必须区分旧版本的 Firefox 和 Firefox Quantum。

来自我的回答here：

您可以使用 @supports 和 calc(0s) 表达式以及 @-moz-document 来测试 Stylo — Gecko 不支持 calc() 表达式中的时间值，但 Stylo 支持：
@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}
这是一个概念验证：
body::before {
  content: 'Not Fx';
}

@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}
定位 Firefox 的旧版本有点棘手 — 如果您只对支持 @supports（即 Fx 22 及更高版本）的版本感兴趣，那么您只需要 @supports not (animation: calc(0s))：
@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}
...但如果您需要支持更旧的版本，则需要make use of the cascade，如上面的概念验证所示。

【讨论】：

【解决方案9】：

做到这一点的唯一方法是通过各种 CSS hack，这将使您的页面更有可能在下一次浏览器更新时失败。如果有的话，它会比使用 js-browser 嗅探器更安全。

【讨论】：

【解决方案10】：

CSS support 可以在 JavaScript 中使用。

if (CSS.supports("( -moz-user-select:unset )")) {
    console.log("FIREFOX!!!")
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

【讨论】：

【解决方案11】：

以下代码往往会引发 Style lint 警告：

@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}

改为使用

@-moz-document url-prefix('') {
    h1 {
        color: red;
    }
}

帮帮我！从here 获得了样式 lint 警告的解决方案

【讨论】：

【解决方案12】：

带有-moz 前缀

div:-moz-read-only {
  background: green;
}

textarea:-moz-read-write {
  background: green;
}

:-moz-any(div#foo) div.bar {
  background: green;
}

li:-moz-first-node, li:-moz-last-node {
  background: green;
}

【讨论】：