css - 什么决定了 Chrome/Mac 轮廓对焦环样式的像素深度？

Question

我有一个错误，我的团队中的一些成员在同一个元素上看到不同的焦点样式。他们在 Mac 上运行 Chrome 86。我正在运行 Chrome 79。

当这个特定元素被聚焦时，我看到了我习惯的基本聚焦环，5px 深度的蓝色光芒

然而，我的同事在焦点元素周围看到了一个非常窄的 2px 边框。

该元素的代码是：

<button>
    <img ... />
</button>

按钮内的图像已overflow:hidden应用，以提供中心裁剪的外观。

这是一个片段

button {
    display: inline-flex;
    width: 100px;
    height: 100px;
    align-items: center;
    overflow: hidden;
    position: relative;
    margin-right: 8px;
    margin-top: 8px;
    border: 0;
    cursor: pointer;
}

img {
  margin: 0 auto;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
}

<button>
  <img src="https://picsum.photos/id/1062/100/50">
</button>

我试图了解用户代理样式表设置更改的原因是什么，以及为什么会导致这种差异。

我看到的焦点风格：

outline: -webkit-focus-ring-color auto 5px;

我的同事看到：

outline: -webkit-focus-ring-color auto 2px;

但是，这在他们的浏览器上并不通用。他们在其他元素上看到 5px。

我真的不想开始添加新的焦点样式，因为我更愿意尊重浏览器自己的设置，以防用户指定了适合他们的焦点样式。

我的主要问题

1. 是什么原因导致浏览器选择对焦环的粗细？
2. 里面的图片可能overflow:hidden是这个错误的原因吗？
3. 为什么我在 Chrome 79 上看不到这个问题？

标签： cssgoogle-chromefocusaccessibilityuser-agent

Answer 1

Chromium 在今年早些时候进行了更新，外观焕然一新。

您可以在此处阅读有关设计更新的信息。这是可以解释不同用户代理样式表的（许多因素之一）。

但是请注意，仅仅因为您看到一件事，您的同事就会看到另一件事，这是唯一的选择。

我的对焦环只有 1px 和黑色，因此您可以了解样式的多样性（Windows 上的 Chrome 86.0.4240.111）。

可访问性

您问题中更重要的部分是您不想“干扰”浏览器默认样式的部分。

我真的不想开始添加新的焦点样式，因为我更愿意尊重浏览器自己的设置，以防用户指定了适合他们的焦点样式。

这在现实世界中是行不通的。如果您的网站有蓝色背景怎么办？（是的，我知道浏览器在考虑这一点方面变得越来越聪明，但在可访问性方面，我们需要一直支持到 IE8！）。另外，如果您有一个复杂的小部件会改变颜色怎么办？

风格焦点使其适合网站，您希望周围项目的对比度至少为 3:1。对于非常复杂的网站，您可能需要根据背景位置不同的对焦环颜色来保持此对比度。

设计你的对焦环！

@Dai 提出了一个有效的观点，即本节最初不是很清楚。

当我说“设置焦点环的样式”时，我的意思是让它们比浏览器默认设置更有用和更突出。

考虑它们在页面上的位置（周围环境）以确保足够的颜色对比度（如前所述，与周围环境的最小比例为 3:1）并确保它们清晰可见（出于某种原因，它们被称为可见焦点指示器）。

正如@Dai 所说，不要以此为契机来尝试展示你的创造力，不需要 20 像素宽的洋红色对焦环（并且可能无法访问）。使它们在整个站点中保持简单和一致。

最重要的是请记住，焦点指示器的存在是为了便于访问。

我倾向于提倡 2px 的轮廓和 2px 的轮廓偏移，以确保它是可见的，因为项目周围的一点空白使它更容易看到。

button {
    display: inline-flex;
    width: 100px;
    height: 100px;
    align-items: center;
    overflow: hidden;
    position: relative;
    margin-right: 8px;
    margin-top: 8px;
    border: 0;
    cursor: pointer;
}

img {
  margin: 0 auto;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
}

.better:focus{
  outline: 2px solid #333;
  outline-offset: 2px;
}

<h2>no image standard button</h2>

<button>
  button with text
</button>

<h2>standard</h2>

<button>
  <img src="https://picsum.photos/id/1062/100/50">
</button>

<h2>better</h2>
<button class="better">
  <img src="https://picsum.photos/id/1062/100/50">
</button>

哦，:focus-visible当它获得牵引力时会很棒，但目前它没有很好的支持，所以如果你使用它，请确保你填充它。