页面可用性之outline轮廓外框的一些研究

页面可用性之outline轮廓外框的一些研究

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=505

1、重要的前言
在IE以及Firefox浏览器下，默认状况下，点击连接文字或图片（特指a标签下的）。会留下一个轮廓框。曾经有一段时间，我称之为连接虚框。后来，改口了，由于我发现称之为连接虚框彷佛有些不许确，狭隘了点。

因为点击连接会产生轮廓框就在IE和Firefox浏览器下会出现，而这二者的变现刚好有都是虚框(dotted)，因此会直接用连接虚框的表述代替连接轮廓框。事实上，连接外框不等于连接虚框，例如，chrome浏览器下，连接获取焦点是的轮廓框是羽化的实线，呈暗淡的橙色，以下：

因此除非是特指点击事件，我会使用虚框一词，其他均用轮廓框或外框取而代之。

就我我的而言，对于连接点击后留下的轮廓框，我都是采起无视的态度，由于权衡来说，对连接轮廓框大动干戈麻烦大于好处。麻烦在于代码成本，兼容性以及可用性，好处在于必定程度上去除了讨厌的点击外框，对于追求完美的设计师或页面工程师而言，心理上舒服了。可是对于用户而言呢，考虑到从众与习惯性，用户对连接外框的讨厌远不及设计师或工程师，瞧，百度，腾讯，或是新浪它们对连接外框作了处理吗？没有。大部分的用户就是在这样的环境下过来的。

然而，在互联网上，页面老是千差万别，遇到的状况也是千秋各异，因此有时候也会遇到好处大于麻烦的状况，看下面这张图：

还有就是一些设计类网站，丑陋的点击虚框是完美主义的设计师们彻底没法容忍的，因此他们就会对这个连接虚框下手，铲除他们。他们可能会使用a{outline:none;}或a{outline:0;}（后者更消耗渲染多一点），想必浏览至此的您也知道这一点。然而，这个，或许你们习觉得常，认为“没什么啊”的一个样式实际上是页面可用性上一个大大的问题，a big problem!

绝大多数的用户都是经过鼠标点击打开一个连接的，因此设置a{outline:none;}去除点击时的虚框是没有问题的。然而，有一部分用户是键盘使用爱好者或是不得已键盘使用者，设置a{outline:none;}就会给他们带来麻烦。举个例子吧，我大学同寝室的涛哥，他不是什么键盘爱好者，可是他的鼠标老是时灵是不灵，换鼠标也不起做用，因此不少时间，都是使用键盘打开文件，浏览网页什么的。假设他在用Firefox3浏览器浏览个人新的首页系统，其平时浏览页面都是按TAB键在切换连接，回车打开的。谁知我这个“赖水宝”（方言，有傻逼之意）设置了a{outline:none;}，结果其狂按TAB键，页面上一点反应都没有，其迷茫了，脑中冒出诸如“这个页面怎么了”“我浏览器是否是出什么岔子了”之类的问题，而后不得已关掉了此页面。……

总结此例子，一句话，设置a{outline:none;}虽然能够去除点击时留下的外框，但同时也扼杀了键盘操做focus时留下的虚框，回事键盘使用者迷茫与网页中。这也是为何会写这篇文章的缘由所在，本文讨论的就是如何点击时能够有效地去除连接外框，键盘focus时又保留连接外框。因为本文主要讨论outline，因此IE6，IE7浏览器能够继续过元旦，放假休息。

您能够狠狠地点击这里：本文CSS与outline表现测试demo页面

2、demo使用的一些说明
demo效果的查看分两类，一类是点击；二类是键盘。

点击没有什么好说的，移上去，左键一点（因为基本上都是当前页面连接，故不松开），观察有无虚框；对于键盘查看效果，值得一提：首先IE浏览器，Firefox，chrome下，直接点击TAB键就能够查看focus焦点后的效果，Opera浏览器是个怪胎，按Tab键不顶用，要使用Shift+↓和Shift+↑进行切换查看（更多Opera下快捷键点这里）。对于Safari浏览器，若是是在OS X下，需经过System Preferences（系统偏好） > Keyboard and Mouse（键盘与鼠标） > Keyboard Shortcuts（快捷键）设置打开键盘的可用性（我没有苹果机子-穷啊(5555~~)，因此这里正确与否我未验证）。若是是在windows系统下，则经过编辑 > 偏好设置 > 高级，而后勾选“按住TAB键以高亮显示网页上的每一项”，步骤以下图所示：

