仅使用CSS定位Firefox

使用条件注释,可以使用特定于浏览器的CSS规则轻松定位Internet Explorer:

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

有时,行为不当的是Gecko引擎(Firefox)。什么是将CSS规则仅定位到Firefox而不是其他浏览器的最佳方式?也就是说,Internet Explorer不仅应该忽略仅Firefox的规则,而且WebKit和Opera也应该忽略它们。

注意:我正在寻找一种“干净”的解决方案。在我看来,使用JavaScript浏览器嗅探器向HTML添加“ firefox”类并不符合要求。我希望看到一些依赖于浏览器功能的内容,就像条件注释只是IE的“特殊”……

LEY猿2020/03/17 15:46:03

附带说明,CSS支持已绑定到javascript。

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

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Mozilla_Extensions

小宇宙Sam2020/03/17 15:46:03

以下代码倾向于引发样式棉绒警告:

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

代替使用

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

帮助了我!这里获得了样式棉绒警告的解决方案

老丝Stafan2020/03/17 15:46:03

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

AItachi2020/03/17 15:46:03

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

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

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

猴子Sam2020/03/17 15:46:03

首先,免责声明。我实际上并不主张我在下面提出的解决方案。我编写的唯一针对浏览器的CSS是针对IE(尤其是IE6)的,尽管我希望并非如此。

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

该技巧仅在启用JavaScript并使用Mozilla绑定(XBL时才有效,该绑定在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元素的“火狐”级。只需将上面的JS替换为以下内容,就有可能:

this.className += " firefox";

该解决方案的灵感来自Dean Edwards的莫兹行为

理查德十三Davaid2020/03/17 15:46:03

更新(来自@Antoine评论)

您可以使用 @supports

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

这里更多@supports

TonyEvaL2020/03/17 15:46:03

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

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

它基于Mozilla的另一个CSS扩展。这里有这些CSS扩展的完整列表:Mozilla CSS扩展