css - @-moz-document url-prefix() 的继承者

Question

我尝试使用 @-moz-document url-prefix() 在 Firefox 中应用不同的样式，但它不再受支持。我现在该怎么做？

简单的例子:

HTML

.test {
  background-color: red;
}

@-moz-document url-prefix() {
  .test {
    background-color: blue;
  }
}

<div class="test">asd</div>

Answer 1

在 FF V61 发布 channel 和 V59 Beta/Dev 中它被删除了，异常(exception)是 url-prefix() 函数，所以你的代码应该可以工作，这里是一些信息和代码:

The @-moz-document rule is no longer available from Web content since it could be used by attackers for CSS injection to steal private data in the URL of third-party sites. Firefox users are still able to use this rule in the user stylesheet to personalize their browsing experience.

The at-rule support has already been removed from Nightly and early Beta/DevEdition as of Firefox 59, and removed from all the channels with Firefox 61.

An exception is the empty url-prefix function that has been used as a CSS hack targeting Firefox. It continues to be parsed on the Release channel to avoid breakages but will be removed in the near future once major compatibility issues are solved

Source

在当前的最新版本 (62.0.3) 中它仍然有效，正如您在这个 fiddle 中看到的那样

并使用您的代码段:

.test{
  background-color: red;
}

@-moz-document url-prefix()  {
  .test {
    background-color: blue;
  }
}

<div class="test">test</div>

---

但是，在不久的将来停止工作，您可以检查各种浏览器黑客here ，当你寻找 firefox 时，它们是 here ,

我会用这个 hack : @supports (-moz-appearance:meterbar) {}

使用您的代码段:

.test{
  background-color: red;
}

@supports (-moz-appearance:meterbar)  {
  .test {
    background-color: blue;
  }
}

<div class="test">test</div>