各位观众，各位朋友，大家好！我是今天的主讲人，江湖人称“代码老中医”，专治各种疑难杂症，尤其是前端方面的。今天咱们聊聊CSS里两个挺有意思的家伙：focus-visible和focus-within，以及它们如何拯救我们可怜的keyboard-only导航体验。 开场白：键盘侠的呐喊 先问大家一个问题：你们有多少人是键盘党？注意，我说的是纯键盘操作，鼠标能不用就不用的那种。如果你是，那么恭喜你，你一定经历过这样的痛： 焦点乱飞：Tab键按得飞起，但根本不知道现在焦点在哪儿！ 样式丑陋：默认的focus样式丑的一批，还跟页面风格格格不入！ 误判敌友：鼠标点一下也触发focus样式，影响美观，用户体验极差！ 这些问题，直接导致了键盘侠们寸步难行，严重影响了用户体验。别急，今天咱们就来拯救他们，啊不，是拯救我们的网站！ 第一节课：focus的那些事儿 在深入focus-visible和focus-within之前，我们得先搞清楚focus是个什么东西。简单来说，focus就是“焦点”。当一个元素获得焦点时，就意味着用户可以通过键盘与它进行交互（比如输入文字、点击按钮等等）。 HTML元素默认 …
继续阅读“CSS `focus-visible` / `focus-within` 与 `keyboard-only` 导航体验优化”