只为 Firefox 编写 CSS 规则

如果您想添加一些 CSS 规则来修复 Firefox 上的问题，那么这个技巧可能很有用。

有两种检测 Firefox 的方法：

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

/* 使用 `@support` */
@supports (-moz-appearance: none) {
  h1 {
    color: blue;
  }
}

上面的示例代码将为 Firefox 上的 ​​h1​​ 添加蓝色。

解释

任何以 CSS 开头的规则 ​​@-moz-​​ 都是 Gecko 引擎特定的规则，而不是标准规则。也就是说，它是 Mozilla 特定的扩展。

​​url-prefix​​​ 规则将包含的样式规则应用于 URL 以其开头的任何页面。不带 URL 参数使用时，​​@-moz-document url- prefix()​​ 它适用于所有页面。实际上，这是仅用于 Gecko（Mozilla Firefox）的 ​​CSS hack​​。所有其他浏览器将忽略样式。