仅针对使用CSS的Firefox

使用条件注释，很容易将Internet Explorer与浏览器特定的CSS规则定位：

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

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

备注：我正在寻找一个“干净”的解决方案。在我看来，使用JavaScript浏览器嗅探器将“火狐”类添加到我的超文本标记语言中并不算干净。我宁愿看到一些取决于浏览器功能的东西，就像条件注释对IE来说只是“特殊的”…

657448 次浏览
小开

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

小开

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

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

我做了类似的事情，通过添加包含all common styles and then specific style sheets的default.css来覆盖或增强默认值。

小开

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

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

这个技巧只有在启用JavaScript并使用Mozilla绑定（XBL）时才有效，Mozilla绑定在Firefox和所有其他基于Gecko的产品中大量使用。相比之下，这就像IE中的行为CSS属性，但更强大。

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

  1. ff.html：文件样式
  2. ff.xml：包含Gecko绑定的文件
  3. 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元素上添加到“Firefox”类会更好。这是可能的，只需将上述JS替换为以下内容：

this.className += " firefox";

该解决方案的灵感来自于Dean Edwards的moz行为

小开
最佳答案

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

@-moz-document url-prefix() {
h1 {
color: red;
}
}
<h1>This should be red in FF</h1>

It's based on yet another Mozilla specific CSS extension. There's a whole list for these CSS extensions right here: Mozilla CSS Extensions.

小开

以下是如何处理三种不同的浏览器：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]-->
小开

以下是一些仅针对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) {}

如果您需要更多信息，请访问浏览器黑客

小开

使用引擎特定规则可确保有效的浏览器定位。

<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]-->
小开

更新中（来自@Antoine评论）

您可以使用@supports

@supports (-moz-appearance:none) {
h1 { color:red; }
}
<h1>This should be red in FF</h1>

More on @supports here

小开

以下代码倾向于抛出Style lint警告：

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

而是使用 

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

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

小开

现在Firefox Quantum 57对Gecko（统称为Stylo或Quantum CSS）进行了重大且可能具有突破性的改进，您可能会发现自己处于必须区分Firefox和Firefox Quantum的旧版本的情况下。

从我的答案这里：

您可以将@supports与calc(0s)表达式结合使用以测试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 */
}
}

…但是如果您需要支持更旧的版本，则需要利用级联效应，如上面的概念验证所示。

小开

css支持可以从JavaScript中使用。

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

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

小开

带有-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;
}
小开

如何将CSS应用于Firefox

下面的解决方案在更广泛的Firefox浏览器版本中为您提供了体面的仅限Firefox的CSS支持…

@supports (-moz-appearance:button) and (contain:paint) {


body {
background: red;
}


}

早在2006年，Mozilla/Firefox就支持-moz-appearance:button。但是@supports规则直到2019年才被支持，所以这将是最早支持该规则的Firefox浏览器。contain:paint将Safari浏览器排除在该规则之外。Internet Explorer和早期的Trient Edge浏览器不支持@supports，因此也被排除在CSS规则之外。没有已知的Chrome浏览器应该支持-moz-appearance:button，因此被排除在外。

与往常一样，我所有的CSS解决方案都是100%无JavaScript的：）


提交答案