6

在下面的演示中，在锚标记上单击并按住 mousedown，然后将光标拖开，同时按住 mousedown，最后松开单击。您将在锚标记周围看到一个红色虚线轮廓。现在，如果您按 shift 键，轮廓将偏移几个像素。

a:focus {
  outline: 1px dotted red;
}
<a href="#">Click+hold, then release, then press shift key</a>

该行为不会在按下ctrl或fn键等时发生，但对于大多数键都会发生。这种行为似乎是跨浏览器兼容的，这让我思考：

  • 它是浏览器实现 html 的错误吗？
  • 或者，这是 w3.org 针对某些用户体验问题建议的预期行为吗？
4

2 回答 2

3

通过单击一个元素然后按Shift，如您所说，或者在通过启发式确定的其他一些情况下，您同时触发:focus和:focus-visible状态。然后，浏览器将为这些状态应用其默认样式。

由于其默认的用户代理样式表，您报告的结果可以在 Chrome 中重现，但不能在 Firefox 中重现。您可以通过打开 DevTools 并强制a元素的状态来自行测试。

以下示例重现了 Blink（Chrome 的渲染引擎）默认样式，因此可以在其他浏览器中看到：

a:focus {
  outline: 1px dotted red;
}

a:any-link:focus-visible {
  outline-offset: 1px;
}

/* for non-Blink WebKit browsers */
a:-webkit-any-link:focus-visible {
  outline-offset: 1px;
}
<a href="#">Example link</a>

<!-- To see the result described in the question for sure, 
     please force :focus and :focus-visible states using DevTools -->

于 2021-09-09T16:01:20.823 回答
0

如果未定义轮廓偏移，默认情况下会为此设置动画。您可以在正式定义中的动画类型中看到在轮廓宽度上设置的动画。在动画类型上设置了一个有助于动画的功能。动画时，数据类型的值被内插为实数、浮点数。插值发生在计算值上。插值的速度由与动画相关的计时函数决定，导致轮廓偏移从 0px 增加到 1px。

参考： https: //developer.mozilla.org/en-US/docs/Web/CSS/easing-function https://developer.mozilla.org/en-US/docs/Web/CSS/length#interpolation https： //www.w3.org/wiki/CSS/Properties/outline-width。

您可以在这些链接上彻底检查和验证这些内容。

于 2021-08-25T07:35:26.227 回答