Skip to content

几处注意事项,让CSS发挥更高效。

原文:http://css-tricks.com/efficiently-rendering-css/
中文:
http://www.vfresh.org/w3c/1034

只做重点翻译.

从右到左的解析

浏览器解析CSS的时候是从右至左,例如:ul > li a[title="home"]这个选择器中,浏览器首先解析是a[title="home"],这部分也被称为“选择器主键”,即最终将选择的元素。

ID选择符最高效,通配选择符最低效

从高效到低效,有四种选择符:ID、类、标签、通配符。

css

#main-navigation {   }      /* ID (最快的) */

body.home #page-wrap {   }  /* ID */

.main-navigation {   }      /* 类 */

ul li a.current {   }       /* 类 *

ul {   }                    /* 标签 */

ul li a {  }                /* 标签 */

* {   }                     /* 通配符(最慢的) */

#content [title='home']     /* 通配符 */

结合上面说的“浏览器从右至左解析”,下面的这个选择器就不是那么高效了:

css

#main-nav > li {   }  /* 低于预计的效率 */

这让人非常的疑惑,我们原以为浏览器会先匹配最高效的ID,然后再去找那该死的子元素li。但事实是更该死的浏览器会先去找低效的li。

不要使用标签筛选

绝对不要这么用:

css

ul#main-navigation {  }

ID是唯一的,所以没必要再用个标签,脱裤子放屁的事咱ITer不能做。
同样的,对于类(class)也应该尽量避免,除非你想实现同一类名根据标签来做不同的表现。

包含选择器是最烂的

David Hyatt曾说过:

CSS中最耗资源的就是包含选择器(Descendant Selectors),特别是这些选择器是标签或通配符时,资源开销会大的恐怖。

也就是说,这个选择器是相当的低效:

css

html body ul li a {  }

墙内音:fuuuuuuck ie6

一个失败的选择器比一个成功的选择器更高效

我不确定这一条的实用性,因为在你的css里面出现着一堆一堆的无效的选择器,好像呃,非常的诡异。但我们还是得明白:当浏览器从右至左解析选择器的时候,一旦无法匹配就会立即停止解析。

写选择器的时候思考一下为什么

例如这个选择器:

css

#main-navigation li a { font-family: Georgia, Serif; }

上面这段代码只是用来申明字体类型(font-family),不必指定如此详细(复杂)的选择器(除非你是想覆盖<重设>font-family)
可以通过继承的方式使之更高效:

css

#main-navigation { font-family: Georgia, Serif; }

全文主要内容译完
作者还提醒大家:

不要为了优化css选择器效率而损失css的可维护性、语义化,这样就得不偿失了。本文只是希望你能认识到,css可以写的更好更漂亮。

另外,css选择器在一些JavaScript库中同样有用到,这些概念也同样适用;ID最高效,复杂、包含选择器这类是低效的。

IE6不能解析CSS

原因:

1,CSS编码问题。

2,CSS文件中有中文注释。

视觉设计前瞻实用性研究(PNVD)第六期

XHTML-CSS写作建议

  1. 所有的xhtml代码小写
  2. 属性的值一定要用双引号(“”)括起来,且一定要有值
  3. 每个标签都要有开始和结束,且要有正确的层次
  4. 空元素要有结束的tag或于开始的tag后加上”/”
  5. 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
  6. <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
  7. 给每一个表格和表单加上一个唯一的、结构标记id
  8. 给重要的区块加上注释,如:
  9. 给图片加上alt标签
  10. 所有的标签必须进行合理的嵌套
  11. 根元素前必须有元素,宣告使用那一种DTD
  12. 根元素必须有xmlns属性来指定使用http://www.w3.org/1999/xhtml的namespace

CSS样式表规范:

  1. id和class命名采用该版块的英文单词或组合命名,并第一个单词小写,第二个单词首个字母大写,如:newRelease(最新产品/new+Release)
  2. CSS样式表各区块用注释说明
  3. 尽量使用英文命名原则
  4. 尽量不加中杠和下划线
  5. 尽量不缩写,除非一看就明白的单词

CSS命名规范:

