文章标签

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

当我们发布了该网站的 v17 设计（我们现在是 v18）时，我在 CSS 中添加了html { scroll-behavior: smooth; }。 立刻，我就收到了 这样的评论（只是一个例子）

… 当你使用 Ctrl+F 或

跳过链接是一些帮助用户在页面中移动的小型内部导航链接。 你可能从未真正看到过它们，因为它们通常对用户隐藏，并用作可访问性增强功能，可以让使用键盘的用户和屏幕……

我非常喜欢 :focus-within。 它是一个非常有用的选择器，它使你能够在任何子元素获得焦点时，选择父元素。

假设你想要在 <div></div> 悬停时显示一些额外的内容…… ……

我最近阅读了 Keith Grant 撰写的 这篇文章，它介绍了新出现的 <dialog。 对这种新的 UI 元素感到兴奋，我立即坐下来进行实验，看看它如何能有效地用作模态……

假设我们有一个 <div></div>。

我们仅希望该 div 在悬停时可见，因此

div:hover { 
  opacity: 1; 
}

为了可访问性，我们还需要焦点样式，因此

div:hover,
div:focus { 
  opacity: 1; 
}

但是，div 的……

CSS 中的 :focus-within 伪选择器有点不寻常，尽管命名很好，并且相当直观。 如果该元素包含任何具有 :focus 的子元素，它将选择该元素。

form:focus-within {
  background: lightyellow;
}

其工作原理如下……

<!-- this form 

Ian Devlin 的好发现

当元素本身获得焦点或其任何后代获得焦点时，:focus-within 伪类将处于活动状态。

根据子元素选择父元素是期待已久的功能。 它的巅峰之作是……