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



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

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

有人可以向我解释这两个属性之间的区别是什么,以及我是否需要 -moz-focus-inner?

>-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 规则消除它(除非您想要此视觉焦点指示器的附加 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. 如何删除火狐在按钮和链接上的虚线轮廓?

最新更新