不要给<a>设置outline:none
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:;
}
我们要记住注释的部分,一定要重新定义“焦点样式”。
如果要删除该属性,需要设置替换属性
尽量不要删除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; }
不要给<a>设置outline:none的更多相关文章
- Zend Studio 12.0.2正式版发布和破解方法,zend studio 12.0.1汉化,相式设置为Dreamweaver,空格缩进为4个, 代码默认不折叠的设置,Outline中使用的图形标志,代码颜色之eot设置。
背景:zend studio 12.0.2 修复了一个12.0.1的: Fixed problem with referenced variables marked as undefined,我都说 ...
- css去掉a标签点击后的虚线框,outline,this.blur()
css去掉a标签点击后的虚线框,outline,this.blur() outline是css3的一个属性,用的很少.声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outl ...
- outline的兼容性及使用限制
outline 和 border的区别: outline不占据文档空间,border占据文档空间. outline无法单独设置上下左右,只要设置outline,必须所有的边都设置:border可以设置 ...
- Android Studio 一些方便使用的设置
相信非常多使用Eclipse的朋友,開始用Android Studio都是认为不是特别方便, a:比方怎样使鼠标放到方法上面,就有提示用法; b:怎样设置字体大小,和背景色; c:还有怎么查看Outl ...
- 一次 outline 去除经验(非继承属性,看着像继承)
情况描述: 目前维护的老项目是通过 easyui 生成的 html,嵌套结构非常多,当点击元素后,会有个边框???非常影响页面美观,这是啥迷惑点击交互??? 经验告诉我,这是 css 的 outlin ...
- 1366分辨率其实是1368分辨率,firefox a标签点击有虚线
1,通过intel 集成显卡的软件自定义一个1366分辨率,发现是1368的分辨率,@media screen and (max-deivce-width:1368px)才有效果,并且在同事电脑默认分 ...
- javascript面向对象系列第四篇——选项卡的实现
前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...
- css div要点汇总
1.子元素选择两种 h1 strong{color:red}意思是所有后代只要是strong就变成红色 h1>strong{color:red}效果同上但只对第一代后代元素有效 相邻兄弟元素 h ...
- 14.allegro.PCB设计前工作[原创]
一.设置板子大小 -- ----- 板子边框 2种设置outline方法,创建2个KI,两个keepin,,r:允许布线区:p允许摆放元件的区域 法一:直接添加线 ①Board Geometry(最外 ...
随机推荐
- [转]Android ListView 与 RecyclerView 对比浅析—缓存机制
从源码角度剖析ListView 与 RecyclerView 缓存机制的不同 https://zhuanlan.zhihu.com/p/23339185 原文地址:http://dev.qq.com/ ...
- 浏览器兼容性-JS篇
总结一下平时遇到的浏览器兼容性问题,本篇关于JS. 1.事件绑定 兼容写法: function add(obj,event){ if (obj.addEventListener) { obj.addE ...
- 【hihoCoder】1121:二分图一·二分图判定
题目 http://hihocoder.com/problemset/problem/1121 无向图上有N个点,两两之间可以有连线,共有M条连线. 如果对所有点进行涂色(白/黑),判定是否存 ...
- Google Authentication的实现 - Odoo 安全登录
在前边的一篇文章中,我们提到了利用二次验证增强Odoo登录的可靠性:http://www.cnblogs.com/kfx2007/p/6023991.html 今天我们来具体实现这一步: 后端的实现 ...
- 代码编辑器Sublime Text 3 免费使用方法与简体中文汉化包下载
Sublime Text这款代码编辑器是Jeff 一直都在使用的,前段时间转用到版本3,因为感觉Sublime Text 3 启动速度更加快,运行更加流畅——虽然3 还是在Beta 阶段.下面就直接分 ...
- mongoose 和 mongoDB
第三方学习地址:http://blog.csdn.net/foruok/article/details/47746057 下载mongoDB https://www.mongodb.com/downl ...
- StartSSL免费SSL证书申请和账户注册完整过程
StartSSL算是比较早提供免费SSL证书的第三方提供商,我们可以免费申请且免费续期使用到有需要HTTPS网址的用户.关于网站使用SSL证书主要还是因为谷歌在向导说明中提到如果一个网站使用到SSL证 ...
- svg格式的中国地图轮廓图
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C ...
- 同一个页面多个page之间的切换
今天接触了JQ Mobile以下是本小白的理解(不怕大家笑话): 创建移动 web 应用程序的框架:适用于所有流行的智能手机和平板电脑: 将“写得更少.做得更多”这一理念提升到了新的层次:它会自动为网 ...
- NodeJS入门(四)—— path对象
很快Node就会迎来4.0的时代,届时将并入现有的iojs,所以先前写过的iojs入门系列直接更名为NodeJS入门. 本篇开始将逐个介绍Node的各主要模块,依循API文档走一遍,但会给出比API文 ...