CSS :focus-within 的作用和用法


:focus-within 是一个新的CSS伪类( pseudo-class),它跟 :focus:hover 很相似。这个伪类的作用在使用了 :focus-within 的元素成为焦点或它的子元素成为焦点时显现。

先看看下面的代码演示,请使用tab键切换下面例子中的焦点元素:

上面的例子中,.my-element 元素是一个div, 它本身是不会成为焦点的,除非给它设置tabindex属性。但当它内部的链接或那个input元素成为焦点时,你会看到div元素会出现一个3px的边线。

Focus-within 用法例子

:focus-within 是一个非常有用的伪类,你不能随便的往某个元素添加这个样式,因为任意一个子元素变成焦点都会激活这个伪类的样式,:focus-within 应该被单独的用,而不是用在一个拥有很多可焦点化子元素的元素里。

很多常见的UX交互设计能从:focus-within中获益,特别是之前需要使用JavaScript实现的功能,现在可以使用:focus-within替换。

1、高亮表格行

一个常见的例子:表格行当光标悬停时改变背景色,这可以帮助用户更好的观察复杂的表格,针对鼠标用户这很容易实现,但如果用户单纯使用键盘,不用JavaScript就很难实现,但现在不同了:

上面的例子中我们用 :focus-within pseudo-class 实现了高亮表格行的效果,它不能是鼠标悬停时能高亮,当你使用tab键切换焦点是也能高亮。这种实现要求在行里至少存在一个可以成为焦点的元素。

上面的例子里最关键的代码是下面这段:

tbody tr:focus-within,
tbody tr:hover {
  background: rgba(lightBlue, .4);
}

2、下拉菜单的实现

当学习 :focus-within 的用法时,我首先想到的使用场景是下拉菜单,不用JavaScript,使用:focus-within 来实现。

注意:
上面的这个例子并没有实现自适应布局,也没有对触屏设备进行优化,如果想在触屏设备上使用,估计还是需要JavaScript的配合。但请记住,JavaScript并不会损害使用友好性,但错误的JavaScript运用会!

阅读余下内容
 

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号