浏览器版本：IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev

受影响的浏览器：所有浏览器.

经常讲到css选择器命名规则，其实不只是在团队合作基础上来讲这个，每个浏览器,IE产品，火狐，苹果，谷歌，都会因为命名不规范会产生不同样式..

一、关于选择器的命名

W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以 数字，或一个连字号后跟数字为开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数 字编码。

由于设计到的字符很多，本文只针对字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）进行讨论。 关于CSS中允许使用的字符和大小写信息，请参考W3C CSS2.1的4.1.3节

二、差异及可能产生的问题

在W3C CSS2.1说明文档中，只提到选择器标识符不能以数字，或一个连字号后跟数字为开头。除 此之外，没有相关的说明。那么各浏览器下的表现是否遵循这一规则呢？

请观察如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

 
div{width:160px;height:20px;font-size:12px;line-height:20px;background- color:yellow;}
 
.f-1_f_{background-color:#d4d4d4;}
 
.1{background-color:#A8A8A8;}
 
.123456{background-color:#d4d4d4;}
 
.2demo{background-color:#A8A8A8;}
 
.2-demo {background-color:#d4d4d4;}
 
.2_demo {background-color:#A8A8A8;}
 
.-demo{background-color:#d4d4d4;}
 
.-2demo {background-color:#A8A8A8;}
 
._demo {background-color:#d4d4d4;}
 
._2demo {background-color:#A8A8A8;}
 
.-{background-color:#d4d4d4;}
 
.---{background-color:#A8A8A8;}
 
._{background-color:#d4d4d4;}
 
.——{background-color:#A8A8A8;}
 
._-{background-color:#d4d4d4;}
 
.-_{background-color:#A8A8A8;}
 
.-{background-color:#d4d4d4;}
 
.---_{background-color:#A8A8A8;}
 
.---123{background-color:#d4d4d4;}
 
.__123{background-color:#A8A8A8;}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="f-1_f_">字母开头</div>
<div class="1">单个数字</div>
<div class="123456">多个数字</div>
<div class="2demo">数字开头 + [a-z][A-Z]</div>
<div class="2-demo">数字 + "-" 开头</div>
<div class="2_demo">数字 + "_" 开头</div>
<div class="-demo">连字符(-)开头 + [a-z][A-Z]</div>
<div class="-2demo">连字符(-) + 数字 开头</div>
<div class="_demo">下划线(_)开头 + [a-z][A-Z]</div>
<div class="_2demo">下划线(_) + 数字 开头</div>
<div class="-">单个连字符(-)</div>
<div class="---">多个连字符(-)</div>
<div class="_">单个下划线(_)</div>
<div class=" 	">多个下划线(_)</div>
<div class="_-">下划线(_) + 连字符(-)</div>
<div class="-_">连字符(-) + 下划线(_)</div>
<div class=" 	-">多个下划线(_) + 连字符(-)</div>
<div class="---_">多个连字符(-) + 下划线(_)</div>
<div class="---123">多个连字符(-) + 数字</div>
<div class=" 	123">多个下划线(_) + 数字</div>

看看各浏览器下面的结果

观察上表，分析各浏览器下的表现，总结如下

从上面看到，我们可以直观的了解到选择器的命名在各浏览器下的支持情况有所不同。因此，如果选择器的命名不规范，将影响各浏览器下，样式渲染不一致。比如如下代码：

1
2

div{font-size:12px;background-color:yellow;width:150px;height:30px;line- height:30px;}
.20fontsize{font-size:18px;background-color:#d4d4d4;}

1

<div class="20fontsize">以数字开头的类名</div>

以数字开始的类名仅在IE6(Q)/IE7(Q)/IE8(Q)下被识别，而其它浏览器下则不识别（忽略该规则）

三、如何避免受此问题影响

坚持以字母开头命名选择器，这样可保证在所有浏览器下都能兼容。

四、关于团队合作的css命名规范

常用的css命名规则

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

(二)注释的写法:

/* Footer */

内容区

/* End Footer */

(三)id的命名:

(1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

(2)导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

(3)功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：regsiter

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

（2）字体大小,直接使用”font+字体大小”作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如

.barnews { }

.barproduct { }

注意事项::

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

主要的 master.css

模块 module.css

基本共用 base.css

布局，版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

自从一个月前我偶然发现LESS之后我就开始坚定的使用它了。CSS本身对我来说从来不是问题，但是我很好奇使用变量来沿着一个调色盘为我的网站或模板创建一些东西的想法。拥有一个提供固定数量选项可选的色盘可以让我避免颜色太跳跃以至于从一个已定的风格中脱离。

事实证明，LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性，比如下面这些：

• 混入(Mixins)——class中的class；
• 参数混入——可以传递参数的class，就像函数一样；
• 嵌套规则——Class中嵌套class，从而减少重复的代码；
• 运算——CSS中用上数学；
• 颜色功能——可以编辑颜色；
• 名字空间(namespace)——分组样式，从而可以被调用；
• 作用域——局部修改样式；
• JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

LESS和Sass的主要不同就是他们的实现方式，LESSS是基于JavaScript，所以，是在客户端处理的。

另一方面，Sass是基于Ruby的，然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式，我选择的是只在开发环节使用LESS。一旦我完成了开发，我就复制然后粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出，从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能，但终归是有可能的。

LESS Is More

介绍

在你的项目中引入LESS很简单：

1. 下载less.js;
2. 创建一个文件来放你的样式，比如style.less;
3. 添加以下代码到你的HTML的<head>中:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

请注意link的rel属性。你需要在属性值的最后面使用/less以使LESS起作用。然后在link后面引入scirpt也是必须的。如果你在用HTML5语法——为什么不用呢？——你可以省去type=”text/css”和type=”text/javascript”。

其实也有一个服务器端的LESS版本。在服务器上安装LESS的最简单的办法就是使用Node Package Manager (NPM，一看就知道是基于Node.js的)。

变量

如果你是个开发者，变量应该是你最好的朋友。如果你要重复的使用一个信息(本例中就是color)，将它设置为一个变量就可以。这样，你就可以保证自己的一致性并可能减少滚动代码来查找颜色值、复制、粘贴等繁琐的工作了。你甚至可以加或者减一些你需要渲染的HEX值到这些颜色上面。看下例子：

1
2
3

@blue: #00c;	
@light_blue: @blue + #333;
@dark_blue: @blue - #333;

如果我们将这些样式应用到3个div上面，我们就可以看到由加上和减掉的HEX值形成的渐变的效果：

从@light_blue到@blue到@dark_blue的渐变效果

关于变量在LESS和Sass中的唯一区别就是，LESS用@，Sass用$。同时还有一些作用域上的差别，我后面会提到。

混入(mixin)

偶尔，我们会创建一些会在样式表中重复使用的样式规则。没有人会阻止你在一个HTML的元素中使用多个class，但是你可以用LESS，在样式表中完成。为了描述这一点，我写了一点儿例子：

1
2
3
4
5
6
7
8
9
10
11

.border {
	border-top: 1px dotted #333;
}
article.post {
	background: #eee;
	.border;
}
ul.menu {
	background: #ccc;
	.border;
}

这可以给到你与你在两个元素中分别添加.bordered class同样的效果——而且仅仅在样式表中就完成了。而且它工作的很好：

文字和无序列表都被用上了边框样式

在Sass中，你要在样式规则前面添加@mixin声明，规定它是个嵌套。然后，通过@include来调用它：

1
2
3
4
5
6
7
8
9
10
11

@mixin border {
	border-top: 1px dotted #333;
}
article.post {
	background: #eee;
	@include border;
}
ul.menu {
	background: #ccc;
	@include border;
}

参数混入

就像在CSS中有函数功能一样，这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章，内容是包含着由有用的参数组成的文件，他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。例如，在他们的格式中，一个简单的处理圆角的mixin是这样的：

1
2
3
4
5

.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

在这个例子中，.border-radius有个默认的3px的圆角，但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。

Sass中的语法很像LESS，只是使用$声明变量，然后使用前面提到的@mixin和@include来调用。

选择器继承

这个东西LESS并没有提供。通过这个功能，你可以将一个选择器附加到已经预先定义的选择器上，而无需再使用逗号将两者分开的写法了：

1
2
3
4
5
6
7
8
9
10
11

.menu {
	border: 1px solid #ddd;
}
.footer {
	@extend .menu;
}
 
/* 上面的写法规则和下面的效果是一样的： */
.menu, .footer {
	border: 1px solid #ddd;
}

嵌套规则

在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS，你可以嵌套id、class以及标签。对于前面提到的例子，你可以这样写：

1
2
3
4
5
6
7
8
9
10
11

#site-body { …
	.post { …
		.post-header { …
			h2 { … }
			a { …
				&:visited { … }
				&:hover { … }
			}
		}
	}
}

上面的代码最终和上面的例子（那一长串的选择器）的效果一样，但是要更容易阅读和理解的多，而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上，该功能类似于JavaScript中的this。

运算

这可能是你所期望的：使用数字或者变量在你的样式表中实现数学运算！

1
2
3
4
5

@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

声明下，我也意识到我可以除以4来获得@quarter_page变量，但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中，小括号也是必须的，比如 border: (@width / 2) solid #000。

Sass在数字上比LESS更专业。它已经可以换算单位了。Sass可以处理无法识别的度量单位并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

1
2
3
4
5

/* Sass */
2in + 3cm + 2pc = 3.514in
 
/* LESS */
2in + 3cm + 2pc = Error

Color函数

在文章开头，我提到了LESS如何帮我在编码过程中处理围绕着一个调色板。对此贡献最大的一部分就是颜色函数。加入你用一个标准的蓝色贯穿到你的样式中，然后你想要在表单中用这个蓝色来做一个渐变的按钮。你可以打开Photoshop或者其它的编辑器来获取一个比蓝色较浅的或者较暗的HEX色值来作为渐变色。或者，你可以只是使用LESS中的颜色函数。

1
2
3
4
5
6
7
8
9
10
11
12

@blue: #369;
.submit {
	padding: 5px 10px;
	border: 1px solid @blue;
	background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
	background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
	background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/
	background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
	background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
	color: #fff;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}

lighten函数很明显就是用百分比值来减轻颜色，在这个例子中，它将减轻这个基础的蓝色的10%。这种方法可以让我们变化的元素或者其它任何元素的颜色值——只是简单的改变基础颜色而已。这对于主题(模板)来说非常有用。而且，如果你使用参数功能，像上面提到的，你还可以更简单的应用到一些浏览器私有前缀的声明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。

嗯，最终的效果的确很赞：

很赞的渐变的、基于变量的”Submit”按钮

还有很多其它的色彩函数，比如变暗或者调整颜色的饱和度，甚至你可以旋转色盘来使用其它颜色。我建议亲自尝试下你能想出的（用法）。

Sass貌似有更多的选项——但我并不需要这么多。我个人最常用的还是lighten和darken。如果你想了解更多，可以看一下这篇很详细的介绍。

条件语句与控制

这是一个的确很赞的东东，也是另一个LESS不支持的功能。使用 Sass，你可以使用if { } else { } 条件语句，以及for { }循环。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。

1
2
3
4
5
6
7
8
9
10
11
12
13

/* Sample Sass "if" statement */
@if lightness($color) > 30% {
	background-color: #000;
} @else {
	background-color: #fff;
}
 
/* Sample Sass "for" loop */
@for $i from 1px to 10px {
	.border-#{i} {
	border: $i solid blue;
	}
}

名字空间(Namespaces)

名字空间可以用于组织我们的CSS到另一个档次，我们可以将一些公用的样式分组，然后在用的时候直接使用。例如，如果我们创建了一个名为default的样式分组，我们就可以在用到的时候直接从该组中调用。

1
2
3
4
5
6
7
8

#defaults {
	.nav_list () {
		list-style: none;
		margin: 0; padding: 0;
	}
	.button () { … }
	.quote () { … }
}

然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。

1
2
3

nav ul {
	#defaults > .nav_list;
}

作用域

作用域是编程中的标配，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。

1
2
3
4
5
6
7
8

@color: #00c; /* 蓝色 */
#header {
	@color: #c00; /* red */
	border: 1px solid @color; /* 红色边框 */
}
#footer {
	border: 1px solid @color; /* 蓝色边框 */
}

因为我们在#header中重新定义了color变量，变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有地方，如果没有被重新定义，都会保持那个原始的值。

作用域在Sass中稍有不同。在上面的代码中，当@color变量变为红色后，代码中，此处之后的该变量的值，将会被重写（成为红色）。

注释

这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释，/* comment */，是有效的，而且能够通过处理并正确输出。当行注释，// comment，同样可以用但是不能够通过处理也不能被输出，然后，结果是，“无声的”。

导入

导入也相当符合标准。标准的 @import: ‘classes.less’; 处理的很好。然而，如果你想要导入其它的LESS文件，那么文件的扩展名是可选的，所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容，你可以使用 .css 扩展 (比如， @import: ‘reset.css’;)。

字符串插入

字符串也是可以用于变量中的，然后通过@{name}来调用。

1
2

@base_url : 'http://www.qianduan.net';
background-image: url("@{base_url}/images/background.png");

转义(Escaping)

可能偶尔会需要引入一个CSS中非法或者LESS无法识别的值。通常是一些IE的hack。要避免抛出异常并破坏LESS，你将需要避开它们。

1
2
3
4
5
6
7
8

.class {
	filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}
 
/*实际上将会输出下面的代码: */
.class {
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}

JavaScript 赋值

这是LESS中我最中意的部分：在样式表中使用Javascript——相当精彩。你可以使用表达式，也可以参考环境方向来使用反单引号。

1
2
3
4
5
6
7
8

@string: `'howdy'.toUpperCase()`; /* @string 变成 'HOWDY' */
 
/* 你也可以使用前面提到的插值： */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* 变为 'HOWDY' */
 
/* 获取文档的信息 */
@height = `document.body.clientHeight`;

输出格式

然而LESS并没有输出设置，而Sass提供4中输出选项：nested, compact, compressed 和 expanded。

结语

这两个方法有很多共同点。对写代码的设计师来说它们都是很玄的工具，它们也可以帮助开发者更有效和快速的工作。如果你是Ruby或HAML的粉丝，那么Sass会是你的好助手。对我来说，一个PHP和JavaScript极客，我倾向于LESS，因为它便于引入和能够使用JavaScript的表达式以及文档属性。我怀疑我甚至接近真正理解在样式表中编程的可能行了，但是我仍坚持尝试。如果你在工作中有用到它们中的一个，或者两个都用，我很乐意听到关于它的更多内容，并看到你的成果。当然，技巧、诀窍、更正一直是很欢迎的。。

译注：翻译的有些仓促，如果有错误或者不妥的地方，欢迎指出。mixin这个单词，这里直译为“混入”了，不过感觉也不太合适，查了好久也没有见到非常合适的翻译，这里求达人指点。另外，不知道什么原因，lesscss.org貌似在贵国无法访问，大家可以直接访问LESS在git上的仓库，http://github.com/cloudhead/less.js，该项目的wiki也有和官方网站一样的文档，需要的话可以详细阅读下。——神飞

尽管现代浏览器已经支持了众多的CSS3属性，但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性，如border-radius、box-shadow或者transform等。它们有良好的文档、很好的测试并且最常用到，所以如果你最近在设计网站，你很难能脱离它们。

但是，隐藏在浏览器的大宝库中是一些高级的、被严重低估的属性，但是它们并没有得到太多的关注。或许它们中的一些应该这样(被无视)，但是其它的属性应该得到更多的认可。最伟大的财富隐藏在Webkit的下面，而且在iPhone、iPad和Android apps的时代，开始了解它们会灰常有用。就连Firefox等使用的Gecko引擎，也提供了一些独特的属性。在本文中，我们将看一下鲜为人知的CSS 2.1和CSS3属性以及它们在现代浏览器中的支持情况。

说明: 对于每个属性，我们这里规定：”WebKit” 即指代使用Webkit内核的浏览器(Safari、Chrome、iPhone、iPad、Android等)，”Gecko“指代采用Gecko内核的浏览器(Firefox等)。然后有的属性是官方CSS 2.1. 规范的一部分，这意味着更多的浏览器甚至一些古老的浏览器也会支持它们。最后，一个CSS3 的标签标明遵守这个标准，被最新的浏览器版本——比如Firefox 4、Chrome 10、Safari 5、Opera 11.10以及IE9支持的属性。

WebKit特有属性

-webkit-mask

这个属性是相当强大的，所以详细的介绍超出了本文的范畴，它非常值得深入研究，因为它可以在实际应用中为你省掉很多时间。

-webkit-mask让为一个元素添加蒙板成为可能，从而你可以创建任意形状的花样。蒙板可以是CSS3渐变或者半透明的PNG图片。蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。相关的属性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，严重依赖来自于background中的语法。更多信息请查看webkit的博客和下面的链接。

示例

图片蒙板:

1
2
3
4

.element{
background: url(img/image.jpg) repeat;
-webkit-mask: url(img/mask.png);
}

示例

渐变蒙板:

1
2
3
4

.element2 {
background: url(img/image.jpg) repeat;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

扩展阅读: Safari Developer Library

-webkit-text-stroke

CSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color: transparent属性，你还可以创建镂空的字体！

示例

为所有的<h1>标题设定一个2px宽的蓝色边框:

1

h1 {-webkit-text-stroke: 2px blue}

另一个特性是，通过设定1px的透明边框，可以让文字变得平滑:

1

h2 {-webkit-text-stroke: 1px transparent}

创建红色镂空字体：

1
2
3
4

h3 {
color: transparent;
-webkit-text-stroke: 4px red;
}

扩展阅读: Safari Developer Library

-webkit-nbsp-mode

换行有时是很棘手的事情：有时你希望文字在适当的地方断行(而不是折行)，有时你又不想这样。一个能控制这个的属性就是-webkit-nbsp-mode，它让你可以改变&nbsp;空白符的行为，强制文字在它被用到的地方断行。通过设置值为space即可实现。

扩展阅读: Safari Developer Library

-webkit-tap-highlight-color

这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。

想要禁用这个高亮，设置颜色的alpha值为0即可。

示例

设置高亮色为50%透明的红色:

1

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

浏览器支持: 只有iOS(iPhone和iPad).

扩展阅读: Safari Developer Library

zoom: reset

通常来说，zoom是一个IE专用的属性。但是webkit也开始支持它了，而且使用值reset，webkit可以实现不错的效果(有趣的是，IE不支持这个值)。它让你重设掉浏览器中正常的缩放行为——如果某个元素被声明了zoom:reset，页面上的其它元素在用户放大页面的时候都会跟着放大。

注：其实，我们常用来禁用chrome强制字体大小的时候用到的-webkit-text-size-adjust:none;也是可以实现类似的效果，不同的是，设置该属性的元素内的文字不会被放大/缩小，但是页面上的其它元素则会变化——神飞

扩展阅读: Safari Developer Library

-webkit-margin-collapse

这个属性属于限制级的，但是它还是非常值得关注。通常，两个相邻的元素的margin会折叠起来(collapse)。这意味着第一个元素的底部的边距和第二个元素的头部边距会被合并到一起。

最常见的例子就是两个相邻的<p>元素会共享他们的margin值。想要控制这个表现，我们可以使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等属性。默认值是collapse，值separate则停止共享margin值，也就是说，第一个元素的底部边距和第二个元素的头部边距会正常叠加。

扩展阅读: Safari Developer Library

-webkit-box-reflect

你还记得几乎每个网站都把他们的网站logo或者头部的文字做成倒影的那个年代吗？谢天谢地，那个年代已经过去了，但是如果你要在一些按钮、导航、或者其他UI元素上更好的使用这个技术，-webkit-box-reflect是更好的选择。

这个属性接受above、below、left和right四个关键词，它们设置倒影的方向，它们和一个设置元素和它的倒影建的距离的数字一起使用。同时，蒙板图片也是同样支持的(看上面的-webkit-mask部分，不要搞混了哈)。倒影会自动生成并对布局没有影响。下面的元素只用了CSS，第二个按钮用了-webkit-box-reflect属性。

示例

这个倒影会出现在它的父元素的下面并有5px的间距:

1

-webkit-box-reflect: below 5px;

这个倒影会投射到元素的右边，没有间距。然后，一个蒙板将会被应用(url(mask.png)):

1

-webkit-box-reflect: right 0 url(mask.png);

扩展阅读: Safari Developer Library

-webkit-marquee

另一个属性让我们回到美好的从前：那个遍地marquee(跑马灯)的年代。有趣的是这个已经被遗弃的标签反而在现在变的很有用，比如我们在比较小的手机屏幕上切换内容，如果不断行的话文字将不能完全显示。

ozPDA创建的这个天气的应用很好的使用了它。 (如果你木有看到变换的文字，可以尝试换一个城市来体验。需要使用WebKit内核浏览器)

示例

1
2
3
4
5
6
7
8

.marquee {
white-space: nowrap;
overflow:-webkit-marquee;
width: 70px;
-webkit-marquee-direction: forwards;
-webkit-marquee-speed: slow;
-webkit-marquee-style: alternate;
}

要让marquee工作需要一些前提条件。首先，white-space必须设置为nowrap，这样才能让文字不自动换行，其次，overflow必须设置为-webkit-marquee，宽度也要设置为比文字实际长度小的数值。

剩下的属性确保文字从左边滚动到右边(-webkit-marquee-direction)、来回移动(-webkit-marquee-style)以及以比较低的速度移动(-webkit-marquee-speed)。其它的属性有-webkit-marquee-repetition，用来定义marquee重复的次数，-webkit-marquee-increment, 定义每次递增的速度变化。

注：虽然HTML的marquee标签在XHTML中被抛弃了，但是各浏览器还是支持的，但是有一个问题就是，marquee标签可能会占用比较大的cpu，大猫对其进行了深入的研究，结论是marquee的速度不能太快，而webkit用-webkit-marquee属性是最好的——神飞。

扩展阅读: Safari Developer Library

Gecko特有属性

font-size-adjust

这个有用的CSS3属性目前只有Firefox支持。我们可以用它来设定指定元素的文字大小(font-size)应该相对于小写字母的高度(x-height)而不是大写字母的高度(cap height)。比如，Verdana比同型号的Times字体更清晰，它有着更矮的x-height。为了弥补这个缺陷，我们可以用font-size-adjust属性来纠正后者。

该属性在拥有不同的x-height的字体上非常有用。即便你在小心的使用小号字体，在问题出现时font-size-adjust也能提供解决方案。

示例

如果由于某种原因用户的电脑上没有安装Verdana，那么Arial就会被修正，从而和Verdana有相同的长宽比(0.58)。

1
2
3
4
5

p {
font-family:Verdana, Arial, sans-serif;
font-size: 12px;
font-size-adjust: 0.58;
}

浏览器支持: Gecko.

扩展阅读: Mozilla Developer Network

image-rendering

n年前，图片并不会被按照其原始大小显示，而是被设计师给缩放掉。取决于缩放的大小和上下文，图片可能会在浏览器中展现的不太好或者干脆就是错掉了的。现在，浏览器有了更好的算法来显示缩放的图片，不过，在你的图片被缩放后完全的控制其表现也是件很赞的事情。

如果你的图片有比较锐的线条并希望他们在缩放后保持它，这个Gecko私有属性就显得特别有用。相关的值是-moz-crisp-edges。同样的算法也用在optimizeSpeed，而auto 和optimizeQuality 定义为标准行为(用可行的最佳质量来缩放元素)。 image-rendering 属性同样可以用于<video> 和<canvas>元素，和用于背景图片一样。这是个CSS3 标准属性，但是目前只有Firefox支持。

值得注意的是，-ms-interpolation-mode: bicubic，尽管它是个IE专有属性。然而，它让Internet Explorer 7 在缩放图片后将其渲染为比较高的质量。由于这个浏览器默认处理的很烂，所以这个属性可能会很有用。

浏览器支持: Gecko.

扩展阅读: Mozilla Developer Network

-moz-border-top-colors

这个属性可以归类为’养眼’。它让你可以在border宽度大于1px的时候为其设置不同的边框颜色。当然-moz-border-bottom-colors, -moz-border-left-colors 和-moz-border-right-colors也是可用的。

不爽的是，没有一个简写的-moz-border-colors 缩写，所以每个边框都要分开设置。同时，border-width要和给到的颜色的数量保持一致，否则，最后的那个颜色值会填充到剩下的宽度。

示例

这个例子中，元素的左右两边边框会是标准的橙色，上下则有种类似渐变的颜色——红黄蓝三色。

1
2
3
4
5

div {
border: 3px solid orange;
-moz-border-top-colors: red yellow blue;
-moz-border-bottom-colors: red yellow blue;
}

浏览器支持: Gecko.

扩展阅读: Mozilla Developer Network

混合属性

-webkit-user-select 和 -moz-user-select

或许你常常不希望用户在你的网站上选择文本，无论是否是出于版权的原因。通常大家会有js来实现，另一个方案就是，将-webkit-user-select 和-moz-user-select 的值设为none。

请谨慎使用这个属性：因为大部分用户是来查看信息的，他们可以复制并存储下来以备将来之用，所以这种方法既无用也无效。如果你禁用了复制粘贴功能，用户还是可以通过查看源文件来获取到他们想要的内容。搞不懂这个属性为什么会被webkit和gecko支持。

浏览器支持: WebKit, Gecko.

扩展阅读: Safari Developer Library, Mozilla Developer Network

-webkit-appearance 和 -moz-appearance

你曾经想过将一张图片伪装成单选按钮么？或者，一个输入框看起来像一个复选框？那么现在appearance 出现了。即便你并不想要让一个链接看起来总是像个按钮，下面这个例子也可以让你了解到，只要你愿意就可以做到的：

示例

1
2
3
4

a {
-webkit-appearance: button;
-moz-appearance: button;
}

浏览器支持: WebKit, Gecko.

扩展阅读: Safari Developer Library, Mozilla Developer Network, Mozilla Developer Network,CSS3 appearance简介

text-align: -moz-center/-webkit-center

这是一个属性（或者精确来说，是个“属性值”）的存在很让人惊喜啊。要让一个块级元素居中，大家通常将其设置为margin:0 auto。但是，现在你也可以将元素的容器的text-align属性设置为-moz-center 和 -webkit-center。相应的，你也可以通过设置-moz-left、-webkit-left或-moz-right、-webkit-right将元素居左或者居右。

浏览器支持: WebKit, Gecko.

扩展阅读: Safari Developer Library

CSS 2.1属性

counter-increment

你是否经常希望你可以让一个有序列表或者一篇文章的所有标题自动编号？不幸的是，目前尚未有CSS3属性支持。但是在CSS 2.1中，counter-increment 提供了一个解决方案。这就意味着它已经出现好些年了，而且在IE8中就已经支持了。

配合:before 伪元素和content 属性，counter-increment可以为所有的HTML标签添加自动的编号。即便是嵌套的编码也是支持的。

示例

要给标题编码，先将计算器重设一下:

1

body {counter-reset: thecounter}

下面的样式让每一个<h1>标题都有一个”Section”的前缀，然后其后面的数字自动的递增1(这是默认的，可以省略掉)，这里thecounter是计算器的名称:

1
2
3
4

.counter h1:before {
counter-increment: thecounter 1;
content:"Section"counter(thecounter)":";
}

示例

对于一个嵌套编码的列表，重设计数器，然后关掉<ol>的自动编码，因为它是无嵌套的:

1
2
3
4

ol {
counter-reset: section;
list-style-type: none;
}

然后，每个<li>设置为自动编号，分割符是一个点(.)，后面跟着一个空格

1
2
3
4

li:before {
counter-increment: section;
content: counters(section,".")"";
}

HTML代码：

1
2
3
4
5
6
7
8
9
10

<ol>
	<li>item</li> <!-- 1 -->
	<li>item <!-- 2 -->
		<ol>
			<li>item</li> <!-- 1.1 -->
			<li>item</li> <!-- 1.2 -->
		</ol>
	</li>
	<li>item</li> <!-- 3 -->
<ol>

浏览器支持: CSS 2.1.，所有的现代浏览器，IE 7+.

扩展阅读: W3C，CSS content, counter-increment 和 counter-reset详解

quotes

你会因为你的CMS不知道如何正确转换引用符号而纠结么？那么开始使用quotes属性吧。这样你就可以自定义任何符号了。然后你就可以用:before和:after伪元素为任何期望的元素指定引号了，悲催的是，webkit浏览器不支持这个属性——经测试，chrome 11已经开始支持这个属性了（之前的版本没有测试）。

示例

前面的两个符号决定第一级引用内容的引号，后面的两个用于二级引用，以此类推：

1
2
3

q {
quotes: '«' '»' "‹" "›";
}

下面两行用于为选定元素指定引号:

1
2

q:before {content: open-quote}
q:after {content: close-quote}

这样，<p><q>This is a very <q>nice</q> quote.</q></p>看起来将会是酱紫的：
«This is a very ‹nice› quote.»

浏览器支持: CSS 2.1.,除了WebKit，IE 7和IE6的所有现代浏览器。不过chrome是支持的。。。

扩展阅读: W3C

问题：要直接的添加符号，CSS文档必须要设置为UTF-8吗？这是一个很纠结的问题。遗憾的是，我不能给出一个明确的答案。我的经验是，不必要设置什么特定的字符集，然后utf-8字符集可能会出错，因为它显示错掉的字符(比如”»”)。而是用iso-8859-1 字符集，一切就都是正常的。

W3C这样描述：”由于上个例子中由’quotes’定义的引号方便的定位在电脑键盘上，高质量的字符则需要不同的10646字符集。”

你或许听说过但是没有记住的CSS3属性

接近尾声，让我们重温一些不太流行的以及不像border-radius和box-shadow那样被广泛需求的CSS3属性。

text-overflow

或许你会常常遇到这个问题：某个容器对于其内的文字来说太小了，然后你不得不用javascript来截断字符串并添加”…”符号以避免文字溢出。

忘掉它吧！采用CSS3和text-overflow: ellipsis，如果文字比它的容器的宽度要长的话，你就可以强制文字以”…”结束它。唯一的要求是设置overflow:hidden。不幸的是，Firefox不支持这个属性，但是貌似在最近的版本中将会提供支持。

示例

1
2
3
4

div {
width: 100px;
text-overflow: ellipsis;
}

浏览器支持: CSS 3，所有浏览器的最新版本，除了Firefox，IE从IE6开始支持，据说Firefox到6.0也会提供支持的——希望如此吧。

扩展阅读: W3C

word-wrap

当文字在一个比较窄的容器中时，它的某个部分可能会因为太长而不能正确的换行。比如链接就常常引起问题。如果你不想用overflow: hidden隐藏溢出的文字，那么你就可以设置 word-wrap 为break-word，它可以让字符串在到达容器的宽度限制时换行。

示例

1
2
3
4

div {
width: 50px;
word-wrap: break-word;
}

浏览器支持: CSS 3，所有现代浏览器。

扩展阅读: W3C

resize

如果你在使用Firefox或Chrome，那么你肯定注意到了文本框的右下角默认有个小的手柄，它可以让你调整它们的大小。这个标准的行为由CSS3 属性 resize: both实现。

但是它并不仅限于textarea。它可以用于所有的HTML元素。horizontal 和 vertical 值用于控制调整水平方向还是垂直方向。

请注意：对于display:block元素，如果设置了overflow:visible，resize属性将会无效(这一点原文描述不详——by 神飞)。

浏览器支持: CSS3, 除了Opera和IE以为的其它最新的浏览器。

扩展阅读: Safari Developer Library

background-attachment

当你为一个设置了overflow:auto的元素指定背景图片的时候，当内容太多而出现滚动条后，拖动滚动条就会发现背景图片的位置是固定的，而不是随着滚动条移动。如果你想要背景图片随着内容而滚动，可以设置background-attachment:local。

浏览器支持: CSS 3，除了Firefox以外的所有现代浏览器，Firefox是支持background-attachment属性的，只是不支持local值.

扩展阅读: W3C

text-rendering

随着越来越多的网站开始用@font-face来渲染文字，易读性开始被关注了。小号字体上，文字会更容易出现。由于目前还没有CSS属性控制显示在线字体的微妙细节，你可以利用text-rendering来启用kerning 和 ligatures。

Gecko 和WebKit 浏览器处理这个属性的方式很不一样。前者默认启用这个特性，而后者，你需要将其设置为optimizeLegibility。

浏览器支持: CSS3, 所有WebKit 和Firefox浏览器.

扩展阅读: W3C

transform: rotateX/transform: rotateY

如果你已经开始使用CSS3，那么你可能会比较熟悉transform: rotate()，这个在z轴上旋转元素的属性。

但是你是否也知道，它也可以更深入的旋转的(比如，围绕x轴和y轴)？ 这些变形结合-webkit-backface-visibility: hidden会更合适。

示例

如果你鼠标经过这个元素，它将会旋转180°，倒转过来:

1
2
3

div:hover {
transform: rotateY(180deg);
}

小技巧:如果只是映射一个元素，你可以设置transform为rotateX(180deg) (对应rotateY)或者设置transform 为scaleX(-1) (对应scaleY).

浏览器支持: CSS3, WebKit、firefox、Opera以及IE9

扩展阅读: W3C，你需要知道的CSS3 动画技术

结语

正如你希望见到的，还有很多未知的很有用的属性。他们中的很多仍然处于试验性阶段并且可能一直这样甚至最终可能会被浏览器摈弃。而有些有望在后续版本中被所有的浏览器支持。

然而，很难判断判断他们中的一些是好是坏，WebKit特有的属性随着iOS和Android的成功显得越来越重要。当然，一些CSS3属性多多少少已经可以使用了。

如果你不喜欢私有属性，你可以将它们视为实验直到可以在代码中实现以增强用户体验。同时，W3C的CSS validator 同样支持私有属性，它会返回警告而不是错误。

祝你体验快乐！

PS：本文提到了很多特性，但是只是个概览，其实基本上每个属性都可以深入研究下的，如果你有兴趣，欢迎深入研究并分享之，谢谢——神飞。

本文原作者Christian Krammer是最近很牛B的css3files.com的站长。

通常来说，CSS非常简单。但是当浏览器厂商开始实现CSS3特性，问题开始变得有些复杂了。不难，只是有些复杂。这可能包括两个方面：首先有些心得CSS3属性(比如，transition、渐变、transform等)不是那么简单，其次我们不得不使用浏览器厂商指定扩展。

直到你最喜欢用的IDE原生支持CSS3，你最好的伙伴将是CSS3生成器、手册、参考指南以及基于JS的方案。这正是本文要推荐的，这里将收集能够助你学习和使用CSS3的真正有用的工具。

生成器

• CSS3 Please!跨浏览器的CSS规则生成器，支持：border-radius、box-shadow、渐变(线性)、rgba色彩、transform (旋转)、transition和@font-face。
• CSS3 生成器支持border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和outline.
• CSS3 Sandbox有一些列的CSS3生成器：线性渐变、放射渐变、文字阴影、盒阴影、Transforms和文字描边。
• @font-face生成器来自于Font Squirrel的很好用的CSS3 @font-face 生成器。
• CSS3渐变生成器为Firefox和Webkit浏览器生成线性渐变。
• CSS 圆角生成用于Firefox、Webkit和标准CSS3语法的“border-radius”属性。
• Webkit CSS3 生成器简单的助你理解Webkit引入的CSS3特性。
• CSS3 学习工具动态为你的浏览器获取私有前缀并检测该属性是否被它支持。

JavaScript方案

• Modernizr一个确实很有用的JavaScript库，可以检测HTML5/CSS3的原生支持，并为你提供一种维护良好控制级别的方法，不管浏览器的能力。如果你更喜欢使用MooTools，你可以使用MooModernizr (MooTools 版本的Modernizr)
• Sizzle – JavaScript 选择器库一个纯Javascript选择器引擎，被设计用来方便的插入到一个主库中。Sizzle 实际上支持所有的CSS3 选择器——它甚至包括一些很不常用的选择器，比如忽略选择器(escaped selectors )(”.foo\\+bar”)、Unicode 选择器、以及在document序列中返回的结果。这也是jQuery使用的选择器引擎。
• YUI 选择器组件YUI CSS3 选择器组件，提供一个收集、过滤和测试HTML元素的稳定的简写方法。
• ie7-js一个让IE拥有兼容标准的浏览器一样的行为的JavaScript库。
• CSS3伪类选择器模拟ie-css3.js 可使Internet Explorer识别CSS3 伪类选择器并渲染任何使用它们定义的样式规则。简单滴在你的页面中引入这个脚本，然后在你的样式表中使用这些伪类选择器，然后IE就可以使用了。

参考指南

• CSS 3.0参考手册
  腾讯ISD WebTeam制作的一个CHM格式的参考手册，很全面，介绍+实例，推荐下载收藏；
• 我什么时候能用CSS3CSS3、HTML5、SVG以及其它即将可用的页面技术的浏览器兼容性列表；
• 浏览器支持清单使用Modernizr库检测你的浏览器支持的“高级”特性，包括CSS3特性和选择器的支持。
• CSS3选择器测试自动运行大量的判断你的浏览器是否支持一些CSS选择器的小测试；
• SelectORacle一个提供CSS2和CSS3选择器介绍的在线工具。简单的给它一些选择器，他就会返回选择器匹配的相关说明。
• CSS3手册与快速指南提供当前CSS3规范的列表，列出属性可用的值、常用的选择器模式参考，以type/单位组织，选择器类型参考和单位参考和信息(另有PDF 版本)；
• CSS3伪类SitePoint的CSS参考的相关部分内容；
• CSS3 速查手册CSS3属性、选择器类型以及可用的值的列表，PDF格式；

CSS3色彩名称

提供所有147种色彩的名字以及按照字母排序的值。

如有更多有用的工具，欢迎通过评论分享。

iPad终于发布了，那么如果用样式区分iPad和iPhone中的safari浏览器，Jason Grigsby做了一个有用的实验。

就绝大部分而言，iPad上的移动版safari和iPhone上的事一样的。我发现的一个不同是，iPad上的webkit支持基于方向(orientation)的CSS媒体查询(media query)声明。

我为iPad创建了一个简单的演示目标CSS的页面。

在CSS中使用orientation 非常简单，代码就行这样：

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

在这个例子中，两个CSS文件中的唯一不同就是隐藏其中的一个标题。该演示页面的HTML部分如下：

<h1 id=”portrait”>You’re Viewing in Portrait Mode</h1>
<h1 id=”landscape”>You’re Viewing in Landscape</h1>

portrait.css中的CSS只是简单的隐藏landscape部分的<h1>:

#landscape {display:none}

当然，landscape.css的作用与之相反。

你可以在最新版本的Safari/Chrome和Firefox中看到这个CSS查询。简单的改变你的浏览器的窗口大小，让其高度大于宽度，你就能看到效果了。

其实，将CSS褪去之后，不仅仅能够彰显CSS对于网站前端的重要性，更能体现网站的可用性！这也是检验一个网站可用性的最简单的方法之一。

废话不多说，脱了～～

PS：其实今年WebReBuild.org组织了今年国内的裸奔节，感兴趣的童鞋请速速前往围观：http://naked.webrebuild.org/

PS2：同时，欢迎对赤裸裸的前端观察的页面结构提出建设性意见 :)

译文：CSS Sprites：鱼翅还是三鹿？

无处不在的 CSS sptites － 为数不多的几个可以直接跳过”流行”这个过程，而可以马上并且牢牢地跻身于最佳 CSS 实践之中的几个技术之一。虽然它真正流行是在 A List Apart 解释并认可这个技术之后，但是早在 2003 年 7 月份，Peter Stanicek 就已经开始谈论它了。

目前大多数的开发人员对这个技术都有相当地掌握，也有很多关于它的教程和文章。几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数，并且节省一些流量。这个技术被大量网站使用，包括使用了大型 sprite 的 Amazon .

但是这些被广泛热议的好处真的是值得的吗？设计师们是否在没有全面考虑到所有情况的情况下，在盲目地使用这个技术呢？设计师们是不是过于关注 CSS sprite 的流行，而忽略了其它应该仔细斟酌的因素了呢？ 这篇文章会讨论下使用 CSS sprite 的好处和坏处，尤其关注”滥用” sprites 的情况，而且会解释下为什么“滥用” sprite 其实是浪费时间。

浏览器缓存所有图片

sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。但是这真的有想象的那么好吗？

一般来说，浏览器会缓存所有的图片 – 无论图片 sprite 与否。sprite 技术只是在页面第一次加载的时候才会节省带宽，同时缓存也会对使用相同图片的其他页面有效。

Firefox 缓存显示的浏览器缓存的来自 amazon.com 的图片(在 Firefox 地址栏输入 “about:cache” 来查看)。

考虑到现在的普遍网速已经比 2003-2004 年时提出这个技术的时候要快多了，因此大量使用 sprite 技术就不是那么必要了。有一点需要明确，不是说不应该用 sprite，而是不应该为了有限的好处来滥用这个技术。

拼合图片的时间成本会增加

想象一下一个有三个状态的图片按钮是怎么制作的：代表不同的状态的图片需要临近放置在一起组成一张图片。在使用 Photoshop 或其他软件切图时，不同的状态并不会在一起；需要把他们单独切出来再合并为一张图片。

如果其中任一个图片状态需要改变，整个图片就需要重新制作保存。对一些设计师来说这不是什么问题，也许他们会单独保留不同按钮状态的源文件，这样需要合并的时候就简单了。但是这个过程有点复杂，远没有切出一个单独图片来的简单。

为了节省几 k 的流量和几个服务器请求(还只发生在第一次加载页面时)，sprite 技术是否真的值得？

编码和维护的时间成本会增加

图片切片输出之后，麻烦依然存在。虽然习惯这个过程之后，按钮 sprite 可以很简单地编码到 CSS 中，但是其他的 sprites 就不这么简单了。

单一的一个按钮一般会是个有定宽的 <ul> 元素。假如按钮的 sprite 是彼此独立的，就比较简单：<ul> 的宽高会和列表项和锚点的宽高一致，每个状态的 sprite 对齐摆放。sprite 的位置也可以很容易地根据每个按钮的宽高计算出来。

但是遇到之前提到的，像 Amazon 或者 Google 用到的大型 sprite 的情况时，会怎么样呢？你能想象到到维护这么一个文件，并且在 CSS 中改变 sprite 项的位置会是什么样吗？还有第一次创建 CSS 代码的情况？相对于一个可以轻松计算出来状态位置的简单按钮来说，大型的 sprite 会导致无尽地测试和图片状态的重新摆放。

一些用于定位 Google 的 sprite 图片的样式

Amazon 的 sprites 确实节省了至少 30 个 HTTP 连接，性能方面也确实有了很大的提高。但是把这些好处拿来和开发以及维护成本做个比较，再把缓存和网速等因素考虑进来，决定使用如此大型的 sprites 也许就不那么令人信服了。

Sprites 是否真的需要“维护”？

当然了，有些人不觉得 sprite 是首要引起头疼的问题。大部分情况下，一个 sprite 创建并编码完之后，就很少会被改动了，也不会受进行中的网站维护的影响。假如你感觉 sprite 维护不是个问题的话，那么也许使用大型 sprite 是最好的选择。

不是所有图片都是背景

另一个不提倡滥用 CSS sprite 的理由是这会导致开发人员错误地使用背景图片。有经验的开发人员会在项目中考虑可访问性问题，他们明白并不是每个图片都是背景。背景图片应该留给按钮以及用来装饰元素，而用来传达重要信息的图像应该内联在 XHTML 中。

Amazon 正确是使用了内联图像元素和装饰用的背景。

错误得使用 Sprites 影响可访问性

一些刚入门的开发人员会为了节省 HTTP 请求数(这是使用 CSS Sprite 一直强调的好处)而把所有的图片都当背景图片来处理 – 甚至是那些传达重要信息的图片。结果会导致一个缺乏可访问性的网站，也会降低 HTML 中 title 和 alt 的潜在益处。

因此，CSS sprite 本身没错，而且也不会引发可访问性问题(事实上，正确得使用会提高可访问性)。但是不分对错得过度使用 sprite 会阻碍具有可访问性和生产率方面的网页建设进程。

HTTP 请求数又如何？

许多人会据理力争，改善网站性能最重要的部分就是减少 HTTP 请求数。也要知道一项研究表明一个网站日常的访问者中 40-60% 比例都是没有浏览器缓存的。这是否足以说明应该在所有情况下使用大型 sprites 呢？或许是这样。尤其是考虑到用户的首次来访对一个网站的重要性。

Firefox 的 YSlow 插件显示 HTTP 请求数

以往的浏览器一般只允许 2 个并发 HTTP 连接，3.0 版本以来的 Firefox 和 IE8 默认允许 6 个并发 HTTP 连接。这意味着每台服务器有 6 个并发连接。引用 Steve Souders 的话：

“明白这是服务器的基础是很重要的。使用多个域名，如 1.mydomain.com, 2.mydomain.com, 3.mydomain.com, 等等，使开发人员可以完全利用服务器连接数。在所有域名是同一 IP 地址的 CNAME 时依然有效。”

因此，或许在按钮状态之外使用 CSS sprites 也是有益的，在未来，随着网络连接速度的加快和新版浏览器的性能提升，使用大型 sprites 所带来的好处将会变得不值一提。

那些 Sprites 生成器呢？

另一个喜爱大型 sprite 的理由是可以利用一些 sprite 生成器来简单得生成 sprite。对此类工具的详细讨论和评测不在本文讨论范围。但是从作者对此类工具的研究来看，帮助非常有限，并且维护这些 sprites 一样需要可观的工作量，这也是需要和收益权衡的。

有些工具，例如来自 Fondue 项目的这个，提供输出 CSS 选项。Steve Souders’ 的工具 SpriteMe 是另一个提供 CSS 编码选项的。SpriteMe 会把现有的网站背景图片转换成单张 sprite 图片（我之前提到的“大型” sprite）并提供下载以供编码入页面之中。然而这些工具只是有助于创建 sprite，并不能在维护方面提供多少帮助。Souder 的工具貌似对重新设计或布局的网站无效，而且只对那些现有的没有使用 sprite 方法的网站有用。

可以改进现有的工具，而且未来也会有新的工具出现。但是，鉴于以上提到的这些缺点，是否还存在这种可能，就是开发人员依然把精力集中在有限的所得上？

关注多个性能提升点

上面提到，HTTP 请求数是提升网站性能需要考虑的一个非常重要的因素。但是有别的方法可以减少连接数，包括合并脚本和样式表，使用远程库文件（即使用 Google 或者 Yahoo！提供的库文件托管）。

除了 HTTP 请求数之外还有很多开发人员可以关注的用于提升网站性能的因素。包括服务器启用 Gzip，正确的放置外链脚本，优化 CSS 语法，压缩较大的 JavaScript 文件，提升 Ajax 性能，避免使用已知的会引起性能问题的 JavaScript 语法，等等。

YSlow 显示了 HTTP 请求数之外可以提升网站性能的因素

如果开发人员花点时间来考虑下所有可以提升网站性能的因素，再权衡下利弊，也许就有较好的理由可以避免滥用 CSS sprite 了，并且会把精力放在那些物有所值的方面。

总结

请不要误解我所说的。许多顶级的 blogger 和开发人员已经称颂 sprite 的好处很多年了，最近几年又把这些意见推广到使用大型 sprite 上来了 – 因此应该认真得考虑下这些观点。但是，这种有着完善的体制和系统，使得网站维护任务简化并流水化的公司，并不是所有人都能进去的。大多数人都是独立工作，或者接受别人创建的项目。这类情况下，大型的 sprite 会导致得不偿失的麻烦。

糖伴西红柿的总结

标题有点醒目 :) 原标题的规矩翻译为 CSS Sprites：有用的技术还是潜在的麻烦？

关于 CSS Sprite，在 Web 标准交流会 第二期的时候讨论过。其实 CSS Sprite 是很有用处的。但是前提是不要超出一个度的限制。基本上很多问题最终都会归于如何适度地使用的问题。老话说：过犹不及，其实还是很有道理的。

对于减少 HTTP 请求数问题，可以稍作妥协，把图片分类，尽量把内容固定、后期不会有太多变动的图归入一个 sprite 中，例如一些 icon 。那些会经常改动的图片归入一类，分成几组 sprite。对于设计花哨而生命周期很短的专题来说，真得，花费在拼图上的时间和经历实在是有点浪费了。

关于老外的文章，我现在觉得有些絮叨了。或许很多人也会有这个感觉。其实应该反思下，据说日本有专门的小册子来教人做一些非常基础的东西，内容步骤细致到令人发指得地步。基础的东西大多人会不屑一顾，觉得别人都谈论奇技淫巧、高级应用了，我还在搞这些基础，多丢人啊。

基础的东西其实没那么简单的，有谁能真得掌握了这些看上去简单的基础呢？看一下这个基础问题你真的了解HTML吗?

曾经有一个高手送我一本书，他写了 ”Back to basic“ 送我，我在这里送给大家，希望大家都能踏踏实实地努力进步。

色彩缩写

色彩的缩写最简单，在色彩值用16进制的时候，如果每种颜色的值相同，就可以写成一个：

1

color：#113366

可以简写为

1

color：#136

所有用到16进制色彩值的地方都可以使用简写，比如background-color、border-color、text-shadow、box-shadow等。

盒子大小

这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。盒子有上下左右四个方向，每个方向都有个外边距：

1
2
3
4

margin-top:1px;
margin-right:1px;
margin-botton:1px;
margin-left:1px;

这四个值可以缩写到一起：

1

margin:1px 1px 1px 1px;

缩写的顺序是上->右->下->左。顺时针的方向。相对的边的值相同，则可以省掉：

1
2
3
4

margin:1px;//四个方向的边距相同，等同于margin:1px 1px 1px 1px;
margin:1px 2px;//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px
margin:1px 2px 3px;//右边距和左边距相同，等同于margin:1px 2px 3px 2px;
margin:1px 2px 1px 3px;//注意，这里虽然上下边距都为1px，但是这里不能缩写。

边框(border)

border是个比较灵活的属性，它有border-width、border-style、border-color三个子属性。

1
2
3

border-width:数字+单位;
border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ;
border-color: 颜色 ;

它可以按照width、style和color的顺序简写：

1

border:5px solid #369;

有的时候，border可以写的更简单些，有些值可以省掉，但是请注意哪些是必须的，你也可以测试一下：

1
2
3
4
5

border:groove red;  //大家猜猜这个边框的宽度是多少？
border:solid;  //这会是什么样子？
border:5px;  //这样可以吗？
border:5px red; //这样可以吗？？
border:red; //这样可以吗？？？

通过上面的代码可以了解到，border默认的宽度是3px，默认的色彩是black——黑色。默认的颜色是该规则中的color属性的值，而color默认是黑色的(多谢 @birdstudio 的提醒 )。border的缩写中border-style是必须的。

同时，还可以对每条边采用缩写：

1
2
3
4

border-top:4px solid #333;
border-right:3px solid #666;
border-bottom:3px solid #666;
border-left:4px solid #333;

还可以对每个属性采用缩写：

1
2
3

border-width：1px 2px 3px; //最多可用四个值，缩写规则类似盒子大小的缩写，下同
border-style：solid dashed dotted groove;
border-color:red blue white black;

outline

outline类似border，不同的是border会影响盒模型，而outline不会。

1
2
3

outline-width:数字+单位;
outline-style: none || dashed || dotted || double || groove || inset || outset || ridge || solid ;
outline-color: 颜色 ;

可以缩写为：

1

outline:1px solid red;

同样，outline的简写中，outline-style也是必须的，另外两个值则可选，默认值和border相同。

背景(background)

background是最常用的简写之一，它包含以下属性：

1
2
3
4
5

background-color: color || #hex || RGB(% || 0-255) || RGBa;
background-image:url();
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-position: X Y || (top||bottom||center) (left||right||center);
background-attachment: scroll || fixed;

background的简写可以大大的提高css的效率：

1

background:#fff url(img.png) no-repeat 0 0;

background的简写也有些默认值：

1

background:transparent none repeat scroll top left ;

background属性的值不会继承，你可以只声明其中的一个，其它的值会被应用默认的。

font

font简写也是使用最多的一个，它也是书写高效的CSS的方法之一。

font包含以下属性：

1
2
3
4
5
6

font-style: normal || italic || oblique;
font-variant:normal || small-caps;
font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (number+unit) || (xx-small - xx-large);
line-height: normal || (number+unit);
font-family:name,"more names";

font的各个属性也都有默认值，记住这些默认值相对来说比较重要：

1
2
3
4
5
6

font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;

事实上，font的简写是这些简写中最需要小心的一个，稍有疏忽就会造成一些意想不到的后果，所以，很多人并不赞成使用font缩写。

不过这里正好有个小手册，相信会让你更好的理解font的简写：

列表样式

可能大家用的最多的一条关于列表的属性就是：

1

list-style:none

它会清除所有默认的列表样式，比如数字或者圆点。

list-style也有三个属性：

1
2
3

list-style-type:none || disc || circle || square || decimal || lower-alpha || upper-alpha || lower-roman || upper-roman
list-style-position:  inside || outside || inherit
list-style-image:  (url) || none || inherit

list-style的默认属性如下：

1

list-style:disc outside none

需要注意的是，如果list-tyle中定义了图片，那么图片的优先级要比list-style-type高，比如：

list-style:circle inside url(../img.gif)

这个例子中，如果img.gif存在，则不会显示前面设置的circle符号。

PS:其实list-style-type有很多种很有用的样式，感兴趣的同学可以参考一下：https://developer.mozilla.org/en/CSS/list-style-type

border-radius(圆角半径)

border-radius是css3中新加入的属性，用来实现圆角边框。这个属性目前不好的一点儿是，各个浏览器对它的支持不同，IE尚不支持，Gecko(firefox)和webkit(safari/chrome)等需分别使用私有前缀-moz-和-webkit-。更让人纠结的是，如果单个角的border-radius属性的写法在这两个浏览器的差异更大，你要书写大量的私有属性：

1
2
3
4
5
6
7
8
9

-moz-border-radius-bottomleft:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;

呃，是不是你已经看的眼花了？这只是要实现左上角不是圆角，其它三个角都是圆角的情况。所以对于border-radius，神飞强烈建议使用缩写：

1
2
3

-moz-border-radius:0 6px 6px;
-webkit-border-radius:0 6px 6px;
border-radius:0 6px 6px;

这样就简单了很多。PS:不幸的是，最新的Safari(4.0.5)还不支持这种缩写… (thanks @fireyy)

就总结这么多，还有其它的可以缩写的属性吗？欢迎大家提出一起讨论。

参考资源

• 常用CSS缩写语法总结
• CSS Shorthand Guide
• Efficient CSS with shorthand properties
• Mozilla Developer Center:CSS Reference
• CSS Font Shorthand Property Cheat Sheet

为了显示一个渐变而专门制作一个图片的做法是不灵活的，而且很快会成为一种不好的做法。但是遗憾的是，截至写这篇文章，可能还必须这样做，但是希望不会持续太久。多亏Firefox 和Safari/Chrome，我们现在可以使用最少的努力实现强大的渐变。在本文中，我们将展示CSS渐变的简单实现以及该属性在Mozilla和webkit内核浏览器中的不同。

PS：本文原文本来提供了一个视频，但是由于众所周知的原因，我们无法观看这个在Youtube上的视频，想看的同学请自己想办法观看(最高720P) : http://www.youtube.com/watch?v=9D2hyM5SSCE

Webkit

尽管Mozilla和Webkit通常对CSS3属性采取同样的语法，但是对于渐变，他们很不幸的不能达成一致。Webkit是第一个支持渐变的浏览器内核，它使用下面的结构：

1
2
3
4

/* 语法，参考自: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
/* 实际用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

不要担心这些语法会让你看花眼，我也是这样的！只要记得我们需要用一个逗号来隔开这个参数组。

• 渐变的类型? (linear)
• 渐变开始的X Y 轴坐标(0 0 – 或者left-top)
• 渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
• 开始的颜色? (from(red))
• 结束的颜色? (to(blue))

Mozilla

Firefox，从3.6版本才开始支持渐变，更喜欢和Webkit略微不同的语法。

1
2
3
4
5

/* 语法，参考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */ -moz-linear-gradient( [
<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
 
/* 实际用法*/
background: -moz-linear-gradient(top, red, blue);

• 请注意我们将渐变的类型——linear——放到了属性前缀中了
• 渐变从哪里开始? (top – 我们也可以使用度数，比如-45deg)
• 开始的颜色? (red)
• 结束的颜色? (blue)

Color-Stops

如果你不需要从一个颜色到另一个颜色的100%渐变怎么办？这就是color stop起作用的时候了。一个普遍的设计技术是使用一个较短而细微的渐变，比如：

注意顶部的浅灰色到白色的细小的渐变

在过去，标准的做法就是制作一个图片，并将其设为一个元素的背景图片，然后让其水平平铺。然而使用CSS3，这是个小Case。

1
2
3
4

background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
border-top: 1px solid white;

这次，我们让渐变结束于8%，而不是默认的100%。请注意我们也在头部采用了一个边框，以形成对比。这很常用。

如果我们想要添加多一种(几种)颜色，我们可以这样做：

1
2
3

background: white; /* 备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);

• 对于-moz 版本，我们定义，从元素的20%的高度的地方开始是红色。
• 而对于-webkit，我们使用color-stop，采用两个参数：哪里开始停止，使用哪种颜色。

IE

IE并不支持CSS渐变，但是提供了渐变滤镜，可以实现最简单的渐变效果：

1
2

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')"; /* IE8 */

PS：事实上，我们在《RGBa色彩的浏览器支持》提到的IE的解决方法，就是使用这个渐变滤镜。

关于CSS渐变的一些要点：

• 尽可能的使用它。如果让IE用户看到一个固定的纯色，我鼓励你使用这种方法；
• IE6/7/8, Opera, Safari 3, 和Firefox 3 不能渲染CSS3 渐变，Firefox 和Safari用户通常经常升级浏览器，而Chrome的自动升级机制会在后台自动升级，所以这并不是个大问题；
• 总是为不支持这些浏览器私有属性的浏览器应用一个默认的，纯色背景；
• 永远不要使用红色到蓝色的渐变，就像我用作例子的这种；
• 页面无须在每个浏览器里面看起来完全一样！
• Firefox可以使用角度来设定渐变的方向，而webkit只能使用x和y轴的坐标。

以下文档描述了应用在 Mozilla UI 中优化 CSS 文件的规则。第一部分是对于 Mozilla 样式系统分类规则的一般性讨论。在了解这个系统的基础上，后续部分包含了一些指南，书写可以利用这个样式系统实践优点的样式的指南。

样式系统如何分类规则

样式系统把规则分为四大类。理解这些类是很重要的，因为对于规则的匹配来说他们是首先要考虑的。之后的段落中会使用“主选择符”这个说法。主选择符是指选择符最右边的部分(最终要匹配的那个元素，而不是它的祖先元素)。例如，在以下规则中：

a img, div > p, h1 + [title] {}

主选择符是 “img”, “p”, 和 “[title]“。

ID 规则

ID 选择符作为主选择符的规则。

例如：

• button#backButton { } /* ID 类别的规则 */
• #urlBar[type="autocomplete"] { } /* ID 类别的规则 */
• treeitem > treerow > treecell#myCell:active { } /* ID 类别的规则 */

Class 规则

如果一条规则有一个指定的 class 作为主选择符，就被归入此类。

例如：

• button.toolbarButton { } /* 基于 class 的规则 */
• .fancyText { } /* 基于 class 的规则 */
• menuitem > .menu-left[checked="true"] { } /* 基于 class 的规则 */

Tag 规则

如果主选择符不是 ID 或者 class，那么下一个类很可能就是 tag 分类。如果一条规则指定 tag 为主选择符，就被归入此类。

例如：

• td { } /* 基于 tag 的规则 */
• treeitem > treerow { } /* 基于 tag 的规则 */
• input[type="checkbox"] { } /* 基于 tag 的规则 */

全局规则

除以上分类之外都归入此类。

例如：

• [hidden="true"] { } /* 全局规则 */
• *{} /* 全局规则 */
• tree > [collapsed="true"] { } /* 全局规则 */

样式系统如何匹配规则

样式系统从最右边的选择符开始向左侧移动来匹配一条规则。样式系统会一直向左匹配选择符直到规则匹配完毕或者由于出错停止匹配。

对于规则分类的第一步发生在主选择符类别基础上。这个分类的目的是把那些不需要浪费时间匹配的规则过滤出来。这是显著提升性能的重点。对于一个给定的需要匹配的元素，规则越少，样式的渲染越快。例如，元素有一个 ID，那么只有和元素 ID 匹配的 ID 规则会被检索。只有和元素的 class 匹配的 class 规则会被检索。只有和 tag 匹配的 tag 规则会被检索。全局规则总是会被检索。

高效 CSS 指南

避免全局规则

确保规则不以全局分类结束

不要给 ID 分类规则指定标签名或者 class

如果有一条样式规则是以 ID 选择符为主选择符的，就别再画蛇添足的加上标签名了。ID 都是唯一的，因此加上标签名反而会无谓地拖慢匹配过程。(当有不同元素使用同一类名，而又需要动态地改变其中一个元素的类名来针对不同情况应用不同样式时是个例外。)

• BAD – button#backButton { }
• BAD – .menu-left#newMenuIcon { }
• GOOD – #backButton { }
• GOOD – #newMenuIcon { }

不要给 class 分类规则指定标签名

和以上规则类似，所有的类名也是唯一的。标签和类名连缀的写法是一个惯例(但是，如果设计的变更使得需要改变标签就会有灵活性的问题，因为也需要改变 class — 最好选用具有严格语义的名字，这种灵活性也是分离样式表的目标之一)。

• BAD – treecell.indented { }
• GOOD – .treecell-indented { }
• BEST – .hierarchy-deep { }

尽量把规则应用到最明确的类上。

拖慢系统最大的一个原因是有太多的 tag 分类规则了。通过给元素增加类名，可以把这些 tag 类里的规则分一部分去class 分类，就可以不需要浪费时间来试图给一个标签匹配那么多的的规则了。

• BAD – treeitem[mailfolder="true"] > treerow > treecell { }
• GOOD – .treecell-mailfolder { }

避免后代选择符

CSS 中，后代选择符(descendant)^[注1]的耗能高的可怕，尤其是选择符的规则是在 tag 或者全局分类中。子选择符(child selector)则经常是真正所需。如果没有主题模块所有者的明确允许，UI CSS 中禁止使用后代选择符。

• BAD – treehead treerow treecell { }
• BETTER, BUT STILL BAD (see next guideline) – treehead > treerow > treecell { }

Tag 类规则中最好不要包含后代选择符

避免使用具有 tag 类规则的后代选择符。这会明显地增加匹配时间（尤其是这些规则会被多次匹配时）。

• BAD – treehead > treerow > treecell { }
• BEST – .treecell-header { }

小心子选择符的使用

要小心使用子代选择符。如果有别的方式可以不用，就不要用子选择符。尤其是子选择符被大量使用在 RDF 树和类似的菜单中时。

• BAD – treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

要注意模版中来自 RDF 的属性是可以复制的！可以利用这一点把 RDF 属性复制到需要改变那个属性的子元素上。

• GOOD – .tree-folderpane-icon[IsImapServer="true"] { }

倚赖继承

了解并使用那些可以继承的属性。XUL widgetry^[注2] 已经明确设置了，因此可以把 list-style-image 或者 font 规则应用到父级标签上，它将渗透进匿名内容。因此就不需要浪费时间为那些匿名内容写规则了。

• BAD – #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }
• GOOD – #bookmarkMenuItem { list-style-image: url(blah); }

上例中，样式化匿名内容的需求（没有理解 list-style-image 可以继承）导致了一条 class 类规则。其实这条规则应该属于最明确的一类 — ID 类规则。

要记住，尤其是那些匿名内容，它们都有同样的 class。上面那个不好的例子导致需要检查每个菜单的图标是否包含在 bookmarks 菜单项中。这是非常可怕的高昂消耗（有很多菜单）；除 bookmarks 菜单之外，这条规则不应该被其他任何菜单想检查。

使用 -moz-image-region

把一堆图片放到一个单独的图片文件中，并用 -moz-image-region^[注3] 选中会有显著的性能提升。()

注1: 后代选择符(descendant selector) 子选择符(child selector) 是有区别的。单从字面来讲，后代选择符，顾名思义包括儿子、孙子、重孙子等所有后代; 子选择符只是指儿子，就不管那帮孙子了。

注2: XUL widgetry 不清楚是啥。

注3: 貌似想法和现在说的 CSS sprites 方法差不多，要知道这可是十年前(2000年)的文章啊。 – 糖伴西红柿