- 24
- Feb
最近正在把Ubuntu Tweak的Web App从Ember.js从1.0 Pre 2升级至前不久刚刚发布的1.0 RC1，已经差不多接近尾声了。
今天在Ubuntu Tweak里面调试的时候，发现了一个以前没有的奇怪的地方：
如图，只要是当前被激活的分类，如Browser这个分类，都会被一圈虚线包围着，很难看：
前端开发经验丰富的人肯定一眼就能看出来了，作为一个野生的前端开发人员，我判断这是我在升级至Ember.js 1.0 RC1后用了{{#linkTo}}这个handler后产生了a元素导致的，然后通过搜索focus关键词解决了问题，只需要在CSS里加这么一行：
*:focus {
outline: none;
}
这样就可以把它去掉了，然而它的后果是用Tab导航的时候就出现不了任何效果了，幸好这不是紧迫的问题。
后来引申开去看了一些outline的资料，发现不同的浏览器之前对这种focus的outline的定义完全不一样，比如Safari会渲染出蓝色的Outline（为了和OS X的主题相适应）、而Android上的Browser则会渲染出橘黄色的Outliine…
尽管都是基于Webkit，但是不同的Browser在一些细节上还是进行了大量的自定义，表现都不尽相同。想让Web在所有的Browser下都有一致的效果，还是要下很多功夫的。
主席的问题，可以在focus伪类的时候改变选择条的颜色，例如从黄色改为蓝色，就可以避免没有焦点框带来的困惑。
支持一下，值得一看的博客
在twitter上链过来的。。收藏了。。学习