使用CSS自定义属性标准化焦点样式

快速测试一下你的项目：打开浏览器，仅使用Tab键，尝试在按钮、链接和表单元素等交互元素间导航。

如果你是视力正常的用户，你应该能够看到焦点在DOM元素间跳转时的视觉变化。但如果没有视觉变化，或者变化微乎其微，那么你就能找到一个能为你的访客带来巨大改变的方法。

本文将介绍一种使用CSS自定义属性来更有效地管理项目焦点样式的技术，并学习现代CSS焦点选择器。首先，让我们了解为什么可见焦点样式如此重要。

满足WCAG焦点样式标准

可见焦点状态符合《Web内容无障碍指南》(WCAG) 成功标准2.4.7 – 焦点可见。2.4.7的《理解》文档中说明了该标准的意图：

此成功标准的目的是帮助用户了解哪个元素具有键盘焦点。必须能够让用户知道多个元素中哪个元素具有键盘焦点。

在即将发布的WCAG 2.2中，将添加一个新的标准来阐明“焦点指示器应有多明显”。虽然目前仍在草案阶段，但熟悉并应用2.4.11 – 焦点外观（最低限度）中的指南无疑是您今天可以采取的改进焦点样式的积极步骤。

使用CSS自定义属性管理焦点样式

今年我开始使用的一种技术是在我的级联样式表中，在主要的交互式基本元素上尽早包含以下设置：

<code>:is(a, button, input, textarea, summary) {
  --outline-size: max(2px, 0.08em);
  --outline-style: solid;
  --outline-color: currentColor;
}

:is(a, button, input, textarea, summary):focus {
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-offset, var(--outline-size));
}</code>

这附加了自定义属性，允许您根据需要灵活地自定义轮廓样式的某些部分，以确保在元素上下文发生变化时焦点仍然可见。

对于--outline-size，我们使用max()来确保至少为2px的值，同时允许根据组件（例如，标题内的大按钮或链接）基于0.08em进行缩放。

这里你可能不熟悉的属性是outline-offset，它定义了元素和轮廓之间的空间。你甚至可以提供一个负数来内嵌轮廓，这对于确保焦点样式的对比度非常有用。在我们的规则集中，我们设置该属性以接受可选的自定义属性--outline-offset，以便在需要时可以自定义它，否则它将回退以匹配--outline-size。

轮廓外观改进

在我的职业生涯中，我曾被要求移除轮廓，也曾自己移除过轮廓，因为它们被认为是“难看的”。

现在有两个原因说明绝对不应该移除轮廓（除了无障碍影响）：

1. 在Chromium和Firefox中，outline现在遵循border-radius！? 这意味着您可以考虑删除您可能使用过的任何hack，例如使用box-shadow来模拟它（这对无障碍也有积极影响，因为它可以确保不会为Windows高对比度主题用户删除焦点样式）。
2. 使用:focus-visible，我们可以要求浏览器使用启发式方法，仅在检测到需要可见焦点的输入模式时才显示焦点样式。简而言之，这意味着鼠标用户在点击时不会看到它们，而键盘用户在Tab键操作时仍然会看到它们。

需要注意的是，表单元素始终显示焦点样式——它们不受:focus-visible行为的限制。

因此，让我们增强我们的规则集，添加以下内容以包含:focus-visible。我们将保留我们已经为旧浏览器定义的初始:focus样式，以防万一不会丢失。

<code>:is(a, button, input, textarea, summary):focus-visible {
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-offset, var(--outline-size));
}</code>

由于浏览器处理它们不理解的选择器的方式，我们需要将这些规则分开，即使它们定义相同的轮廓属性，也不能将它们组合在一起。

最后，我们还需要这种看起来很奇怪的:focus:not(:focus-visible)规则，它会为支持:focus-visible的浏览器移除常规焦点样式：

<code>:is(a, button, input, textarea, summary):focus:not(:focus-visible) {
  outline: none;
}</code>

值得注意的是，最新版本的Chromium和Firefox已切换到使用:focus-visible作为在交互式元素上应用焦点样式的默认方式，并且最近在webkit中已启用为默认方式，因此它应该很快就会出现在Safari稳定版中！我们的规则仍然有效，因为我们正在自定义轮廓外观。

有关可见焦点样式的更多指导，我推荐Sara Soueidan关于焦点指示器的精彩而全面的指南，因为它考虑了即将推出的2.4.11标准。

焦点样式演示

此示例演示了这些交互式元素中的每一个以及如何使用自定义属性应用自定义设置，包括一些针对深色模式的更改。根据您的浏览器支持情况，除非您使用Tab键，否则您可能不会看到焦点样式，因为使用了:focus-visible。

最后一点：就焦点样式而言，button是一个独特的交互式元素，因为它在其状态之间有额外的考虑因素，特别是如果您只依赖颜色。如需帮助，请尝试使用我的项目ButtonBuddy.dev中的调色板生成器。

以上是使用CSS自定义属性标准化焦点样式的详细内容。更多信息请关注PHP中文网其他相关文章！