CSS:focus-visible伪类真的太6了!
一、快速了解CSS :focus-visible伪类
:focus-visible
伪类是非常年轻的一个伪类,目前仅Chrome浏览器标准支持,但足够了。如果你是一个深入用户体验的开发者,这个伪类会非常有用。
:focus-visible
伪类应用的场景是:元素聚焦,同时聚焦轮廓浏览器认为应该显示。
是不是很拗口?规范就是这么定义的。:focus-visible
的规范并没有强行约束匹配逻辑,而是交给了UA(也就是浏览器)。我们通过真实的案例来解释下这个伪类是做什么用的。
在所有现代浏览器下,链接元素<a>
鼠标点击的时候是不会有焦点轮廓的,但是键盘访问的时候会出现,这是非常符合预期的体验。
但是在Chrome浏览器下,出现了一些特殊场景并不是这么表现的:
- 设置了背景的
<button>
按钮; - HTML5
<summary>
元素; - 设置了HTML
tabindex
属性的元素;
以上3个场景,在Chrome浏览器下鼠标点击的时候也会出现显眼的焦点轮廓,如下图:
这其实是我们不希望看到的,轮廓在点击的时候不应该出现(没有高亮的必要),但是键盘访问的时候需要出现(让用户知道当前聚焦元素),Firefox以及IE浏览器的表现均符合我们的期望,点击访问无轮廓,键盘访问才有,Safari浏览器按钮表现符合期望。
但是,我们又不能简简单单设置outline:none
来处理,因为这样会把键盘访问时候应当出现的焦点轮廓给隐藏掉,带来严重的无障碍访问问题。
为了兼顾视觉体验和键盘无障碍访问,我之前的做法是使用JavaScript进行判断,如果元素的:focus
触发是键盘访问触发,就给元素添加自定义的outline
轮廓,否则,去除outline
,还是颇有成本的。
现在有了:focus-visible
伪类,所有的问题迎刃而解,在目前版本的Chrome浏览器下,浏览器认为键盘访问触发的元素聚焦才是:focus-visible
所表示的聚焦。换句话说,:focus-visible
可以让我们知道元素的聚焦行为到底是鼠标触发还是键盘触发。所以,如果我们希望去除鼠标点击时候的outline
轮廓,而保留键盘访问时候的outline
轮廓,只要一条短短的CSS规则就可以了:
:focus:not(:focus-visible) {outline: 0;
}
Chrome浏览器下让人头疼的轮廓问题就解决了,眼见为实,您可以狠狠地点击这里::focus-visible与Chrome浏览器outline轮廓控制demo
此时,我们点击设置了tabindex
属性的<div>
元素没有轮廓,如下图:
但是,如果我们使用键盘访问,例如按下TAB键进行索引,轮廓依然存在,如如下图:
完美,感动!
二、应该很快就会默认支持
目前Chrome浏览器(版本67+就支持)虽然支持,但是,需要浏览器开启支持web实验特性才行:
但是我相信,很快就会默认放开,都时候,之前写UI组件时候折腾的一大堆体验相关的JavaScript代码就可以全部删掉了。
如果你迫不及待想在项目中应用这么好的特性,可以引入这段polyfill脚本。
CSS:focus-visible伪类真的太6了!相关推荐
- html 鼠标focus 背景,强大的CSS:focus-visible伪类真的太6了!
一.快速了解CSS :focus-visible伪类 :focus-visible伪类是非常年轻的一个伪类,目前仅Chrome浏览器标准支持,但足够了.如果你是一个深入用户体验的开发者,这个伪类会非常 ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类
小程序中的WXSS(css)选择器课程-伪类-:focus 伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/hua ...
- css 外弧_css 伪类实现弧形
在实现页面五花八门的有特色的ui时,我们有时会遇到要用实现一个弧形,而这样的弧形要怎么实现呢?用图片?不太优雅,这样就要无故多加载一张图片了,这里来说说怎么用css的after伪类来实现弧形. 总思路 ...
- CSS中的伪类和伪元素(详细)
这篇想要跟大家分享的是css中的伪类和伪元素,有任何问题可以私聊我或者评论哦! 首先,我们先来想一下 一.引入伪类跟伪元素的原因? 伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述 比如CSS ...
- 【第四篇】CSS选择器之伪类选择器
利用组合选择器虽然可以选择子类和兄弟元素,但是无法做到特殊的选择.例如无法选择第几个子类,或者和其同标签的兄弟元素.为此CSS诞生了伪类选择器,用来进行更加灵活的元素选择. 伪类选择器 伪类选择器根据 ...
- CSS 选择器大全 伪类选择器大全
CSS+CSS3 选择器 类选择器: .name{} ID选择器: #id{} 元素选择器: div{} 通配符选择器: *{} 后代选择器: div p{} 子选择器: div>p{} 和后代 ...
- CSS :before :after 伪类选择器
CSS :before :after 伪类选择器 所有主流浏览器都支持 :after 选择器. 注释:对于 IE8 及更早版本中的 :after,必须声明 <!DOCTYPE>. :bef ...
- [css] CSS3新增伪类有哪些并简要描述
[css] CSS3新增伪类有哪些并简要描述 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
- [css] 举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同?
[css] 举例说明伪类:nth-child.:first-child与:first-of-type这三者有什么不同? <div> <p>大儿子</p> <d ...
最新文章
- Android固定宽度文字自适应大小
- postman根据请求内容生成对应的代码(Java、Go、C语言等)
- 周五跟大佬喝酒,顺便打了个球
- zabbix修改和查看登录密码
- 稀疏矩阵-sparse 存储和转换
- 如何下载和安装 iOS开发教程
- 【MATLAB生信分析】MATLAB生物信息分析工具箱(一)
- MySQL-Front设置中文
- 三种开源协议的选择:BSD,Apache,MIT
- 3、SPSS做非参数检验
- Java简易转码工具(一个字符串编码是GBK的文本文件,内容转成UTF-8编码)
- 2017今日头条校招前端面试题(一面)
- html5猜数字游戏代码,js猜数字小游戏的简单实现代码
- 网络与信息安全身份证认证技术分析
- 精诚软件EASsoft-MES生产执行系统太阳能光伏领域解决案例
- 2022国赛题vsftpd
- 保存tensor至本地文件
- XGBoost原理手推
- GBJ2510-ASEMI电机专用25A整流桥GBJ2510
- 《你的生命有什么可能》---- 读书笔记
热门文章
- 当前安全设置禁止运行该页中activeX控件,该页无法正常显示
- Idea上传项目到gitee
- lammps案例分析(1):石墨烯单轴拉伸之velocity方式
- 识别图中模糊的手写数字(菜鸟做法)
- C++编程求三角形角平分线与对边的交点坐标
- Spring Boot基于注解方式处理接口数据脱敏
- 【产品经理】手绘风格在网页设计中的运用
- 在UIToolbar上创建左箭头按钮(如UINavigationBar的“后退”样式)
- Java从网上读取docx文件到内存
- A Cuboid CNN Model with an Attention Mechanism for Skeleton-based Action Recognition---论文理解