DIV CSS名称 说明
网站公用相关
Container div #container 容器
Layout
#layout 布局
Header or banner div #head, #header 页头部分
Footer div #foot, #footer 页脚部分
Navigation list #nav 主导航
Sub-navigation list #subNav 二级导航
Menu #menu 菜单
Sub Menu #submenu 子菜单
Left or right side columns #sidebar_a, #sidebar_b 左边栏或右边栏
Main div #main 页面主体
Tag #tag 标签
Message #msg #message 提示信息
Tips #tips 小技巧
Vote #vote 投票
Friend Link #friendlink 友情连接
Title #title 标题
Summary #summary 摘要
Search input #searchInput 搜索输入框
Search output #search_output 搜索输出和搜索结果相似
Search #search 搜索
Search bar #searchBar 搜索条
Search results #search_results 搜索结果
Copyright information #copyright 版权信息
brand #branding 商标
branding-logo #logo LOGO
Site information #siteinfo 网站信息
Copyright information etc. #siteinfoLegal 法律声明
Designer or other credits #siteinfoCredits 信誉
Join us #joinus 加入我们
Partnership opportunities #partner 合作伙伴
Services #service 服务
Regsiter #regsiter 注册
Arrow arr/arrow 箭头
Little #little 标题
Website map
#sitemap 网站地图
List #list 列表
Home page #homepage 首页
Sub page subpage 二级页面子页面
Toolbar #tool, #toolbar 工具条
Next pulls
#drop 下拉
Next pulls menu #dorpmenu 下拉菜单
Status #status 状态
电子贸易相关
Products .products 产品
Products prices .products_prices 产品价格
Products description .products_description 产品描述
Products review .products_review 产品评论
Editor’s review .editor_review 编辑评论
New release .news_release 最新产品
Publisher .publisher 生产商
Screen shot .screenshot 缩略图
FAQ .faqs 常见问题
Keyword .keyword 关键词
Blog .blog 博客
Forum .forum 论坛

浅谈几个设计法则

经常会听到有人议论,设计很主观化,很难有标准。但一些常见设计法则,还是能够让我们深入浅出,在设计过程中给予我们一些辅助。以下就简单介绍几个:

1.Flexibility-Usability Tradeoff 弹性-使用性权衡

弹性,即样样知晓,无一精通。当弹性增加时,单个功能的使用性就会降低,引发效率降低,复杂性、时间以及开发的成本增加。

如何兼顾功能的丰富和使用性,弹性需求在何种情况下是有意义的?简单来说,用户对其未来需求没有清楚的期望值时,可以多做一些功能去试探用户的功能需求。如,拥有多功能的弹性设备个人电脑,适合对自己需求并不是那么具体的用户。具有使用性的游戏机,则更符合对游戏有明确需求的发烧友用户。

又如,QQ影像的快调,对一个不懂图像处理,对图形处理参数没有清晰认知的户,可以多提供一些快速调节设置,提供更大范围上的弹性功能。

产品设计最终是偏向弹性还是使用性,取决于我们面向的用户,对其期待的功能是否有比较精确化的描述。

2.Garbage In —— Garbage out垃圾进,垃圾出

人机交互中,输入到系统的信息,如果本身就是垃圾,自然不能期待产生的内容是对用户有效的。

垃圾信息一般有两种情况:

  • 类别问题:比如要求输入字母,结果导入了数字
  • 质量问题:比如两次输入密码,第二次比第一次多出了一个数字。

常见于表单数据填写的案例场景中,对于类别问题,可采用输入前事先告知,和输入时的内容限制来规避:

  对于质量问题,可以通过预先检查和确认等功能来避免。

最重要的是,如果是用户已经填写的内容,最好直接导入,减少用户导入信息的错误几率。

依赖于信息运营的社区类产品,如果有必要,也可做些门槛式的设计,能从源头把控,让用户不会那么容易的导入垃圾。

3.Expectation Effect 预期效应

 因个人或对他人的预期,会引发认知与行为的改变。事前一项可靠的描述,会在任何群体中,引发约30%的期待。

当推动某项产品或设计时,适当建立预期心理,引导目标用户,达到预想目的。如产品发布前,让用户有预期,无论是后面收集用户反馈,还是下个版本的推进都可以得到更针对性的反馈。

反之,当我们在做用户研究访谈时,要采用适当的步骤,尽量避免因为预期效应而导致的偏见。

值得提醒的是预期效应虽然会影响认知行为,但是这种改变是暂时的,经过一段时间后,行为和认知均会回复到基准线。

4.Five Hat Racks 五帽架

1989年Wurman(TED主席/执行总监,第一次提出信息架构的概念)提出五帽架理论:无论信息对象如何,都可以使用五种方法进行资料组织。

1、字母:最常见的组织方式,具有强烈的指示性,适用于非直线方式找到特定内容。

