在CodePen中打开
焦点样式对于你的应用程序的可访问性是非常重要的。但是，在不断变化的环境中管理它们可能很困难。
下面的解决方案利用自定义属性和:is() ，为互动元素设置合理的默认值。然后，单个实例可以通过为自定义属性提供一个替代值来覆盖每个设置。
这个解决方案将currentColor 作为outline-color ，这在很多情况下都适用。一个可能不适用的情况是按钮，在这种情况下，你可以更新--outline-color ，以使用与按钮背景相同的颜色，比如说。
此外，这还展示了一个新的可用的CSS伪类选择器。focus-visible 。这个选择器的目的是只在浏览器检测到焦点样式应该是可见的时候才显示它们（你可能会遇到 "启发式 "这个术语）。目前，我们已经设置了一些回退，以便在浏览器还不支持:focus-visible 的情况下，也能显示焦点样式。
注意：由于使用了:focus-visible ，你可能看不到链接和按钮上的焦点样式，除非你用标签打开它们。
请确保你的焦点样式有适当的对比度!如果你在做按钮，用ButtonBuddy生成一个可访问的调色板。
/* 对于 "真实世界 "的使用，你不需要对这些自定义属性进行范围控制 */ .smol-focus-styles :is(a, button, input, textarea) { /* 使用max()确保至少有一个2px的值，同时允许相对于组件的缩放的可能性 */ --outline-unit: max(2px, 0.08em); --outline-style: solid; --outline-color: currentColor; } /* 基准的:focus样式用于回退目的 */ .smol-focus-styles :is(a, button, input, textarea):focus { outline: var(-outline-unit) var(-outline-style) var(-outline-color); outline-offset: var(-outline-unit); } /* 当有了:focus-visible时，移除基本的:focus样式 */ .smol-focus-styles :is(a, button, input, textarea):focus:not(:focus-visible) { outline: none; } /* final :focus-visible styles */ .smol-focus-styles :is(a, button, input, textarea):focus-visible { outline: var(-outline-unit) var(-outline-style) var(-outline-color); outline-offset: var(-outline-unit); } /* demo of customizing */ 。smol-focus-styles li:nth-of-type(2) a { --outline-style: dashed; } .smol-focus-styles input { --outline-color: red; } .smol-focus-styles textarea { --outline-unit:0.25em; --outline-style: dotted; --outline-color: green; } .smol-focus-styles li:nth-of-type(4) button { font-size: 2.5rem; } "Smol焦点样式 "的CSS
/* For "real-world" usage, you do not need to scopethese custom properties */.smol-focus-styles :is(a, button, input, textarea) { /* Using max() ensures at least a value of 2px, while allowing the possibility of scaling relative to the component */ --outline-unit: max(2px, 0.08em); --outline-style: solid; --outline-color: currentColor;}/* Base :focus styles for fallback purposes */.smol-focus-styles :is(a, button, input, textarea):focus { outline: var(--outline-unit) var(--outline-style) var(--outline-color); outline-offset: var(--outline-unit);}/* Remove base :focus styles when :focus-visible is available */.smol-focus-styles :is(a, button, input, textarea):focus:not(:focus-visible) { outline: none;}/* Final :focus-visible styles */.smol-focus-styles :is(a, button, input, textarea):focus-visible { outline: var(--outline-unit) var(--outline-style) var(--outline-color); outline-offset: var(--outline-unit);}/* Demonstration of customizing */.smol-focus-styles li:nth-of-type(2) a { --outline-style: dashed;}.smol-focus-styles input { --outline-color: red;}.smol-focus-styles textarea { --outline-unit: 0.25em; --outline-style: dotted; --outline-color: green;}.smol-focus-styles li:nth-of-type(4) button { font-size: 2.5rem;}
- 一个链接
- 自定义为虚线风格的链接
- 一个按钮
- 一个大按钮
- 自定义的轮廓颜色
- 完全自定义
在我的Smashing文章《新支持的CSS伪类选择器》中了解更多关于:focus-visible 。你还可以在ModernCSS上找到更多关于CSS如何影响可及性的提示。
