pseudo-类 -moz-focus-inner 和 -moz-focusring 的区别

Question

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

虽然我经常在例子中看到属性 -moz-focus-inner，但它似乎对表单元素的格式化没有任何影响，不像-moz-focusring（至少在Firefox 66下是这样） / 赢）。

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

Answer 1

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

-moz-focus-inner 是一个活动层（它们对 focus-inner 的实现），它为焦点按钮添加边框，不是替换默认的焦点轮廓，而是在 addition 到它（以内部黑色虚线边框的形式）。这似乎是典型的不需要的行为，可以通过使用 normalize.css 或仅编写您自己的自定义规则来消除：

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

至于为什么 Mozilla 实施 -moz-focus-inner 的方式会惹恼很多开发人员？我想这要归功于它是一个有着悠久贡献和实验历史的项目。但是从开发的角度来看，主要区别在于您通常需要以某种方式 "deal" 和 -moz-focus-inner ，可能是通过自定义 CSS 规则消除它（除非您想要这个视觉焦点指示器的附加 FF 版本），而 -moz-focusring 代表一个非标准的伪造-class 正在由工作组讨论，它可能成为未来某个时间点的规范（选择器 4 或 5）。

来源

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

pseudo-类 -moz-focus-inner 和 -moz-focusring 的区别

Difference between pseudo-classes -moz-focus-inner and -moz-focusring

css

pseudo-class