Css 什么决定了Chrome/Mac轮廓聚焦环样式的像素深度？
我有一点小毛病，我的团队中的一些成员对同一元素的焦点样式有不同的看法。他们在Mac上运行Chrome86。我正在运行Chrome79 当这个特定的元素被聚焦时，我看到了我习惯的基本聚焦环，在5px深度的蓝色发光 然而，我的同事们看到聚焦元素周围有一个非常窄的2px边界 该元素的代码为：Css 什么决定了Chrome/Mac轮廓聚焦环样式的像素深度？,css,google-chrome,focus,accessibility,user-agent,Css,Google Chrome,Focus,Accessibility,User Agent,我有一点小毛病，我的团队中的一些成员对同一元素的焦点样式有不同的看法。他们在Mac上运行Chrome86。我正在运行Chrome79 当这个特定的元素被聚焦时，我看到了我习惯的基本聚焦环，在5px深度的蓝色发光 然而，我的同事们看到聚焦元素周围有一个非常窄的2px边界 该元素的代码为： <button> <img ... /> </button> 是什么导致浏览器选择聚焦环的厚度 浏览器的内置样式表（“用户代理样式”）这可能会随着每次主要的浏览
<button>
<img ... />
</button>
溢出：隐藏.如果未在CSS中设置焦点轮廓，则实际上由浏览器设置决定
在windows和Mac上，您可以看到不同浏览器之间的行为差异。因此，我不会感到惊讶，这些设置正在从一个版本变为另一个版本。Chromium在今年早些时候以全新的外观进行了更新 你可以。这是（许多因素之一）可以解释不同的用户代理样式表 但是要知道，仅仅因为你看到了一件事，你的同事就看到了另一件事，这是唯一的选择 我的调焦环只有1px和黑色，因此您可以从中了解各种风格（Windows上的Chrome 86.0.4240.111） 可达性 问题中更重要的部分是您不想“干扰”浏览器默认样式的部分 我真的不想开始添加新的焦点样式，因为我更愿意遵守浏览器自己的设置，以防用户指定了适合他们的焦点样式 这在现实世界中根本不起作用。如果你的网站有蓝色背景怎么办？（是的，我知道浏览器在考虑这一点上变得越来越聪明，但在可访问性方面）。还有，如果你有一个复杂的小部件，它会改变颜色呢 风格聚焦，使其适合网站，您希望周围项目的对比度至少为3:1。对于非常复杂的站点，您可能需要根据背景位置使用不同的聚焦环颜色来保持此对比度 设计你的焦点戒指！ @戴提出了一个正确的观点，这一部分最初不是很清楚 当我说“设置聚焦环的样式”时，我的意思是使它们比浏览器默认设置更有用、更突出 考虑它们在页面上的位置（其周围环境），以确保足够的颜色对比度（如前所述，与周围环境的最小对比度为3:1），并确保它们清晰可见（出于某种原因，它们被称为可见焦点指示器） 正如@Dai所说的，不要把这当作一个机会来尝试和锻炼你的创造性肌肉，20px宽的品红聚焦环是不需要的（而且可能无法使用）。在整个站点中保持它们的简单性和一致性 最重要的是，请记住，焦点指示器用于辅助功能。 我倾向于主张使用2px的轮廓和2px的轮廓偏移量，以确保它是可见的，因为项目周围的少量空白使其更易于查看
按钮{
显示：内联flex；
宽度：100px；
高度：100px；
对齐项目：居中；
溢出：隐藏；
位置：相对位置；
右边距：8px；
边缘顶部：8px；
边界：0；
光标：指针；
}
img{
保证金：0自动；
宽度：自动；
高度：自动；
最小宽度：100%；
最小高度：100%；
位置：绝对位置；
右：50%；
最高：50%；
转换：翻译（50%，-50%）；
}
.更好：专注{
外形：2px实心#333；
轮廓偏移量：2px；
}无图像标准按钮
带文本的按钮
标准
更好的
：focus：focus visible*：focus visible{边框：20px插入品红色；}@关键帧