demo中，文字连接为普通的文字连接，第一个图片连接背景为图片，文字text-indent负值定位到浏览器以外，第二个图片连接添加一个span标签，绝对定位到浏览器可见区域以外。

3、默认的连接外框
这里没有任何outline相关的属性，结果在有些浏览器下连接外框的表现就比较挫了，例如Firefox下的虚框：

Opera浏览器下的外框：

这里外框的延伸正是因为使用了文字偏移技术产生的。为了显示的好看，有时会用图片代替按钮等，咱们所见的文字有时就是图片的一部分。从搜索引擎的角度上讲，有必要在HTML中显示图片上的文字，但又不能在页面上看到，故使用文字偏移技术。经常使用的是text-indent定位，还有就是是绝对定位。

.indent{text-indent:-1000px;}
.absolute{position:relative;}
.absolute span{position:absolute; left:-1000px;}

4、overflow:hidden有效解决外框延长问题
overflow:hidden能够有效解决外框延长的问题。不过，在Opera浏览器下，overflow:hidden貌似对绝对定位的文字偏移没有做用，这彷佛是个bug。见下图：

5、使用outline:none去除连接外框的
outline:none能够去除连接外框，无论鼠标点的，或是键盘切换的，都没有外框，这显然是有问题的。问题不在于outline，其实outline:none自己并无什么，只是直接挂在a标签下面未免太狠了点，就像是宁错杀三千不放走一人的恐怖行动，直接把键盘用户排除掉了。由于a{outline:none;}形成了IE6/7（不认识outline）之外浏览器下，无论是点击或是TAB键切换都看不到任何外框，用户根本不知道哪一个连接当前在激活状态，在键盘用户眼中，这些页面就是个死页面。

a{outline:none;}

太多的设计师没有考虑到这一点了，很多CSS重置(css reset)中也对outline进行了处理，例以下面：

上图中的设置方式实际上是有问题的（此reset还比较出名），看过本文您就会知道为何有问题，怎样设置才更合理。

6、经过:focus添加键盘切换外框
经过:focus添加键盘切换外框的想法实际上是好的，既然a{outline:none;}不够仁义，株连全部的外框，那么我在后面再设置个:focus的样式，岂不就解决了键盘切换的问题了。由于键盘切换的原理就是让连接内容获取焦点(focus)的。

a{outline:none;}
a:focus{outline:thin dotted;}

