CSS :focus-within的具体使用

互联网   发布时间:2017-09-18 15:06:55   作者:Airen   我要评论

这篇文章主要介绍了CSS :focus-within的具体使用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

CSS的世界真是一个神奇的世界。可能众多前端开发者听说过 :focus 并未听说过 :focus-within 。那么 :focus-within 是什么鬼。这篇文章,我们就说说 :focus-within 这个东东。

:focus-within是什么

在CSS中 :focus-within 是一个伪类,现在已经被列入到CSS选择器中(CSS Level 4 selector)。他就像你知道的 :focus 或者 :hover 。 :focus-within 能非常方便处理获取焦点状态。当元素本身或其后代元素获得焦点时, :focus-within 伪类的元素就会有效。

如果文字不好理解,咱们先来看一个简单的示例:

<div class="form-group">
    <label for="email">
        Your email:
    </label>
    <input type="email" name="email" id="email" placeholder="Enter your email address"/>
</div>

上面是一个简单的表单,有一个 input 表单控件。

.form-group *:focus {
    background: yellow;
    color: #000;
}
.form-group {
    padding: 10px;
    border: 3px solid transparent
}

.form-group:focus-within {
    border-color: #000;
}

上面的示例中, .form-group 得到焦点的时候, border-color 颜色换成了 #000 。但这不意味着接收键盘的焦点,那是因为 <div> 不一定能得到键盘的焦点,没有设置 tabindex 。或者说 div 中的链接或 input 元素接收焦点,那么 .form-group 元素将改变边框颜色。

看到上面的示例,是不是觉得好神奇。在以前要实现类似的效果,我们需要借助JavaScript的脚本。通过 .form-group 的后代元素的鼠标或键盘事件,然后给其父元素(或祖先元素,添加对应的样式)。

:focus-within的使用场景

:focus-within 非常强大,主要是由于伪类在它的任何元素获取到焦点时都将被激活。当元素包含许多子组件的元素上谨慎使用该伪类。

有了 :focus-within 之后,有一些常见的交互行为就变得非常的简单,特别是以前需要JavaScript的键盘事件的交互行为,我们都可以使用 :focus-within 来替代。

接下来,咱们来看一些 :focus-within 的常见示例。

表格行的高亮

一个常见的例子,就是表格行高亮的行为,即鼠标悬浮在表格的行时,颜色变得高亮。这样的交互样式可以帮助有视力阻碍的用户能更好的阅读一个复杂的表格或长表格。因为突出的显示,可以使用这些用户更容易地跟踪他们当前正在阅读的表格行。以前常常实现的方式是通过 :hover 来改变表格行的样式,这种方案对于正常的用户而言是一件易事,但如果你的用户对于一些操作鼠标有阻碍的用户而言,那 :hover 就有点蛋疼了。如果你是追求完美的话,你可能会通过JavaScript的键盘事件给表格行添加样式。

那么有了 :focus-within 之后,我们就可以和JavaScript说拜拜。我们可以这样来设置样式:

上面的示例展示了如何使用 :focus-within 来突出表格的整个行。如果在特定的表格行中有一个可获取焦点的可用元素,这里所指的是通过键盘获取焦点。比如上面这个示例,表格中有 <a> 元素,你懂的, a 元素是可以通过键盘获取焦点的。

这个时候你只需要在样式中添加:

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

下拉菜单

下拉菜单是我们最常的Web组件之一。当我第一次看到 :focus-within 这个伪类时,我想到的第一个使用场景就是下拉菜单。

上面的示例中,JavaScript是用来跟踪用户键盘焦点在一个导航下拉菜单中的。如果JavaScript检测到键盘焦点在一个链接上,那么给 .nav__list_drop 添加一个 .has-focus 类。当 li 有了 .has-focus 类时,他的子元素就会显示出来,也就是下拉菜单会显示出来。

这样的效果,我们可以直接通过 :focus-within 来取代JavaScript脚本的功能。使用 .nav__list__drop:focus-within 替代 .nav__list__drop.has-focus 。当你操作键盘,让下拉菜单项获得焦点时,就会显示下拉菜单。

.nav__list a:focus + .nav__list__drop,
.has-drop:hover .nav__list__drop,
.nav__list__drop:focus-within {
    opacity: 1;
    transform: translateY(0px);
    height: auto;
    z-index: 1;
}

Off-screen Nav

Off-screen Nav是在移动端上常见的一个效果。那么这个效果我们也可以通过 :focus-within 来实现。详细代码可以看下面这个示例:

浏览器兼容性

:focus-within 虽然很有意思,但很多同学担心它的兼容性。通过Caniuse,我们可以看到浏览器对其支持度情况:

总结

如果你熟悉 :focus 并不奇怪,但是你知道 :focus-within 的话,说明你在不断的关注CSS相关的新特性。当然这个属性再次刷新了CSS的世界真是奇怪。如果你感兴趣的话,不仿自己写写Demo。你会喜欢上这个属性的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • css多行文本溢出时出现省略号的示例

    这篇文章主要介绍了css多行文本溢出时出现省略号的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-13
  • 使用css transition属性实现一个带动画显隐的微信小程序部件

    这篇文章主要介绍了使用css transition属性实现一个带动画显隐的微信小程序部件的相关资料,需要的朋友可以参考下
    2018-06-13
  • 分享20条编写 CSS 代码的建议

    本文是脚本之家小编给大家分享的20条书写CSS代码的建议,感兴趣的朋友一起看看吧
    2018-06-08
  • 分享CSS书写规范、顺序【推荐大家使用】

    本文是脚本之家小编收藏整理推荐给大家使用的css书写规范和顺序,感兴趣的朋友一起看看吧
    2018-06-07
  • 浅谈CSS中的百分比

    这篇文章主要介绍了浅谈CSS中的百分比,在定义CSS样式的时候经常会用的 “%”这个长度单位,但是这个百分比到底是相对于谁的百分比呢
    2018-06-07
  • 浅谈CSS层叠机制

    这篇文章主要介绍了浅谈CSS层叠机制的相关资料,层叠机制可以解决作者(写代码的人),用户(浏览页面的人)和用户代理(一般指浏览器)的样式冲突,小编觉得挺不错的,现在
    2018-06-07
  • 详解css display:box 新属性

    这篇文章主要介绍了css display:box 新属性的相关资料,需要的朋友可以参考下
    2018-06-05
  • 浅谈CSS浮动的特性

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。这篇文章主要介绍了浅谈CSS浮动的特性,小编觉得挺不错的,现在分享给大家,也给大家做
    2018-06-05
  • 前端应该掌握的CSS实现多列等高布局技巧

    我们在写页面的时候,有的时候会遇到多栏布局,这篇文章主要介绍了前端应该掌握的CSS实现多列等高布局技巧,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟
    2018-06-05
  • 使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果

    有时侯页面很长,需要指示箭头告诉用户下面还有东西。下面脚本之家小编给大家带来了使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果,感兴趣的朋友一起看看吧
    2018-06-04

最新评论