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

问题描述 投票:0回答:1

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

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

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

css pseudo-class
1个回答
0
投票

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

-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. How to remove Firefox's dotted outline on BUTTONS as well as links?
© www.soinside.com 2019 - 2024. All rights reserved.