html - 浏览器中的默认焦点大纲是如何实现的？

Question

浏览器中的默认焦点大纲是如何实现的？

我说的是在当前具有焦点的元素周围显示的实线或虚线边框。

我以为它只是浏览器应用的CSS轮廓，例如

:focus {
    outline: black dotted 1px;
}

但我注意到，如果我尝试使用 CSS 自定义焦点轮廓，它的外观会发生变化，但在某些情况下行为也会发生变化。

请参阅我关于内部 div 链接的焦点大纲的问题，例如：

内部带有 div 的链接的自定义焦点大纲

（简而言之，如果你有复杂内容的链接并应用你自己的焦点大纲，事情会变得很奇怪）

显然，浏览器不仅仅将上面的简单 CSS 应用于焦点轮廓。他们必须做更多的事情来使默认值的工作与它一样好，无论它应用于哪个元素。

有谁知道它是如何工作的？

我可以做些什么来使我的自定义焦点轮廓的行为与默认焦点轮廓相同吗？

标签： htmlcssbrowser

Answer 1

这个问题相当古老，但是在搜索我想尝试回答的大纲时，我遇到了好几次。

根据大纲 - CSS：层叠样式表 | 在MDN中，轮廓的声明分为三个部分：颜色、样式和宽度，默认值为：

.outline {
    outline: medium auto currentColor;
    outline: medium auto invert;
}

根据另一个 SO answer，WebKit 浏览器有自己的大纲样式，这使得我的整个答案：

.outline {
    outline: medium auto currentColor;
    outline: medium auto invert;
    outline: 5px auto -webkit-focus-ring-color;
}

笔记：

1. medium在我的 Safari 中呈现为 3px，这显然不是 5px。
2. 颜色-webkit-focus-ring-color呈现为rgb(0, 103, 244)。