在限制@ -moz-document之后，现在拥有特定于Firefox的CSS规则的最佳方法是什么

Question

@-moz-document在CSS中以Firefox为目标是非常有用的黑客。例如，

@-moz-document url-prefix() {
    /* Firefox-specific rules */
}

但是，由于https://bugzilla.mozilla.org/show_bug.cgi?id=1035091已得到修复，因此旧的hack在Firefox Developer Edition中不再起作用，我相信此补丁很快就会在稳定版本中发布。所以

Answer 1

您可以使用@supports 功能查询来测试某些特定的供应商前缀-moz-值，例如

Codepen示范

<p class="moz">Is it Mozilla?</p>

的CSS

.moz::after { content: " nope."}

@supports (display: -moz-grid) {
   .moz::after { content: " yep!"}
}

请注意，该方法将一直有效，直到-moz-grid将来不再从供应商处删除该特定值（例如）为止，并且也可以用于检测其他供应商值（例如display: -webkit-box或display: -ms-flexbox）

如上所述，这不再是一种可靠的方法，只是测试了 Codepen 链接（Firefox 66.0.2（64 位）） - 它显示“nope”，所以替代解决方案是使用这个：`@supports (- moz-appearance:none)` 而不是 `@supports (display: -moz-grid)`。 (2认同)