2、时间:以时间为基准来组织资料,适用于时效性强的信息。

3、地点:以地理或空间组织资料,适用于本身具备地理关联性的内容。

4、连续性:按范围大小、最高到最低、最好到最坏等组织内容,适用于展示对比性信息。

5、种类:用类似或相关性来组织资料,适用于多层级信息分解。

5.Fitts’s Law 费茨法则

1954年由Paul Fitts提出:移动到一个目标的时间,跟目标尺寸及到目标的距离有关。移动对象不仅包括直接接触,如手指,也包括用一个物体去移动,如鼠标。

MT=A+B log 2(D/S+1);

MT=到目标的移动时间;A=0.230s; B=0.166s; D=指示装置与目标的距离;S=目标尺寸。如图所示:

适用于快速、指示性动作,不适合持续的动作。

6.Hick’s law 席克法则

以英国心理学家William Edmund Hick命名,当选项增加时,下决定的时间也增加。可以用来测出,当有多重选择时,需要多少时间能做出决定,适用于简单判断的场景,对需要大量阅读和思考的情景并不适用。

RT=a+b log2(n),

RT=反应时间,

a=与做决定无关的总时间(前期认知和观察时间),

b=根据对选项认识的处理时间(从经验衍生出的常数,对人来说约是0.155s)。

7.Gutenberg Diagram 古藤堡图表

古藤堡把显示媒介分为五个区间, 视觉流从左上角到右下角。

当元素是平均分散,性质相同的时,可以考虑用古藤堡表,来协助设计格式和内容。否则,应该以元素的重要性来吸引眼球的移动。

网页上的浏览热点区分布,验证了古藤堡表的分区。

8.Serial Position Effects 序列位置效果

序列位置效果:在列举项目中,排在前面与后面的物品,要比排在中间的物品,更容易被人想起。

当列举的项目是视觉性质的,就把重要物件放在最前面。如果列举的项目是听觉性质的,就把重要的物件放在最后面。

9.Progressive Disclosure 递进展开

以递进展开的方式,展现信息内容,即只有在需要时,才会显示资料。其思想为:根据所面向的对象,对信息划分层级,对于初级用户,仅展示基础、简洁内容,保证操作流程顺畅结束。同时,针对熟练用户,也能快速的找到更多信息。

使用这种原则,最重要的是要定义不同层级的信息内容,以对应不同的服务对象。

10.Depth of Processing 处理深度

一种关于记忆的现象:被深层分析过的资讯,要比浅层分析过的资讯更容易记得。例如一篇纯文本的文章,与图文并茂,并帮他进行了初始的信息梳理和加工的专题来比,后者被容易被记住和回想起。

如:Qzone社区主页的热点专题,比纯粹的信息展示更容易被用户所认知。

以上为简单介绍几个的通用原则,很多情况的设计过程,往往都能归结为最简单的那几点,欢迎大家探讨,谢谢~

本文链接:http://www.blueidea.com/design/doc/2010/7692.asp

全方位清理浮动

看很多人在为浮动纠结,翻了一下以前的资料。如下:

清除浮动一个凡是做页面的人都会遇到的一个东西,但是是否大家都能够清楚的知道,全方位的了解呢?于是一闲下来了马上写了这样的一篇文章,不能讲面面俱到,然而基本能将我所知道的倾囊相授了。

我们粗略的一起来看看清除浮动的办法一共有多少个(IE里面用zoom:1就不写了,下一个专题再写)。对应的DEMO

  1. 采用伪类:after进行后续空制的高度位零的伪类层清除
  2. 采用CSS overflow:auto的方式撑高
  3. 采用CSS overflow:hidden的方式产生怪异适应
  4. 采用display:table将对象变成table形式
  5. 采用div标签,以及css的clear属性
  6. 采用br标签,以及css的clear属性
  7. 采用br标签,以及其自身HTML的clear属性

