文章标签

嗨，各位开发者！在这篇文章中，我将带大家使用语义化 HTML 和一个很棒的 CSS 伪类 :focus-within 创建一个简单的联系表单。:focus-within 类允许…

现在花两分钟时间在浏览器中访问您的当前项目。然后，只使用 Tab 键，您应该能够在交互式元素之间导航，包括按钮、链接和表单元素。

如果您有视力，您应该…

虽然大多数人在电脑上使用鼠标浏览网页，但许多人依赖键盘。理论上，使用键盘浏览网页不应该有问题——按下 TAB 键将键盘移动到…

/* Only show invalid ring while not focused */
input:not(:focus):not(:placeholder-shown):invalid {
  border-color: var(--color-invalid);
}
input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
  display: block;	
}

/* Only show valid ring while not focused and if a value is entered */
/* :empty won't work 

在本周的新闻中，Chrome 解决了焦点环，我们了解了如何获得“甜甜圈”范围，全局隐私控制获得了大牌支持，是时候在媒体查询中放弃像素了，以及一个防止烦人的表单验证样式的代码片段…

我最近开始与我的团队一起为客户开发一个渐进式 Web 应用程序 (PWA)。我们使用 React 以及通过 React Router 进行的客户端路由，我们制作的第一个元素之一就是主菜单。菜单…

想象一下，当您在网站上使用 Tab 键时，您的 :focus 样式动画从一个元素到另一个元素。就像焦点环向上飞跃到页面上的下一个元素。它的精神类似于平滑滚动：它…

许多辅助技术的形式使用键盘导航来理解和对屏幕内容采取行动。一种导航方式是通过 Tab 键。如果您使用它来…，您可能已经熟悉这种导航方式。

始终值得重复：所有交互式元素都应该具有焦点样式。这样，键盘用户就可以知道他们何时将焦点移动到该元素。

但如果您单独使用 :focus 来实现这一点，它会产生一个副作用，即…