如何在Firefox中通过CSS媒体查询模拟pointer:fine？

好问题！确实，Firefox曾经依赖非标准的-moz-touch-enabled属性来对应pointer:coarse的触摸设备场景，要模拟pointer:fine（精细指针，比如鼠标、触控笔）的话，我们可以通过以下几种方式实现：

• 利用-moz-touch-enabled的反向状态
  当-moz-touch-enabled: false时，说明当前设备不支持触摸输入，基本等同于pointer:fine的适用场景（毕竟非触摸设备的指针大多是精细型的）。你可以这样写CSS：

  /* 匹配旧版Firefox中的精细指针场景 */
  @media (-moz-touch-enabled: false) {
    .target-element {
      /* 自定义样式，比如hover效果、高精度交互样式 */
    }
  }
  

  注意：这是Firefox专属的非标准属性，其他浏览器不会识别，所以如果需要跨浏览器兼容，得搭配标准语法一起用。

• 标准语法+旧版Firefox降级
  从Firefox 64版本开始，已经原生支持标准的pointer媒体查询了，所以更推荐优先使用标准写法，再给旧版Firefox做降级兼容：

  /* 现代浏览器（包括新版Firefox）的标准写法 */
  @media (pointer: fine) {
    .target-element {
      /* 你的精细指针专属样式 */
    }
  }
  
  /* 针对不支持pointer查询的旧版Firefox */
  @media (-moz-touch-enabled: false) and (not (pointer: fine)) {
    .target-element {
      /* 复用上面的样式即可 */
    }
  }
  

  这种写法既符合Web标准，又能覆盖旧版本用户的需求。

• 辅助判断：-moz-hover-enabled属性
  另外还有个Firefox专属的-moz-hover-enabled属性，它判断设备是否支持原生hover交互——而支持精细指针的设备通常也支持hover。你可以把它和-moz-touch-enabled结合起来，进一步缩小匹配范围，但这个属性的使用场景相对有限，一般前面两种方案就足够覆盖大多数情况了。

内容的提问来源于stack exchange，提问作者Aleš Zrak