粗略的看,他们都能将问题解决;然而他们另外一方面又有着各自的利弊。(一一对应)

  1. 优点结构语义化完全正确,不会产生其余的怪异问题。
    缺点复用方式不当容易造成代码量急剧增大。
    建议最外层轻浮动时使用,或清晰模块化复用方式的人使用。
  2. 优点结构语义化完全正确,代码量极少。
    缺点多个嵌套后,点击最外层的轻浮动框会遭成最外层至最内层内容全选(FF);或者在mouseover造成宽度改变时会出现最外层模块有滚动条(IE)。
    建议内个模块使用,请勿嵌套
  3. 优点结构语义化完全正确,代码量极少。
    缺点内容增多时候极易不会自动换行而内容被隐藏掉。
    建议宽度固定时使用,请勿嵌套
  4. 优点结构语义化完全正确,代码量极少。
    缺点盒模型属性已经改变,可想而知奇异事件自然多得你数都数不到。
    建议如果你不想改Bug改死你的话,最好不要使用;不过可以作为alpha版本当中临时性的忽悠下测试。
  5. 优点代码量极少,复用性极高。
    缺点完全不能完美的适应语义化,不利于改版以及需求变更。
    建议初学者使用,可以让你快速的解决浮动问题。
  6. 优点语义化程度比第5种情况要更优;代码量极少,复用性极高。
    缺点语义化依旧不完美,不利于改版以及需求变更。
    建议初学者使用,可以让你快速的解决浮动问题。
  7. 优点语义化程度比第5、6种情况要更优;代码量最少,复用性极高。
    缺点语义化依旧不完美,不利于改版以及需求变更。
    建议引导初学者思维升级时使用,让其明白与其用classname来控制一种表现,倒不如回归到WEB1.0的时代的网页直接用html属性来控制表现,毕竟后者的代码量更少。

摘自:http://webteam.tencent.com/?p=1122

笨用户

其实叫这个名字。我感觉还不如直接叫“用户的兴趣和需要”一下连接为原文:

http://ucdchina.com/snap/6463

做产品,先找准产品的定位点再开工

在一下网址看到的。感觉讲的挺对的。分享给大家!

http://hi.baidu.com/mooqii/blog/item/afa00624b1a2d70d4c088dbd.html

Web与排版学上的字体问题

关于字体的讨论,其实无论是国外还是国内,都已经有不少,可是我发现绝大部分的内容或者有失偏颇,或者不够全面,下面我试图将自己一段时间内的观点总结一下,以求提出一个比较容易接受的 CSS 字体选择的建议。

事关大小

字体的大小总是一个困扰人的问题,用绝对单位还是用相对单位?或者具体来说,用什么单位?ex? em? pt? px? 百分比? 让我们看看 CSS 2.1 Spec 中的说明:

1、相对大小包括:em, ex, px
2、绝对大小包括:in, cm, mm, pt, pc
3、em 就是相对 font-size 制定的大小而言的,例如 margin: 1.2em 就是指设置 1.2 个字符宽度的 margin,当 em 本身用于 font-size 时,指的是它所继承元素的相对大小。
4、百分比也是相对 font-size 而言的。

因此我认为,em 和百分比都不适合设置字体的大小,因为相互变动的因素太多了,修改一个地方就有可能影响很多其他的地方。ex 是根据拉丁字母的 x 的高度而言的,这不适合汉字的大小,所以也否决了。px 是根据当前显示设备的解析度而言的,同一个 px 对应不同的设备——比如屏幕或纸张——实际的大小会有一定差异。

所以我认为,如果网页中应该存在作为绝对参照系的长度,那么 pt 和 px 应该是首选,其他的长度根据这个绝对参照系,按照百分比或者 em 来变动。

下面谈谈网页和印刷中大小造成的差异。99% 的网页是用来在屏幕上阅读的,而问题在于,屏幕的解析度要比纸张低得多,所以如果直接把字体按照纸张上印刷的那个大小显示,肯定是看不清的,仅就英文字体而言,许多细微的点划、衬线都没法在那么低的解析度下表现出来,所以我们只能用专门设计给屏幕显示的字体。

这些字体的优劣是很难评述的,有一种看法认为,尽管纸张印刷中都倾向于有衬线 (serif) 的字体比无衬线 (sans-serif) 的要易读,但屏幕上无衬线的字体反而要好一些。所以微软把 Verdana 吹捧为了最适合网页使用的字体。我通常也偏向于使用 Verdana、Arial 多于 Times、Georgia。

 对于中文字体的情况有所不同,中文字体在屏幕上的清晰显示依赖的是点阵字体,或者简单的说,就是微软随 Windows 提供的宋体和新宋体 (simsun & nsimsun),这套字体是华康公司 (Dynalab) 设计的,对 9pt 到 12pt 左右的字体都设计了对应的点阵字体。其中使用得最广泛的是 9pt, 10.5pt 和 12pt 的字体:

