仅使用 CSS 定位 Firefox

Question

提问by avdgaag

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:

使用条件注释可以很容易地使用特定于浏览器的 CSS 规则来定位 Internet Explorer：

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

Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser?That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.

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

Note:I'm looking for a 'clean' solution. Using a JavaScript browser sniffer to add a 'firefox' class to my HTML does not qualify as clean in my opinion. I would rather like to see something that depends on browser capabilities, much like conditional comments are only 'special' to IE…

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

Answer 1

回答by Ionu? G. Stan

OK, I've found it. This is probably the most clean and easy solution out there and does not rely on JavaScript being turned on.

好的，我找到了。这可能是目前最干净、最简单的解决方案，并且不依赖于 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.

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

Answer 2

回答by laaposto

Updated(from @Antoine comment)

更新（来自@Antoine 评论）

You can use @supports

您可以使用 @supports

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

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

回答by Waqas Ali Khan Puar

Here is how to tackle three different browsers: IE, FF and Chrome

以下是处理三种不同浏览器的方法：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]-->

Answer 4

回答by Hbirjand

Here is some browser hacks for targeting only the Firefox browser,

以下是一些仅针对 Firefox 浏览器的浏览器技巧，

Using selector hacks.

使用选择器技巧。

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

JavaScript Hacks

JavaScript 黑客

var isFF = !!window.sidebar;

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

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

Media Query Hacks

媒体查询技巧

This is gonna work on, Firefox 3.6 and Later

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

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

If you need more information,Please visit browserhacks

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

Answer 5

回答by Ionu? G. Stan

First of all, a disclaimer. I don't really advocate for the solution I present below. The only browser specific CSS I write is for IE (especially IE6), although I wish it wasn't the case.

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

Now, the solution. You asked it to be elegant so I don't know how elegant is it but it's sure going to target Gecko platforms only.

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

The trick is only working when JavaScript is enabled and makes use of Mozilla bindings (XBL), which are heavily used internally in Firefox and all other Gecko-based products. For a comparison, this is like the behavior CSS property in IE, but much more powerful.

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

Three files are involved in my solution:

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

ff.html: the file to style
ff.xml: the file containg the Gecko bindings
ff.css: Firefox specific styling

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

<?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

css文件

h1 {
 color: red;
}

Update:The above solution is not that good. It would be better if instead of appending a new LINK element it will add that"firefox" class on the BODY element. And it's possible, just by replacing the above JS with the following:

更新：上述解决方案并不是那么好。这将是更好，如果不是追加一个新的LINK元素，它将增加该body元素的“火狐”级。这是可能的，只需将上面的 JS 替换为以下内容：

this.className += " firefox";

The solution is inspired by Dean Edwards' moz-behaviors.

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

Answer 6

回答by Rayjax

Using -engine specific rules ensures effective browser targeting.

使用 -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]-->

Answer 7

回答by Kekoa

A variation on your idea is to have a server-side USER-AGENT detectorthat will figure out what style sheet to attach to the page. This way you can have a firefox.css, ie.css, opera.css, etc.

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

You can accomplish a similar thing in Javascript itself, although you may not regard it as clean.

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

I have done a similar thing by having a default.csswhich includes all common styles and then specific style sheetsare added to override, or enhance the defaults.

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

Answer 8

回答by BoltClock

Now that Firefox Quantum 57 is out with substantial — and potentially breaking — improvements to Gecko collectively known as Stylo or Quantum CSS, you may find yourself in a situation where you have to distinguish between legacy versions of Firefox and Firefox Quantum.

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

From my answer here:

从我这里的回答：

You can use @supportswith a calc(0s)expression in conjunction with @-moz-documentto test for Stylo — Gecko does not support time values in calc()expressions but Stylo does:
@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}
Here's a proof-of-concept:
body::before {
  content: 'Not Fx';
}

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

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}
Targeting legacy versions of Firefox is a little tricky — if you're only interested in versions that support @supports, which is Fx 22 and up, @supports not (animation: calc(0s))is all you need:
@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}
... but if you need to support even older versions, you'll need to make use of the cascade, as demonstrated in the proof-of-concept above.

您可以@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 */
  }
}
...但如果您需要支持更旧的版本，则需要使用级联，如上面的概念验证中所示。

Answer 9

回答by jvenema

The only way to do this is via various CSS hacks, which will make your page much more likely to fail on the next browser updates. If anything, it will be LESS safe than using a js-browser sniffer.

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

Answer 10

回答by NVRM

CSS supporthas binding to javascript, as a side note.

作为旁注，CSS 支持绑定到 javascript。

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

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

仅使用 CSS 定位 Firefox

提问by avdgaag

回答by Ionu? G. Stan

回答by laaposto

回答by Waqas Ali Khan Puar

回答by Hbirjand

Using selector hacks.

使用选择器技巧。

JavaScript Hacks

JavaScript 黑客

Media Query Hacks

媒体查询技巧

回答by Ionu? G. Stan

回答by Rayjax

回答by Kekoa

回答by BoltClock

回答by jvenema

回答by NVRM

相关推荐

最近更新

标签

仅使用 CSS 定位 Firefox

提问by avdgaag

回答by Ionu? G. Stan

回答by laaposto

回答by Waqas Ali Khan Puar

回答by Hbirjand

Using selector hacks.

使用选择器技巧。

JavaScript Hacks

JavaScript 黑客

Media Query Hacks

媒体查询技巧

回答by Ionu? G. Stan

回答by Rayjax

回答by Kekoa

回答by BoltClock

回答by jvenema

回答by NVRM

相关推荐

javafx 2 和 css 伪类：在 setStyle 方法中设置悬停属性

CSS 为什么我不能同时使用背景图像和颜色？

CSS 适用于 iPad 和桌面的媒体查询（最大宽度）

如何在 CSS 中使用“悬停”

相关推荐

最近更新

标签