然而，实际上，事情不是想的那个样子。怎么了呢？经过:focus从新引入outline会使IE8和Firefox浏览器下:active的样式从新出现。因而，在单击文字或图片连接的时候，仍是会看到连接轮廓框。同时，在chrome浏览器以及Safari浏览器下，:focus{{outline:thin dotted;}替换了浏览器默认focus时的样式。Opera浏览器不是覆盖原来的focus样式，而是添加，因而会出现双边框。 见下图（前者为chrome的默认focus样式替换，后者是Opera下的双边框）：

7、再添加:active进行消除
接上面。既然:focus引出了:active的样式，因此，若是再在后面添加:active{outline:none}岂不是可让IE8或是Firefox点击时无虚框。结果如何呢？还不错，IE8或是Firefox浏览器下点击是没有虚框了，且不影响键盘TAB键的连接切换。就是代码彷佛冗余了一点，并且覆盖了chrome和Safari浏览器下默认的蛮酷的focus样式，Opera下的双边框问题依旧存在。

a{outline:none;}
a:focus{outline:thin dotted;}
a:active{outline:none;}

好，如今咱们理一理，咱们能够发现，这里的逻辑有点问题，相似于负负得正。显示a{outline:none}让全部的连接外框没有了，而后又设置:focus让外框又出现，而后又设置:active让外框又消失，这其中存在消失 – 出现 – 消失的逻辑，而最后一个消失起做用了，这种状况下，最终起做用的那个消失是与前面二者是没有关系的。因此，逻辑推断，:active是解决问题的关键。究竟是不是如此呢？看下面内容。

8、仅仅使用:active去掉连接外框轮廓线
这里的核心样式很简单。

a:active{outline:none;}

结果是出其的好：能够去除用户点击图片式连接时的外框线的问题，同时保留了习惯使用键盘用户在连接得到焦点时虚框可见。而且不会重置浏览器默认的focus得到焦点的样式，或是产生双边框的问题。能够说是至关完美。
下图为IE8下键盘切换focus时的样式表现：

9、使用:hover作进一步的弥补
后来的一些测试代表，仅仅使用:active还有一点小小的问题，就是用户点击一个连接和这个连接指向的页面加载的过程当中，连接外框依旧会出现，这其实也不难理解，连接被点中，也处于:focus状态。因为本测试页面的连接基本上都是在页面自身，因此看不到此问题。必定程度上解决此问题的方法就是添加:hover的outline:none属性。

a:hover,a:active{outline:none;}

另外，还有一种状况下，连接外框的问题没有解决，就是当用户点击了一个连接后，再点击浏览器的后退按钮的时候，此时outline就会出现。

10、IE6/7与连接外框
虽然本文主题是outline，与IE6/7形同陌路。可是IE6/7也是有连接虚框的。有个IE的私有属性能够有效的根除IE的连接虚框，就是hidefocus=”true”，若是您的页面想保证较高的可用性，这玩意最好不要用，或仅用在不重要的地方。这东西，也是个狠角色，很独裁，鳌拜。会让含有此属性的连接外框彻底消失，什么键盘TAB切换根本鸟都不鸟，会有a{outline:none}一样的可用性问题，貌似还会屏蔽focus事件。

<a href="#" hidefocus="true">连接</a>

11、最后的总结
首先，应该知道为什么说:focus{outline:none}是不合理的了。考虑到页面的可用性，尤为对于键盘使用者的页面可用性，一旦设置了:focus{outline:none}，键盘TAB切换是，虽然事实上实在不停的切换，可是因为outline样式为none，外框没有样式，用户根本不知道当前哪一个连接（或是表单控件）处于focus得到焦点的状态，也就没法再页面上进行操做，这类用户包括残疾人士，使用网页阅读器，或是鼠标出问题的用户，或是就是个键盘使用爱好者。

事实上是存在共赢的方法的，将:focus{outline:none;}改为:active{outline:none;}这样，既可让鼠标使用者点击时去掉丑陋的外框，又保留了键盘使用者须要看到的焦点外框，确实为一箭双鵰的方法。若是您想更近一步，能够添加:hover{outline:none;}，但我我的的见解是hover就不用加了，综合估量成本和收益，貌似成本要比收益大一点，固然，这里面含有主观因素，您没必要跟我意见一致。

回到开始，本文的讨论前提是是在假设你要去除连接外框，考虑到页面的可用性问题，您应该对CSS怎么作。个人经验告诉我，不少事物，每每是原始的，默认的是最好的。马化腾马老板在其内部的产品会议上也提到这一点，点击这里，其针对的是浏览器默认的控件，尤指按钮。
因此，咱们要不要经过样式花代码花心思改变连接外框的样式表现呢？至少我是不会的，除了会解决下外框延伸的问题或是极少的使用了a标签的非连接，我是不会动outline动外框的，由于我以为这是吃力不讨好的事情，不作反而悠闲，都交给浏览器吧。

最后，因为文章写了一半，浏览器出岔子，不少内容丢了重写（真是火），因此内容上可能有重复，或啰嗦，或上下衔接不天然，还望见谅。还有，您在使用过程当中遇到什么相似问题，或是发现本文内容的不正确之处，欢迎指正。就这些，我要去买《阿凡达》的电影票了，嘿嘿。

12、参考文章
一、Don’t Lose Your :focus
二、Better CSS outline suppression

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=505