那么比这个大小要大的汉字呢?就要依赖操作系统的字体圆整 (anti-alias,以下简称 aa) 技术了,一般大家认为,Mac OS X 和 Linux 下的 AA 要比 Windows 的 ClearType 好很多。然而不管怎么说,用太大的汉字是比较危险的。

事关空间

今天新加一节,本来计划好的,昨天写的时候又忘了。

这里的空间指的是 letter-spacing 和 line-height,也就是字间距和行间距。首先,良好的行间距是排版最重要的地方,你可能不能自由选择字体,字号的选择也受诸多限制,但至少行间距的选择是可以完全由自己控制的。

所谓的 line-height,指的是两行字基线 (base-line) 之间的距离,什么是基线?下面图中的红线便是,对于汉字,则应该就是底部的水平线。

在印刷排版中,习惯用 pt 来指定行高,比如所谓采用 12/14pt 排版,就是字号 12pt,行高 14pt;而 Web 中似乎习惯用百分比来设置,这个见仁见智,只要自己看得顺眼就行。但必须注意的是,浏览器默认的行高一定是不够的,尤其对于希望浏览者长时间阅读的内容,行高 – 字号至少要有 2pt 以上。更苛刻的排版学家通常推荐 3pt 以上,但毕竟 Web 上可以随意一点。

但 letter-spacing 又是另一回事,我没学过书法,汉字的间距不好多说,但英文字母的间距却不应该随便调整,尤其不宜统一调整。因为实际上,Type1、TrueType、OpenType 这些字体格式中都包含了一个叫做 kerning table 的东西,也就是字母间距的微调。为什么要做这种微调?两个简单的例子是 AV 和 We,如果不做微调,“A”和“V”之间的距离就会过宽,“e”也不会像我们平常书写的那样和“W”契合得那么自然,下图显示了 Adobe Reader 中,使用 Sabon Next 字体时的 kerning 效果:

大部分的 User Agent,当然也包括你的浏览器,都会根据字体的 kerning table 自动做这个微调工作,但倘若你使用 CSS 来修改 letter-spacing,这个工作就白费工夫了。所以我才建议不要随便调整 letter-spacing。比如 WordPress 原来的 Classic Theme (Dave Shea 设计,Matt 修改),就犯了这个毛病。

事关风格

谈到英文字体,可以扯出许多掌故,不过这里且说说 Web 开发有关的。

关于 Times New Roman,首先,与大家一般保留的印象不同,Times 不应该是一个适合长时间阅读的字体,尤其不适合书籍的阅读,因为众所周知的,Times 一开始是给报纸设计的一种字体,而为了适应报纸这种在劣质纸张的快速印刷的环境,字体的衬线不得不夸张一些,否则细节很容易被油墨破坏,所以把 Times 用在书籍上其实是一种很不负责任的方式。

比这个更不负责任的是用 Times New Roman,Times New Roman 其实是一种压缩 (Condensed) 了的 Times,比原来的 Times 更细长,更不易读了。下面的一个比较应该比较容易分辨出优劣来:

