前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >不要给<a>设置outline:none

不要给<a>设置outline:none

作者头像
欲休
发布2018-03-15 13:39:54
1.8K0
发布2018-03-15 13:39:54
举报
文章被收录于专栏:前端杂货铺前端杂货铺

outline属性有什么作用

    原文链接 a{outline:none} do not do it

    当用户使用tab键进行链接切换时,该属性会在当前选中的链接(获得焦点)使用该属性,一般来说是虚线框

的长方形。这对于没有使用鼠标输入的用户而言尤其有用,它可以作为视觉反馈来告知用户当前的输入。所以说

如果设置outline属性为none,则对这些人来说将会是很差的用户体验。

    给链接元素设置获得焦点属性是非常有必要的,对任何使用键盘来操作用户界面的模式,焦点指示器需可见。

为什么有些开发者喜欢删除该属性

    主要是由于涉及的虚荣心,或者是完全忘记了上述提到的这一点。

    开发者常用的css reset往往将outline属性删除,Eric Meyers的css reset也是如此。但是Eric也说了,开发者

需要额外定义焦点样式。

/* remember to define focus styles! */
:focus {
outline: 0;
}

    我们要记住注释的部分,一定要重新定义“焦点样式”。

如果要删除该属性,需要设置替换属性

    尽量不要删除outline属性,但是也有一些其他方法来设置键盘获取焦点链接样式:

  • 设置背景颜色。如:#test1 a:focus { background: #FFFF00; }
  • 设置字体样式。 如: #test2 a:focus { color: #FF6600; }
  • 设置outline属性。 如:#test3 a:focus { outline: #FF0000 dotted medium; }
  • 设置高亮属性。 如:#test4 a:focus { color: #FFFFFF; background: #FF0000; }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • outline属性有什么作用
  • 为什么有些开发者喜欢删除该属性
  • 如果要删除该属性,需要设置替换属性
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档