伪类-moz-focus-inner和-moz-focusring之间的区别

时间:2019-04-10 10:44:49

标签: css pseudo-class

在我看来,伪类-moz-focus-inner和-moz-focusring具有相同的任务。

尽管我经常在示例中看到属性-moz-focus-inner,但它似乎对表单元素的格式没有任何影响,与-moz-focusring不同(至少在Firefox 66 / Win下)。

有人可以告诉我这两个属性之间的区别是什么以及是否以及何时需要-moz-focus-inner?

1 个答案:

答案 0 :(得分:0)

-moz-focusring是仅用于Mozilla的非标准伪类扩展,不应在生产中使用,因为它不在标准轨道上。 Mozilla建议一些开发人员使用它来区分用户是通过鼠标单击还是通过键盘制表聚焦。 focusring尚未在任何规范中定义。仅当元素已经具有焦点并且开发人员确定应在其周围绘制聚焦环时,它才匹配。

-moz-focus-inner是一个活动层(其focus-inner的实现),在聚焦按钮上添加边框,而不是替换默认聚焦轮廓,而是在其添加中添加边框(以内部虚线黑色边框的形式)。这似乎是通常不受欢迎的行为,例如可以通过使用normalize.css或仅编写自己的自定义规则来消除:

button::-moz-focus-inner {
  border: 0;
}

关于Mozilla为什么以惹恼许多开发人员的方式实施-moz-focus-inner?我想这要归功于它是一个有着悠久的贡献和实验历史的项目。但是,从开发的角度来看,主要区别在于,您通常需要以某种方式与-moz-focus-inner进行“交易”,可能是通过自定义CSS规则将其消除(除非您 want 此视觉焦点指示器的其他FF版本),而-moz-focusring代表工作组正在讨论的非标准伪类,该伪类将来可能成为规范的一部分(选择器4或5)。

来源

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring
  2. https://github.com/necolas/normalize.css/issues/393
  3. How to remove Firefox's dotted outline on BUTTONS as well as links?