Times 与 Times New Roman 的比较(点击下图可放大

是不是没有好的字体呢?不是,Sabon、Minion、Jansen-Text, Adobe Caslon, Adobe Garamond 等等都是非常适合阅读的字体,只不过这些字体都是商业的,也就是说,不是可以免费得到的。Microsoft 提供的字体中也有质量比较好的,比如 Hermann Zapf 亲自监制的 Palatino Linotype。事实上,Adobe 选择的 35 种标准的 PostScript 字体 (Times Roman, Helvetica, Courier, Palatino 等等) 中,Zapf 设计的 Palatino 就是使用最广泛的,也最容易阅读的字体。这些字体由 URW 免费提供了,是质量很好的字体,可惜的是并非应用得特别广泛 (不过大部分的 Linux Distribution 中都包括 urw-fonts 这个 package,大部分的 TeX distribution 也都包括 urw 这个 package)。

说到 Palatino, 我们也可以看看 Web 上 Palatino 和 Palatino Linotype 的区别:

Palatino 的比较(点击下图可放大

相信可以看出,高质量的 Type1 字体,本身就带有字体圆整效果,这是比 Truetype 优越的地方。

我的建议
我的建议是什么呢?恐怕还是老生常谈:

1、用pt 作为绝对参照系。
2、中文字体尽量使用 9pt, 10.5 和 12pt 中的一种。
3、一定要仔细调整行高,避免调整字母间距。
4、选择字体的时候,先考虑 Type1,再考虑 Truetype,最后考虑都没有的情况,比如我想用 Palatino, 那么应该:font-family: Palatino, “Palatino Linotype”, serif;。

---------引用分隔线---------

9pt, 10.5 和 12pt 的汉字之所以显示效果很好,是因为在truetype中嵌入了相应的优化过的点阵字体,这种技术好像是叫做hint。

有些繁体或者日文汉字是可以在8pt等极小尺寸下优秀显示的,也是因为嵌入了特别优化过的点阵字体。

对英文来说,在屏幕上衬线字体的显示确实不如无衬线字体。不过,汉字呢?似乎是完全相反的情况。 屏幕上的宋体恐怕比黑体看得舒服的不是一点点,当然,是因为分辨率的原因。

Type1和Truetype 的区别?这个我确实不知道,需要了解一下。

ps:相关概念

 1、点阵字、TrueType字、PS字

点阵字:  一般用于屏幕显示,如软件菜单文字。这种字体最大的缺点是精度低,放大、变形后有很严重的锯齿,不能作为印刷字体。
TrueType字体: 是由直线、曲线等图形数据来描述文字的轮廓,采用二次曲线,一套字体即可用于屏幕显示又可作为打印字体。是使用最为广泛的字体。
PS字:  也就是PostScript字体,与TrueType字体一样也是由直线、曲线等图形数据来描述文字的轮廓。 
TrueType字与PS字的区别: TrueType字体装在电脑中,屏幕显示与打印使用同一套字体。而PS字则不同,在照排机中装入PS字,用于最终打印输出,而电脑中装入与PS字相对应的点阵字,用于屏幕显示。输出时电脑发送字体的代码到照排机中,然后照排机根据字体代码寻找相应的PS字。

TrueType字库是由Microsoft和Apple在1991年共同推出的,供前端排版时显示和打印输出,虽然打印质量没有PostScript字库好,但是完全可以满足一般用字的需求。

PostScript是Adobe于1985年发表的文件描述技术,按该 PostScript页面描述语言语法定义的字库就是PostScipt字库,其主要特点是可以精确地描述绘制字型,因而按印刷工业中的质量标准,PostScript字库在平滑性、细节和忠实性方面比TrueType字库要好。PostScript字库一般装于后端输出设备如激光打印或RIP软件中,而它在前端的使用需要依靠特殊的软件比如Adobe 的ATM,由于PostScript字库在操作系统软件中的兼容性不是很理想,目前主要还是用于后端输出。

OpenType也叫Type 2字体,是由Microsoft和Adobe公司从1995年开始联合开发的另外一种字体格式。它也是一种PostScript轮廓字体,比TrueType更为强大,最明显的一个好处就是可以把PostScript字体嵌入到TrueType的软件中,因此不管在屏幕显示和打印都可以获得优秀的输出质量。同时支持Windows、Mac和Linux系统平台,支持Unicode大字符集,还有版权保护。此外OpenType还可以包含连体字、上下标、花饰字等丰富的排版特性。可以说它是Type 1和TrueType的超集。

注:OpenType标准定义了OpenType文件名称的后缀名。包含TureType字体的OpenType文件后缀名为.ttf,包含PostScript字体的文件后缀名为.OTF。如果是包含一系列TrueType字体的字体包文件,那么后缀名为.TTC。

如何去除点击链接时出现的虚线框

有时候在一个页面用到收放功能的时候时,总有一个虚线框在触发收放的功能按钮上,显得特别刺眼,那如何去除这个虚线框呢?

虽然从可用性的角度,隐藏虚线框的做法会让键盘偏执狂不满。但从视觉上,有时候虚线框确实影响美观。

方法一:

IE 下可使用其私有的html属性:hideFoucs,在标签的结构中加入 hidefocus=”true” 属性。即:

<a href="http://www.taobao.com" hidefocus="true" title="淘宝网,淘我喜欢">淘宝网</a>

而在 Firfox 浏览器中则相对比较容易,直接给标签 a 定义样式 outline:none; 就可以了,即:

.HideFocus {
        outline:none;
}

方法二:

也可以仅用 CSS 来控制,即对 IE 的情形使用 expression 表达式,但不推荐使用,毕竟 expression 在性能上有问题。

.HideFocus {
        hide-focus: expression(this.hideFocus=true);  /* for ie 5+ */
        outline: none;  /* for firefox 1.5 + */
}

opera9 似乎默认就不显示焦点虚线框。

除链接外,该 CSS 同样适用于 input 和 button 标签。

IE6, IE7, FF1.5, FF2, Opera9 测试通过。