游戏页面：掐我一下

一、游戏简介

灵感来自小时候小霸王游戏机里面的打蜘蛛(长得像蜘蛛)游戏。

主角，也就是你了，是绿色（绿色表示自然，正义）的有炮口的方框框，通过发射子弹消灭黑色以及灰色的框框（黑色一般代表邪恶）。当页面上全部的灰色系的方框框消灭干净的时候，你就可以进入下一级别了。

右上角有与您相关的一些信息，有当前的级别，性命个数，还有就是分值了。见下图：

游戏界面背景白色，宽度960像素，高度为浏览器窗口的高度，所以此游戏的战绩与浏览器的尺寸有很大关系。宽屏浏览器有更好的游戏体验。

二、游戏具体操作

游戏比较粗糙，大致使用步骤如下：

打开
您可以狠狠地点击这里：打方块小游戏页面

开始
点击“开始游戏”按钮，如下图：

战斗
您可以使用”←”和”→”方向键水平移动躲避敌人的子弹攻击，然后按下空格键向敌人发动攻击。一次只能发射一颗子弹，在子弹未出界或是未击中目标时是不能发射第二颗子弹的。干掉页面上48个敌人，你就可以升级了，第二关，对付另外48个敌人，此时敌人攻击速度已经提高了不少，可要当心哦。

退出 or 挂掉
如果你无心恋战，又觉得把辛辛苦苦打来的分数扔掉可惜，您可以按下”ESC”键退出，选择“确定”，就可以保存您的分数了。

如果您的三条生命都死掉了，也会出现上面的弹出框，提示你保存您的分数，输入您的姓名，点击“保存”按钮，你就可以保存你的分数，同时看到自己的世界排名了，哇哈哈！

现在20分就是世界排名第2了，基本上就这些了，还有些挂掉的提示，升级的提示等，就不一一展示了，您自己摸索吧。

得分
干掉一个灰色的框框20分，干掉一个黑色的框框40分。现在我写此文的时候得分记录是1200分，是我自己创造了，哈哈，这个记录很好破的，只要能够进入第二关基本上就没有问题了。

注意
这是纯客户端的游戏，千万不要刷新页面，否则，要重玩啦。
为了有点效果，在击中目标的时候，我增加了爆炸的音效（js与as3交互），希望您喜欢。

可使用的键
本游戏共可以使用四个键：左右方向键，空格键以及Esc退出键。

三、欢迎提交bug

虽然游戏比较简单，但是我毕竟功力尚浅，难免会出现一些bug，欢迎通过评论的形式提出来，或是到这里提交bug。也欢迎其他形式的交流。

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

（本篇完）

颜色名称也称为颜色关键字，像我们熟悉的black表示黑色，white表示白色，blue表示蓝色等。实际上，在CSS的颜色定义中，总共有147种颜色关键字，所有者147种颜色名字均取自X Windows 系统，X 颜色名，所以即使这147个颜色名看上去不是很标准，支持也是非常不错的。

需要注意的是，在IE下，关于灰色，其中的字母”e”是不认的，它只认gray中的”a”而不认grey中的”e”，所以IE浏览器下，CSS3中的颜色名实际上只有140个，而不是147个。

其他就不多说了，关于这147个颜色名称关键字，请看下表：

名称	16进制	百分值	整数值	16进制缩写	示例
aliceblue	#f0f8ff	rgb(94.1%,96.9%,100%)	rgb(240,248,255)
antiquewhite	#faebd7	rgb(98%,92.2%,84.3%)	rgb(250,235,215)
aqua	#00ffff	rgb(0%,100%,100%)	rgb(0,255,255)	#0ff
aquamarine	#7fffd4	rgb(49.8%,100%,83.1%)	rgb(127,255,212)
azure	#f0ffff	rgb(94.1%,100%,100%)	rgb(240,255,255)
beige	#f5f5dc	rgb(96.1%,96.1%,86.3%)	rgb(245,245,220)
bisque	#ffe4c4	rgb(100%,89.4%,76.9%)	rgb(255,228,196)
black	#000000	rgb(0%,0%,0%)	rgb(0,0,0)	#000
blanchedalmond	#ffebcd	rgb(100%,92.2%,80.4%)	rgb(255,235,205)
blue	#0000ff	rgb(0%,0%,100%)	rgb(0,0,255)	#00f
blueviolet	#8a2be2	rgb(54.1%,16.9%,88.6%)	rgb(138,43,226)
brown	#a52a2a	rgb(64.7%,16.5%,16.5%)	rgb(165,42,42)
burlywood	#deb887	rgb(87.1%,72.2%,52.9%)	rgb(222,184,135)
cadetblue	#5f9ea0	rgb(37.3%,62%,62.7%)	rgb(95,158,160)
chartreuse	#7fff00	rgb(49.8%,100%,0%)	rgb(127,255,0)
chocolate	#d2691e	rgb(82.4%,41.1%,11.8%)	rgb(210,105,30)
coral	#ff7f50	rgb(100%,49.8%,31.4%)	rgb(255,127,80)
cornflowerblue	#6495ed	rgb(39.2%,58.4%,92.9%)	rgb(100,149,237)
cornsilk	#fff8dc	rgb(100%,97.3%,86.3%)	rgb(255,248,220)
crimson	#dc143c	rgb(86.3%,7.8%,23.5%)	rgb(220,20,60)
cyan	#00ffff	rgb(0%,100%,100%)	rgb(0,255,255)	#0ff
darkblue	#00008b	rgb(0%,0%,54.5%)	rgb(0,0,139)
darkcyan	#008b8b	rgb(0%,54.5%,54.5%)	rgb(0,139,139)
darkgoldenrod	#b8860b	rgb(72.2%,52.5%,4.3%)	rgb(184,134,11)
darkgray	#a9a9a9	rgb(66.3%,66.3%,66.3%)	rgb(169,169,169)
darkgreen	#006400	rgb(0%,39.2%,0%)	rgb(0,100,0)
darkgrey	#a9a9a9	rgb(66.3%,66.3%,66.3%)	rgb(169,169,169)
darkkhaki	#bdb76b	rgb(74.1%,71.8%,42%)	rgb(189,183,107)
darkmagenta	#8b008b	rgb(54.5%,0%,54.5%)	rgb(139,0,139)
darkolivegreen	#556b2f	rgb(33.3%,42%,18.4%)	rgb(85,107,47)
darkorange	#ff8c00	rgb(100%,54.9%,0%)	rgb(255,140,0)
darkorchid	#9932cc	rgb(60%,19.6%,80%)	rgb(153,50,204)
darkred	#8b0000	rgb(54.5%,0%,0%)	rgb(139,0,0)
darksalmon	#e9967a	rgb(91.4%,58.8%,47.8%)	rgb(233,150,122)
darkseagreen	#8fbc8f	rgb(56.1%,73.7%,56.1%)	rgb(143,188,143)
darkslateblue	#483d8b	rgb(28.2%,23.9%,54.5%)	rgb(72,61,139)
darkslategray	#2f4f4f	rgb(18.4%,31%,31%)	rgb(47,79,79)
darkslategrey	#2f4f4f	rgb(18.4%,31%,31%)	rgb(47,79,79)
darkturquoise	#00ced1	rgb(0%,80.8%,82%)	rgb(0,206,209)
darkviolet	#9400d3	rgb(58%,0%,82.7%)	rgb(148,0,211)
deeppink	#ff1493	rgb(100%,7.8%,57.6%)	rgb(255,20,147)
deepskyblue	#00bfff	rgb(0%,74.9%,100%)	rgb(0,191,255)
dimgray	#696969	rgb(41.1%,41.1%,41.1%)	rgb(105,105,105)
dimgrey	#696969	rgb(41.1%,41.1%,41.1%)	rgb(105,105,105)
dodgerblue	#1e90ff	rgb(11.8%,56.5%,100%)	rgb(30,144,255)
firebrick	#b22222	rgb(69.8%,13.3%,13.3%)	rgb(178,34,34)
floralwhite	#fffaf0	rgb(100%,98%,94.1%)	rgb(255,250,240)
forestgreen	#228b22	rgb(13.3%,54.5%,13.3%)	rgb(34,139,34)
fuchsia	#ff00ff	rgb(100%,0%,100%)	rgb(255,0,255)	#f0f
gainsboro	#dcdcdc	rgb(86.3%,86.3%,86.3%)	rgb(220,220,220)
ghostwhite	#f8f8ff	rgb(97.3%,97.3%,100%)	rgb(248,248,255)
gold	#ffd700	rgb(100%,84.3%,0%)	rgb(255,215,0)
goldenrod	#daa520	rgb(85.5%,64.7%,12.5%)	rgb(218,165,32)
gray	#808080	rgb(50.2%,50.2%,50.2%)	rgb(128,128,128)
green	#008000	rgb(0%,50.2%,0%)	rgb(0,128,0)
greenyellow	#adff2f	rgb(67.8%,100%,18.4%)	rgb(173,255,47)
grey	#808080	rgb(50.2%,50.2%,50.2%)	rgb(128,128,128)
honeydew	#f0fff0	rgb(94.1%,100%,94.1%)	rgb(240,255,240)
hotpink	#ff69b4	rgb(100%,41.1%,70.6%)	rgb(255,105,180)
indianred	#cd5c5c	rgb(80.4%,36%,36%)	rgb(205,92,92)
indigo	#4b0082	rgb(29.4%,0%,51%)	rgb(75,0,130)
ivory	#fffff0	rgb(100%,100%,94.1%)	rgb(255,255,240)
khaki	#f0e68c	rgb(94.1%,90.2%,54.9%)	rgb(240,230,140)
lavender	#e6e6fa	rgb(90.2%,90.2%,98%)	rgb(230,230,250)
lavenderblush	#fff0f5	rgb(100%,94.1%,96.1%)	rgb(255,240,245)
lawngreen	#7cfc00	rgb(48.6%,98.8%,0%)	rgb(124,252,0)
lemonchiffon	#fffacd	rgb(100%,98%,80.4%)	rgb(255,250,205)
lightblue	#add8e6	rgb(67.8%,84.7%,90.2%)	rgb(173,216,230)
lightcoral	#f08080	rgb(94.1%,50.2%,50.2%)	rgb(240,128,128)
lightcyan	#e0ffff	rgb(87.8%,100%,100%)	rgb(224,255,255)
lightgoldenrodyellow	#fafad2	rgb(98%,98%,82.4%)	rgb(250,250,210)
lightgray	#d3d3d3	rgb(82.7%,82.7%,82.7%)	rgb(211,211,211)
lightgreen	#90ee90	rgb(56.5%,93.3%,56.5%)	rgb(144,238,144)
lightgrey	#d3d3d3	rgb(82.7%,82.7%,82.7%)	rgb(211,211,211)
lightpink	#ffb6c1	rgb(100%,71.4%,75.7%)	rgb(255,182,193)
lightsalmon	#ffa07a	rgb(100%,62.7%,47.8%)	rgb(255,160,122)
lightseagreen	#20b2aa	rgb(12.5%,69.8%,66.7%)	rgb(32,178,170)
lightskyblue	#87cefa	rgb(52.9%,80.8%,98%)	rgb(135,206,250)
lightslategray	#778899	rgb(46.7%,53.3%,60%)	rgb(119,136,153)	#789
lightslategrey	#778899	rgb(46.7%,53.3%,60%)	rgb(119,136,153)	#789
lightsteelblue	#b0c4de	rgb(69%,76.9%,87.1%)	rgb(176,196,222)
lightyellow	#ffffe0	rgb(100%,100%,87.8%)	rgb(255,255,224)
lime	#00ff00	rgb(0%,100%,0%)	rgb(0,255,0)	#0f0
limegreen	#32cd32	rgb(19.6%,80.4%,19.6%)	rgb(50,205,50)
linen	#faf0e6	rgb(98%,94.1%,90.2%)	rgb(250,240,230)
magenta	#ff00ff	rgb(100%,0%,100%)	rgb(255,0,255)	#f0f
maroon	#800000	rgb(50.2%,0%,0%)	rgb(128,0,0)
mediumaquamarine	#66cdaa	rgb(40%,80.4%,66.7%)	rgb(102,205,170)
mediumblue	#0000cd	rgb(0%,0%,80.4%)	rgb(0,0,205)
mediumorchid	#ba55d3	rgb(72.9%,33.3%,82.7%)	rgb(186,85,211)
mediumpurple	#9370db	rgb(57.6%,43.9%,85.9%)	rgb(147,112,219)
mediumseagreen	#3cb371	rgb(23.5%,70.2%,44.3%)	rgb(60,179,113)
mediumslateblue	#7b68ee	rgb(48.2%,40.8%,93.3%)	rgb(123,104,238)
mediumspringgreen	#00fa9a	rgb(0%,98%,60.4%)	rgb(0,250,154)
mediumturquoise	#48d1cc	rgb(28.2%,82%,80%)	rgb(72,209,204)
mediumvioletred	#c71585	rgb(78%,8.2%,52.2%)	rgb(199,21,133)
midnightblue	#191970	rgb(9.8%,9.8%,43.9%)	rgb(25,25,112)
mintcream	#f5fffa	rgb(96.1%,100%,98%)	rgb(245,255,250)
mistyrose	#ffe4e1	rgb(100%,89.4%,88.2%)	rgb(255,228,225)
moccasin	#ffe4b5	rgb(100%,89.4%,71%)	rgb(255,228,181)
navajowhite	#ffdead	rgb(100%,87.1%,67.8%)	rgb(255,222,173)
navy	#000080	rgb(0%,0%,50.2%)	rgb(0,0,128)
oldlace	#fdf5e6	rgb(99.2%,96.1%,90.2%)	rgb(253,245,230)
olive	#808000	rgb(50.2%,50.2%,0%)	rgb(128,128,0)
olivedrab	#6b8e23	rgb(42%,55.7%,13.7%)	rgb(107,142,35)
orange	#ffa500	rgb(100%,64.7%,0%)	rgb(255,165,0)
orangered	#ff4500	rgb(100%,27.1%,0%)	rgb(255,69,0)
orchid	#da70d6	rgb(85.5%,43.9%,83.9%)	rgb(218,112,214)
palegoldenrod	#eee8aa	rgb(93.3%,91%,66.7%)	rgb(238,232,170)
palegreen	#98fb98	rgb(59.6%,98.4%,59.6%)	rgb(152,251,152)
paleturquoise	#afeeee	rgb(68.6%,93.3%,93.3%)	rgb(175,238,238)
palevioletred	#db7093	rgb(85.9%,43.9%,57.6%)	rgb(219,112,147)
papayawhip	#ffefd5	rgb(100%,93.7%,83.5%)	rgb(255,239,213)
peachpuff	#ffdab9	rgb(100%,85.5%,72.5%)	rgb(255,218,185)
peru	#cd853f	rgb(80.4%,52.2%,24.7%)	rgb(205,133,63)
pink	#ffc0cb	rgb(100%,75.3%,79.6%)	rgb(255,192,203)
plum	#dda0dd	rgb(86.7%,62.7%,86.7%)	rgb(221,160,221)
powderblue	#b0e0e6	rgb(69%,87.8%,90.2%)	rgb(176,224,230)
purple	#800080	rgb(50.2%,0%,50.2%)	rgb(128,0,128)
red	#ff0000	rgb(100%,0%,0%)	rgb(255,0,0)	#f00
rosybrown	#bc8f8f	rgb(73.7%,56.1%,56.1%)	rgb(188,143,143)
royalblue	#4169e1	rgb(25.5%,41.1%,100%)	rgb(65,105,225)
saddlebrown	#8b4513	rgb(54.5%,27.1%,7.5%)	rgb(139,69,19)
salmon	#fa8072	rgb(98%,50.2%,44.7%)	rgb(250,128,114)
sandybrown	#f4a460	rgb(95.7%,64.3%,37.6%)	rgb(244,164,96)
seagreen	#2e8b57	rgb(18%,54.5%,34.1%)	rgb(46,139,87)
seashell	#fff5ee	rgb(100%,96.1%,93.3%)	rgb(255,245,238)
sienna	#a0522d	rgb(62.7%,32.2%,17.6%)	rgb(160,82,45)
silver	#c0c0c0	rgb(75.3%,75.3%,75.3%)	rgb(192,192,192)
skyblue	#87ceeb	rgb(52.9%,80.8%,92.2%)	rgb(135,206,235)
slateblue	#6a5acd	rgb(41.6%,35.3%,80.4%)	rgb(106,90,205)
slategray	#708090	rgb(43.9%,50.2%,56.5%)	rgb(112,128,144)
slategrey	#708090	rgb(43.9%,50.2%,56.5%)	rgb(112,128,144)
snow	#fffafa	rgb(100%,98%,98%)	rgb(255,250,250)
springgreen	#00ff7f	rgb(0%,100%,49.8%)	rgb(0,255,127)
steelblue	#4682b4	rgb(27.5%,51%,70.6%)	rgb(70,130,180)
tan	#d2b48c	rgb(82.4%,70.6%,54.9%)	rgb(210,180,140)
teal	#008080	rgb(0%,50.2%,50.2%)	rgb(0,128,128)
thistle	#d8bfd8	rgb(84.7%,74.9%,84.7%)	rgb(216,191,216)
tomato	#ff6347	rgb(100%,38.8%%,27.8%)	rgb(255,99,71)
turquoise	#40e0d0	rgb(25.1%,87.7%,81.6%)	rgb(64,224,208)
violet	#ee82ee	rgb(93.3%,51%,93.3%)	rgb(238,130,238)
wheat	#f5deb3	rgb(96.1%,87.1%,70.2%)	rgb(245,222,179)
white	#ffffff	rgb(100%,100%,100%)	rgb(255,255,255)	#fff
whitesmoke	#f5f5f5	rgb(96.1%,96.1%,96.1%)	rgb(245,245,245)
yellow	#ffff00	rgb(100%,100%,0%)	rgb(255,255,0)	#ff0
yellowgreen	#9acd32	rgb(60.4%,80.4%,19.6%)	rgb(154,205,50)

关于此表，我还专门独立出来了一个页面，专门用来放置这个表格，方面查阅与收藏，您有兴趣可以狠狠地点击这里：CSS3下的147个颜色名称独立页面

数据来源：http://www.codenique…es.php

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

（完）

//zxx:以下为翻译全文，本着语言生动和本土化之原则，内容有编辑

注意：每周有那么几次，此列表会更新一些新的窍门，最终，本文会成为超级有用的资源。
//zxx:丑话说在前头，我可没功夫更新，所以，即使到您女儿出嫁那天，本文还是28项内容

前端的发展如此之迅猛，一不留神，大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话，可以把本文的内容作为必须了解的热身课程。

一、新的Doctype

仍在使用麻烦的，不可能记得住的XHTML文档类型？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果是，为什么还在用呢？使用新的HTML5文档类型代替吧。你会活得更久的——正如Douglas Quaid说的

<!DOCTYPE html>

我就琢磨着，为了HTML5搞个这厮代码，您可能会对这段代码究竟靠不靠谱表示怀疑。不用担心，如今这是可行的，只有老的浏览器需要一个特定的doctype（文档类型）。浏览器如果不知道doctype，就会很简单的以标准模式对包含的标签进行渲染。所以，妹妹你大胆的向前冲，把小心谨慎都抛到九霄云外，去拥抱新的HTML5文档类型吧。

二、图形元素(The Figure Element )

看看下面给图片添加的标示：

<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>  

文字裹在p标签里，与img标签各行其道，很难让人联想到这就是标题。HTML5通过采用<figure>元素对此进行了改正。当合<figcaption>元素组合使用时，我们就可以语义化地联想到这就是图片相对应的标题

<figure>
    <img src="path/to/image" alt="About image" />
    <figcaption>
        <p>This is an image of something interesting. </p>
    </figcaption>
</figure>

三、<small>重新定义

还在不久前，<small>元素被用来创建靠近logo且相关的副标题。这是个很有用的表现元素，但是，现在，这种用法可能就不正确了。<small>元素已经被重新定义了，指小字，因而更具可用性。试想下你网站底部的版权状态，根据对此元素新的HTML5定义，<small>可以正确地包裹这些信息。

small元素专指“小字”。

四、脚本(scripts)和链接(links)无需type

您可能现在仍在给link和script标签增加type属性。

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

这已经是老黄花菜，非必需品了。这意味着，这些标签都各自指向样式表和脚本。因此，我们可以把type属性一起干掉。

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

五、引号还是不要引号

<p class=myClass id=someId> Start the reactor. 

对此取舍你还得自己拿主意。如果你更倾向于结构化的文档，就算天塌下来，也要把引号牢牢拽在怀里。

六、内容可编辑

最新的浏览器有个很赞的新属性可以应用到元素上，叫做contenteditable。顾名思意，就是允许用户编辑元素内容包含的任意文本，包括子元素。类似的用途还有很多，像是简单的待办事项清单应用程序，可大大利用其本地存储的优势。

<ul contenteditable="true">
    <li>悼念遇难香港同胞 </li>
    <li>深圳特区30周年</li>
    <li>伊春空难</li>
</ul>

或者，根据前面所学到的一些技巧，我们可以把它写成：

<ul contenteditable=true>

您可以狠狠地点击这里：HTML5内容可编辑demo

七、Email输入(Inputs)

如果我们给表单输入框应用名为”email”的type属性，我们可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。没错，内置表单验证即将到来，由于一些显而易见的原因，我们还不能100%依赖内置验证，较旧的浏览器不认识这个”email”型，它们会简单地退回到普通文本框。

<form action="" method="get">
    <label for="email">邮箱:</label><input id="email" name="email" type="email" />
    <button type="submit">确定</button>
</form>

您可以狠狠地点击这里：HTML5邮箱内置验证demo

//zxx:经我小测了下，貌似仅在Chrome浏览器下有效果(xp系统)，当输入内容不是合法邮箱格式，点击“确定”按钮是没有反应的；当输入为合法邮箱，点击“确定”按钮才会提交刷新页面。

还应当指出，当谈到哪些元素和属性支持和不支持时，当前所有的浏览器都有点靠不住的。例如，Opera似乎支持电子邮件验证，但仅在name属性被指定的时候。而且，它不支持占位符属性，这个我们将会在后面学到。底线是不依赖于这种形式的验证…但你仍然可以使用它！

八、占位符(Placeholders)

Placeholders什么意思呢，就是文本框/文本域空间默认会有个文字提示，获得焦点时，此提示文字消失；失去焦点时如果内容为空，提示文字又出现。如下图所示：

这些表单控件里面显示的些提示性的文字就是占位符。按照以往的做法，我们需要使用一点JavaScript代码实现占位符效果，例如我之前的“文本框/域文字提示自动显示隐藏jQuery小插件”一文所展示的。当然，你需要设定一个初始的默认的value值，然后根据输入内容进行判断，从而决定文本框值的改变与否。如果您使用占位符(placeholders)属性，一切就轻松了。

<label for="email">邮箱:</label>
<input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />

根据我的测试，目前仅webkit核心的浏览器支持placeholders属性，像是Chrome5，Safari4，结果如下所示：

您可以狠狠地点击这里：HTML5占位符Demo

九、本地存储(Local Storage)

//zxx:原视频默认展示的是YouTube视频，不翻墙看不了，所以，这里展示来自另外一个网站的video。建议全屏观看，以看清其中的HTML与JavaScript代码

//zxx:根据视频内容，我自己做了个demo，关于本地存储的。

您可以狠狠地点击这里：HTML5本地存储Demo

IE8浏览器已经支持了本地存储，如下截图所示：

尽管显然不支持所有的浏览器，我们可以在Internet Explorer8时，Safari 4和Firefox 3.5下期待此工作方式。请注意，为了弥补旧的浏览器将无法识别本地存储，你应该先测试，以确定window.localStorage是否存在。

十、语义的Header和Footer

那些过往的日子：

<div id="header">
	...
</div>

<div id="footer">
	...
</div>

div嘛，很自然的，没有语义化的结构——即使在应用了id后。现在，通过HTML5，我们可以使用<header>和<footer>元素。以上的代码可以替换成：

<header>
	...
</header>

<footer>
	...
</footer>

它完全适合您有多个页眉和页脚的项目。

尽量不要混淆”header”和”footer”这些元素。他们只是指他们的容器。因此，将博客底部的，例如，元信息放在footer元素内部是说得通的。这同样也适用于header。

十一、更多HTML5表单特征(More HTML5 Form Features )

通过下面视频学习更多有用的HTML5表单特征：//zxx:TouTuBe视频，需要翻墙

十二、IE和HTML5(Internet Explorer and HTML5)

不幸的是，讨厌的IE浏览器需要动点小手术才能理解新的HTML5元素。

所有元素，默认的，都有个inline的display

为了确保所有新的HTML5元素能以block水平的元素正确地渲染，有必要对其做如下定义：

header, footer, article, section, nav, menu, hgroup {
    display: block;
}

不幸的是，IE仍旧忽略这些样式，因为它不知道这些标签从哪里来的，好比是header元素。幸运的是，有一个简单的解决办法：

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

奇怪的是，这段代码似乎触发IE浏览器。为了更简单将此应用到每个新的应用过程中，雷米夏普(Remy Sharp)创建了一个脚本，通常称为HTML5 shiv。该脚本同样修复了些显示问题。

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

十三、文档某一部分的信息(hgroup)

<header>
    <hgroup>
        <h1> Recall Fan Page </h1>
        <h2> Only for people who want the memory of a lifetime. </h2>
    </hgroup>
</header>

十四、必要的属性(Required Attribute )

表单允许新的必要属性，用来指定是否需要特殊的input。这取决于你的代码偏好，你可以以下面两种方式之一申明此属性。

<input type="text" name="someInput" required>

或者，使用更结构化的方法：

<input type="text" name="someInput" required="required">

两种方法都行。有了这个代码，并且浏览器支持此属性，如果“someInput”文本框是空白，则表单不会被提交。下面是一个简单的例子，我们还将添加占位符属性，因为没有理由不这样做。

<form action="" method="get">
    <label for="name">姓名:</label>
    <input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" />
    <button type="submit">提交</button>
</form>

您可以狠狠地点击这里：HTML5必要属性Demo

如果input里面内容是空白，则表单提交的时候，文本框会高亮显示。//zxx:貌似仅在Chrome浏览器下有点小效果

十五、Autofocus属性

同样，HTML5的解决方案消除了对JavaScript的需要。如果一个特定的输入应该是“选择”，或有重点的，默认情况下，我们现在可以利用自动获取焦点属性。

<input type="text" name="someInput" placeholder="zhangxinxu" required autofocus>

有趣的是，虽然我个人更倾向于喜欢XHTML的方法（用引号，等等），写作“autofocus=autofocus”让人感到有点怪。因此，我们将坚持使用单一关键字的方法。

十六、Audio支持

我们无需再依赖第三方插件区渲染音频。HTML5提供了<audio>元素，嗯，至少，最终，我们将不必担心这些插件。就目前，只有最近期的的浏览器提供HTML5音频支持。在这个时候，它仍然是一个很好的做法提供一些向后兼容的形式。

<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href="file.mp3">Download this file.</a>
</audio>

Mozilla和WebKit的还没有完全相处，当涉及到音频格式， Firefox会希望看到一个.ogg文件，而WebKit的浏览器支持.mp3扩展。这意味着，至少在现在，你应该创建两个版本的音频。

当Safari加载页面时，它不会承认.ogg格式，会跳过它并移动到的MP3版本，因此。请注意IE，每往常一样，不支持这些格式，Opera 10和以及以下版本只能使用.wav文件。

十七、Video支持

与<audio>元素很类似，在新的浏览器中也存在Video！事实上，就在最近，YouTube宣告了新的HTML5视频嵌入，当然，是为支持此功能浏览器。因为HTML5的规范没有指定特定的视频编解码器，它留给了浏览器来决定。虽然Safari和Internet Explorer9可以预期支持H.264格式的视频（其中Flash播放器可以播放），Firefox和Opera是坚持开源Theora 和Vorbis格式。因此，当显示HTML5的视频，您必须提供这两种格式。

<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>

还有一个值得注意的一些事情：

1. 我们技术上不需要来设置type属性，但是，如果我们不这样做，浏览器不得不自己去寻找类型。节省一些带宽，还是你自己声明下吧。
2. 不是所有的浏览器理解HTML5视频。在资源元素的下面，我们可以提供一个下载链接，或嵌入视频的Flash版本代替。这取决于你。
3. controls和preload属性就会在下面提及。
4. 有方法可以让所有的浏览器支持video标签，具体参见我前面的“让所有浏览器支持HTML5 video视频标签”一文。

十八、视频预载(Preload Videos)

预载属性不完全是你想的那个样子，虽然，你应该先决定是否要在浏览器预装的视频。是否有必要？或许吧。如果访问者访问一个专门展示了一个视频的页面，你一定要预载的视频，节约参观者等待的一部分时间。影片可以通过设置 preload=”preload”或是简单地添加preload进行预载。我更喜欢后者的解决方案，它少了一点多余的东西。

<video preload>

十九、显示控制条

如果你使用过上面的每一个提到的技术点，你可能已经注意到，使用上面的代码，视频仅仅显示的是张图片，没有控制条。为了渲染出播放控制条，我们必须在video元素内指定controls属性。

<video preload controls>

请注意，不同浏览器渲染出来的进度条的模样都是不一样的。

二十、正则表达式

你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。多亏了新的pattern属性，我们可以在标签处直接插入一个正则表达式。

<form action="" method="get">
    <label for="username">姓名:</label>
    <input id="username" name="username" type="text" placeholder="4-10个英文字母" pattern="[A-Za-z]{4,10}" required="required" autofocus />
    <button type="submit">提交</button>
</form>

如果你熟悉正则表达式，那么应该清楚[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。如果浏览器支持pattern属性，则提交表单时，如果文本框中的内容不符合其正则表达式，文本框会高亮显示。如下图所示。

您可以狠狠地点击这里：HTML5正则表达式Demo

//zxx:我自己小测了下，貌似目前只在Chrome下有效(win系统)

注意到，我们已经开始组合使用这些很棒的属性。

如果您对正则表达式概念模糊了，可以参见这里。

二十一、属性支持检测

如果我们没有方法检测浏览器是否支持这些属性，这些就不能称之为好的属性。恩，不错的观点，事实上我们是有几种方法的，这里我们讨论2个。第一个是利用优秀的Modernizr库，或者，我们可以创建和分析这些元素，以确定浏览器的能力。例如，在我们前面的例子，如果我们要确定浏览器是否能使用pattern的属性，我们可以添加一小段JavaScript到我们的页面上：

alert( 'pattern' in document.createElement('input') ); // boolean  

事实上，这是一种确定浏览器兼容的常用方法。jQuery库了利用这种伎俩。在上面，我们创建了一个新的input元素，并确定了里面的pattern属性浏览器是否认得。如果是，浏览器则支持此功能。否则，当然就不支持了。

<script>
if (!'pattern' in document.createElement('input') ) {
    // do client/server side validation
}
</script>

谨记此方法依赖于JavaScript。

二十二、mark元素(Mark Element )

试想<mark>元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。例如，我在一些博客上搜索“北川景子”，我就可以使用一些JavaScript将当前的每个结果字符串用mark标签包裹。

<h3> 搜索结果 </h3>
<p> 我很喜欢《零秒出手》里面那个拉小提琴的女孩，原来她叫做 <mark>北川景子</mark>。 </p>

二十三、什么时候使用div

我们有些人开始质问到底何时该使用div。现在我们可以使用header, article, section, 和footer，还有机会使用div…吗？当然可以。

div应该用在没有更好的元素的时候。

例如，如果你发现你需要包裹一段代码块在对内容定位处理的包装单元内。不过如果你是包裹一个博客文章，或者，可能是，底部的链接列表，则需考虑分别使用<article>和<nav>元素，因为其更具语义。

二十四、什么可以开始立即使用

一直谈论到现在的HTML5要到2022年才能全部完成，许多人完全忽视它，这是个巨大的错误。事实上，有少量的HTML5的功能，我们可以在我们所有的项目中使用！更简单，更干净的代码总是一件好事。在今天的视频快速展示的技巧中，我将告诉你一些可用的选项。

//zxx:YouTuBe视频，需要翻墙。

二十五、哪些不是HTML5(What is Not HTML5)

那些仅凭自己的假设形象将JavaScript变少的过渡被全部归为HTML5的人是可以理解的，嘿，甚至苹果无意中推动这一想法。对于非开发人员，谁管这个呢，它是一个简单的方法适用于现代网页标准。不过，对于我们来说，尽管它可能只是语义，重要的是要准确理解什么不是HTML5。

1. SVG:不是HTML5，至少5岁了。
2. CSS3:不是HTML5，它是…CSS。
3. Geolocation:不是HTML5.//zxx:Geolocation（地理位置）：通过HTML 5，您应该能够使Web应用程序可确定您的位置，并为您提供更多的相关信息。
4. Client Storage(客户端存储):非HTML5，虽说有一点切合，但被排除在规范之外，原因在于，担忧其作为一个整体，会变得过于复杂。它现在有自己的规范。
5. Web Sockets:不是HTML5，同样的，有着自己的一套准则。

不管你需求有多大的区别，所有这些技术可以归为现代网络堆栈。事实上，不少这些分支规范的管理着还是同一人。

二十六、data属性(The Data Attribute)

我们现在可以很正式地让所有的HTML元素支持自定义属性。然而，以前，我们可能会这样：

<h1 id=someId customAttribute=value> 小样，胆儿挺肥的呢 </h1>

…校验器会小题大做！但是现在，只要我们以”data”为前缀定义我们的自定义属性，盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上，可能为了JavaScript之用，那么，本属性将大有帮助啊。

HTML片段

<div id="myDiv" data-custom-attr="My Value"> 巴拉巴拉，lady 嘎嘎 </div>

检索自定义属性的价值

var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Value

此属性还可以用在CSS中，例如下面这个有些傻里傻气的CSS文字改变的例子：

CSS代码：
.data_custom { display:inline-block; position: relative; }
.data_custom:hover { color: transparent; }
.data_custom:hover:after {
    content: attr(data-hover-response);
    color: black;
    position: absolute;
    left: 0;
}

HTML代码：
<a class="data_custom" data-hover-response="我说过不要碰我！" href="#">不要碰我，雅蠛蝶~~</a>

如果你的浏览器支持after伪类，以及content的attr属性，则可以看到类似下面的效果(IE8不一样)：

要查看上图所示的效果，您可以狠狠地点击这里：CSS与HTML5自定义属性demo

还有，content属性其实是一个非常强大的属性，由于低版本的IE不支持，所以此属性尚未流行，关于content内容生成技术，可以参见我之前的“CSS content内容生成技术以及应用”这篇文章。

二十七、Output元素

正如你可能预料到的，output元素被用来显示部分计算，例如，如果你想显示一个鼠标的位置，或者是一系列数字的总和坐标，这个数据应被插入到output元素中。

举个简单的例子，当提交按钮被按下，我们用JavaScript将两个数字相加值插入到空的output中。

<form action="" method="get">
    <p>
        10 + 5 = <output name="sum"></output>
    </p>
    <button type="submit">计算</button>
</form>

(function() {
    var f = document.forms[0];

    if ( typeof f['sum'] !== 'undefined' ) {
        f.addEventListener('submit', function(e) {
            f['sum'].value = 15;
            e.preventDefault();
        }, false);
    } else {
        alert('你的浏览器尚未准备好！');
    }
})();

自己测试了下，貌似现在只有在Opera浏览器下有上佳的效果：

如果您现在使用的是较新版本的Opera浏览器，您可以狠狠地点击这里：HTML5结果输出框demo

此元素也可以接受一个属性，它反映了输出相关元素的名称，类似label工作原理。

二十八、使用区域input创建滑块(Create Sliders with the Range Input)

HTML5引进了range类型的input。

<input type="range">

最值得注意的是，它可以接收 min, max, step, 和value 属性，等等。虽然现在似乎只有Opera浏览器充分支持这种输入类型，但是当我们可以实际使用时，这将是美妙无比的！

参见下面的快速演示：

第一步：标签

<form method="post">
    <h4>音量控制</h4>
    <input type="range" name="range" min="0" max="10" step="1" value="" />
    <output name="result">  </output>
</form>

input { font-size: 14px; font-weight: bold;  }

input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}

output {
    display: block;
    font-size: 5.5em;
    font-weight: bold;
}

• 检测我们的浏览器是否认识range input，如果不，显示提示。
• 当用户移动滑块的时候，动态改变output的值。
• 监听，当用户离开滑块，插入值，同时本地存储。
• 然后，下次用户刷新页面的时候，选择的区域和值会自动地设置成他们最后一次选择。

(function() {
    var f = document.forms[0],
        range = f['range'],
        result = f['result'],
        cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; 

    // 检测浏览器是否是足够酷
    // 识别range input.
    var o = document.createElement('input');
    o.type = 'range';
    if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。');

    // 设置初始值
    // 无论是否本地存储了，都设置值为5
    range.value = cachedRangeValue;
    result.value = cachedRangeValue;

    // 当用户选择了个值，更新本地存储
    range.addEventListener("mouseup", function() {
        alert("你选择的值是：" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。");
        localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。");
    }, false);

    // 滑动时显示选择的值
    range.addEventListener("change", function() {
        result.value = range.value;
    }, false);

})();

您可以狠狠地点击这里：HTML5 range input炫酷效果demo

我的电脑是xp系统，默认主题，在滑块松开后Opera下的效果如下图所示，酷吧：

感谢您的阅读！我们已经讨论了很多，但可能只是触及到HTML5的皮毛，全当抛砖引玉，希望能对您的学习有所帮助！

//zxx:以上是翻译/编辑的全部内容，内容已经够多了，我就不多说什么了。

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

（本篇完）

一、ihpone4官方页面帅气的图片放大效果

这里所说的放大效果不是单纯的显示一张大图（如下）：

如果您对此放大效果，看见参见我之前的“jQuery-鼠标经过显示大图并跟随鼠标效果插件”这篇文章。

这里要说的放大效果，类似于放大镜的一种图片放大效果，就像凡客诚品上的衣服鞋子局部大图查看的效果：

不过，凡客这里效果实现的技术含量，以及体验效果要比Apple iphone4官方页面的图片放大效果要逊色不少，节约口水，不多说，先一睹为快：

正所谓说的不如看的，看的不如摸的，所以，想要亲自体验下官网上的效果，您可以狠狠地点击这里：iphone4官网页面

设计中常有隐喻这一概念，从Apple官网对此效果相关图片的命名来看，此圆圆的圈圈其实是隐喻人的视网膜，也就是人的眼睛的意思。所以，我将此效果叫做“视网膜放大效果”，但是，读起来好生拗口，算了，又不是给儿子取名字。

二、帅气的效果的实现

要是几年前，我还在大学里游荡的那会儿，要让所有浏览器下都实现如此帅气的效果基本上是不可能的。为什么呢？因为那个时候的CSS3还在妈妈的怀里吃奶奶，各个现代浏览器对CSS3的支持都很薄弱。但是，树苗会长高的，钱袋会变鼓的，女朋友会有的，万物都是发展的，浏览器也不例外。因而在对CSS3支持愈发成熟的现在，实现如此帅气的图片放大显示效果是不在话下的。

视网膜圆环效果
此效果实现难点也是亮点就是那个3像素白色圆环的“视网膜”模样的东西了，参见下图标注：

如果您对CSS3有所了解，在现代浏览器下实现此效果应该不难，就是圆角+盒阴影(border-radius & box-shadow)，这两个属性我在前面很多文章都提到，具体就不说了，一些基本的属性，您可以参见这里：“CSS3 border-radius使用参考”和“CSS3 box-shadow使用参考”。

例如，实现本文实例一致的效果的CSS相关代码如下：

width:220px;
height:220px;
border-width:3px;
border-style:solid;
border-color:#fff;
-moz-border-radius:110px;
-webkit-border-radius:110px;
border-radius:110px;
-moz-box-shadow:0 4px 5px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 0, 0, 0.25) inset;
-webkit-box-shadow:rgba(0, 0, 0, 0.6) 0px 4px 5px;
box-shadow:0 4px 5px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 0, 0, 0.25) inset;

上面这段CSS就可以实现现代浏览器（Firefox, Chrome, Safari等）下直径220像素的3像素白色边框的圆环效果，然后，将大图以background-image的形式现在在此div上，通过改变background-position的值就可以实现放大的效果了。

下面问题来了，对于并不支持CSS3属性的IE6/7/8浏览器，该咋办呢？实现IE浏览器下的圆角效果方法很多，我在“PIE使IE支持CSS3圆角盒阴影与渐变渲染”一文中额外由提供了7种IE下圆角实现的方法，其中我们使用的是第三种方法，也就是Drew Diller的DD_roundies方法（见下图），这也是苹果 iphone4官方网站实现IE下圆角的方法。

此方法使用很简单，例如，我们要实现一个class为retina_radiusd的div层在IE下有110像素大小的圆角，则具体操作如下：
首先，调用此js文件，如下代码所示：

<script type="text/javascript" src=http://www.zhangxinxu.com/study/js/dd_roundies.js"></script>

然后，清风拂面般的，一小行代码就搞定了：

//IE圆角
DD_roundies.addRule(".retina_radius", "110px");

于是乎，我们很轻松的，就把圆角的显示给搞定了。

但是，IE下仅仅是个圆角未免显得太寒酸了，因为人家毕竟还是有投影效果的，硬生生采了人家的黄花是不厚道的。所以，为了满足好的视觉效果，IE下我们还需要圆环投影效果的透明png图片做辅助，如下photoshop中截图所示：

我们可以直接以img标签的形式写在class为retina_radiusd的div标签内，通过定位于原白色边框重合，至于IE6浏览器不支持png Alpha透明，那只能委屈IE6直接显示白色圆环边框框了。所以，IE6下的效果就是：

IE7及其以上版本浏览器是：

移动放大效果
class为retina_radiusd的div层的background-image就是大图，由于是background-image所以只显示了div的大小的这部分图片。我们现在要做的就是在鼠标移动的时候，改变其background-position的值和本身的left,top值就可以了。

具体脚本参见实例页面，由于自己比较懒，不想写计算元素offset的方法，所以实例代码用的是jQuery写的。方法名是：fnRetinaZoom，有四个参数，为obj, target, scaleX, scaleY，如下图所示：

这里的四个参数分别指小图片（或者说移动区域对象），目标对象（即圆环视网膜），横向大图的偏移比例，纵向大图的偏移比例。例如，实例中的此使用如下：

var oRetina = $("#retinaImage"), tRetina = $("#retinaRadius");
var fnRetinaZoom = function(obj, target, scaleX, scaleY){
    ...
    ...
}(oRetina, tRetina, 1.524, 1.78);

至于方法内部的具体实现，除了点移动范围限制，其他都是些残念，没什么看头，这里就不喋喋了。

三、demo页面

当当当当，您可以狠狠地点击这里：图片“视网膜”放大效果demo，demo页面上有全部的CSS/HTML/JavaScript代码展示，所以，原谅懒惰的我，就不打包源文件了。

demo效果截图：

四、清新淡雅的结语

首先，需要说明的，我所写的实例虽说效果跟苹果官方效果长得挺模子的，但是HTML的结构，实现的原理，理解的难易程度都是有着犹如凤姐与志玲姐般明显的区别。原来官方的实现很扰人的，所以呢，如果您奔着学习的目的呢，官方的脚本代码可以置之一边，不闻不问。

然后，今天下午，大雨倾盆了N小时，温度降下来了，人也少了份燥热，多了份清静淡雅，感觉写文章语言也变得犀利了。

最后，由于环境，心理，能力等诸多潜在原因，难免出现一些吐槽的或是感伤的笔误，欢迎指正。

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

（本篇完）

//zxx:以下非特别标注的内容均来自原文，不代表个人观点

一、为什么我要测试CSS的性能

译者补充，下图为SASS@extend继承实现的示例截图：

关于OOCSS，Nicole Sullivan有份不错的ppt教案，具体见下面：

本想翻译下的，结果此幻灯片被作者设置为不能下载，要是自己翻译并重新制作份幻灯片，是腾不出那么多时间的，所以作罢。其有两个主要原则：

此原则多少与自己“CSS样式分离之再分离”一文中提到的一些思想类似。

二、测试如何工作的

此测试制造了差不多2000个box，所有的box都有一个独一无二的背景（样式）。有几种格式用来测试（见下面的链接），你可以逐个更改以测试器速度的差异。只要根据您的意愿点击相应的链接。

此测试用了一小段脚本，此段脚本来自Steve Souder的博文：Performance Impact of CSS Selectors(CSS选择器的性能影响)

Steve的文章可以说是进入了CSS选择器性能更细致的一个境界，非常值得阅读。

三、CSS格式

1. OOCSS (似乎挺快的)，双class，如：class="box box-#"，基本的CSS样式在class box中，然后直添加背景样式在唯一的class中。

2. Sass @extend (速度不确定)，一个class，如class="box-3"，然后在基本规则上创建一个多选择器规则，如.box-1, .box-2 {generics}。

3. 嚣张的CSS 添加所有的基本CSS到一个唯一的class上，没有“瘦身”。

4. 使用ID选择器 虽然我不建议使用ID，但是用来测试还是值得一试的。

5. 没有CSS 很好的底线测试

代码示例？

OOCSS样式:一个主class，包含所有的共同规则，然后一个独特的规则使用其他class

.box {padding:25px;border:1px solid #000;border-radius:5px;}
.box-1 {background-color:#FFEE00;}
.box-2 {background-color:#00FFee;}
...

@extend样式:将所有的独特class归为一个，逗号分隔的使用公用属性的class列表。

.box-1,.box-2 {padding:25px;border:1px solid #000;border-radius:5px;}
.box-1 {background-color:#FFEE00;}
.box-2 {background-color:#00FFEE;}
...

长(肿胀)样式：所有的公共样式都分离到独一无二的class中。

.box-1 {
  padding:25px;
  border:1px solid #000;
  border-radius:5px;
  background-color:FFEE00;}
.box-2 {
  padding:25px;
  border:1px solid #000;
  border-radius:5px;
  background-color:00FFEE;}
...

无CSS：有点儿自我解释

四、测试结果

测试结果貌似挺有趣的，让我们看看一些图表好吗？

所以让我们先讨论下CSS性能，这里有些我发现的东东：

• 类(class)选择器和ID选择器基本上是相同的速度
• SASS/Compass的@extend格式仅稍稍落后于OOCSS格式
• 臃肿的格式在大数量级速度比其他格式明显要慢
• 即使是极端的情况，最好与最坏的时间差异也在100-200毫秒之间

还有浏览器性能要注意的（加分）：

• 大多数浏览器的表现大致相同，只是略快一些
• 火狐是测试的浏览器中最慢的
• Opera渲染快速的CSS最快，渲染慢速的CSS最慢

还有就是我自己测试后的个人结论：

• OOCSS和@extend格式相当快
• 肿胀的CSS有害性能

哦，，差点忘了，这里是测试页面。

更新：
在测试中我发现有一些出入，可能影响测试，所以我删除任何外部引用的文件，和其他可能影响CSS性能的东东（像是text-shadow）。

//zxx:以上是翻译的全部

五、简短开溜的结语

一般来讲，一个页面的CSS渲染效率的高低与该页面的CSS量有一定的关系。使用面对对象或是我提过的分离的思想都是精简CSS，提高CSS性能的不错的手段。

翻译能力有限，如果有什么不准确的地方欢迎指正。
就这些。

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

（本篇完）

我个人是比较讨厌这类冗余的CSS reset（参见我“CSS reset的重新审视 – 避免样式重置”），绝大多数是浪费代码，浪费性能。我个人建议是找到其中自己需要的，不要全盘照搬。

/*
html5doctor.com Reset Stylesheet
v1.4.1
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

:focus {
	outline: 1;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

此段包含HTML5的CSS reset来自：http://html5reset.org/

希望能需要的人提供些帮助。

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

（本篇完）

一、单纯的js复制文字到剪切板较啰嗦

单纯的js复制文字到剪切板较啰嗦，由于考虑到安全性等原因，使用类似点击按钮这类复制文字内容的操作往往多有限制，例如IE浏览器下可以使用类似下面的方法复制一段文字到剪切板：

if(window.clipboardData) {
    window.clipboardData.clearData();
    window.clipboardData.setData("text", "这是复制的文字");
}

结果执行的时候会有类似于下面的警戒提示:

至于其他浏览器，使用js实现也是比较啰嗦的，貌似好需要对浏览器进行一些设置，例如火狐Firefox浏览器被需要在浏览器地址栏输入’about:config’并回车，然后将’signed.applets.codebase_principal_support’设置为’true’才行，显然，不是个什么好方法。

所以，总的来看，使用js实现文字等内容的复制不是个好方法。

二、使用Flash做媒介轻松实现复制

既然，js实现文字的复制有点啰哩吧嗦的，我们可以转向其他的方法，例如JavaScript的近亲，ActionScript。一般而言，Flash是不存在兼容性的问题，只有支持与不支持。在AS3下，实现文字复制的方法有几个，我这里使用的是：

Clipboard.generalClipboard.setData(ClipboardFormats.TEXT_FORMAT, "这里是复制的文字内容");

很简单吧。现在有些麻烦的是与页面js的传参与交互。

AS3下获取外部传递的参数，可以使用：

var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;

然后通过paramObj["参数名"]就可以获得外部具体的参数了。

我们还需要给js一个回调，告诉使用者是否复制成功。可以使用：

ExternalInterface.call("js方法");

我们可以使用flashvars将要复制的文字传给Flash，通过Flash讲文字复制到剪切板上，同时回调给页面上的js。

然后，还有一点，由于安全性的原因，后来的Flash版本只支持点击事件以及键盘事件的复制，所以考虑到兼容性，我决定使用Flash按钮触发复制文字内容到剪切板。同时考虑到扩展性，所以按钮图片从外部使用Loader类调用。于是，我们总共需要两个参数，一是要复制的文字内容，二是按钮图片路径。

关于Flash接受参数，复制，回调等我都已经写好了，您所要所的就是在js脚本上设置些参数就好了，具体使用见下面。

三、js+flash(cs3)实现复制文字内容到剪切板

本实例我的是使用SWFObject2.0脚本转载Flash，关于SWFObject2.0，您可以参见网易的“SWFObject2.0: 基于Javascript的Flash媒体版本检测与嵌入模块”这篇文章，对于此脚本的使用里面有着非常详细的介绍。

具体步骤如下，
1.调用SWFObject2.0脚本，如下：

<script src="http://www.zhangxinxu.com/Scripts/swfobject_modified.js" type="text/javascript"></script>

我上面的这个swfobject脚本是由Dreamweaver生成的。

2. 给设定Flash的一些参数，假设我们要复制的值来自一个id为“zxxTestArea”的文本域，则一些设置如下：

var copyCon = document.getElementById("zxxTestArea").value;
var flashvars = {
    content: encodeURIComponent(copyCon),
    uri: '../image/flash_copy_btn.png'
};
var params = {
    wmode: "transparent",
    allowScriptAccess: "always"
};

其中，flashvars中content指的是要复制的文字内容，uri是按钮图片的路径。params是设置Flash本身的一些属性，其中wmode不是必须的，但是allowScriptAccess是需要的，跨域处理安全沙箱等问题需要。

3. 传参并显示Flash

swfobject.embedSWF("../js/clipboard.swf", "forLoadSwf", "52", "25", "9.0.0", null, flashvars, params);

上面参数分别表示的是“flash的地址”，“用以装载并替换的HTML节点id”，“flash的宽”，“flash的高”，“flash版本”，“flash Player更新安装的swf调用地址”，“传给flash的参数”，“flash本身的一些参数”。

例如页面上有这么段HTML：

<span id="forLoadSwf"></span>

则此span标签就会被替换成flash，id也赋予给flash。

4. 回调给js
我在swf文件中给了js一个回调方法，方法名为“copySuccess”，例如：

function copySuccess(){
    //flash回调
    alert("复制成功！");
}

查看具体实际的效果，您可以狠狠地点击这里：js+flash(cs3)复制文字到剪切板demo

下载
关于此flash文件以及demo页面我已经打包成zip文件了，您可以狠狠地点击这里：zxx_clipboard.zip(右键-[目标|链接]另存为)

四、其他一些说明

1、我已经设置了舞台元素大小不随着flash大小改变而拉伸，同时按钮图片左上角显示，所以，您可以放心大胆的将swf的高宽设置成按钮图片的高宽。
2、可能是自己多事，我给按钮添加了一个透明度改变的hover效果，也就是移到flash装载的图片按钮上时，此按钮透明度为变成80%，移出时又变成100%透明度。
3、由于使用语调用都非常简单明了，不像同样采用flash交互的uploadify插件复杂，所以，这里没有将其插件化。
4、参数名以及回调函数的名称都是固定的，如果您使用其他的参数名则不会有效果的。其中您可以在回调的copySuccess方法添加一些更加人性化的提示方式。
5、demo页面第二个文本域是方便您测试的，可以随时通过粘贴的方式检测是否确实复制成功。
6、就这些，谢谢！

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

（本篇完）

一、事物发展之普遍规律

纵观美学史，哲学史，科学发展史，生物进化史，随着其进化与发展，无一不体现了一个普遍的规律，就所谓的“流派”与“分支”。即事物发展到一定阶段，必然会有“分支”产生。

例如经济学，原本的经济学，在很长一段时间内，经济学科曾经认为是伦理学的一个分支（语见阿马蒂亚·森的《伦理学与经济学》）。但是着资本主义商品经济的发展和社会分工的深化，人类经济活动的内容愈来愈复杂、丰富，专业化程度愈来愈细密;同时，各种经济活动之间、经济活动与其他社会活动之间相互依存、相互渗透的联系，也愈来愈紧密。为了适应这种情况，经济学的研究范围也愈来愈扩展。于是各类经济学分支涌现出来。最后有诸如：理论经济学，经济史，经济数量的分析、计量方法，应用经济学等分类。

又如发展历史较短的生物学，原来的生物学顶多动植物学，随着孟德尔发现遗传规律，百年来，生物学的发现势如破竹，现下，生物学的分类包括：分子生物学、生物分类学、习性学、微生物学、细菌学、微生物生理学、微生物遗传学、土壤微生物学、细胞学、细胞生物学、细胞化学、细胞遗传学、生理学、免疫学、胚胎学、优生学、悉生生物学、遗传学、分子遗传学、生态学、仿生学、
生物物理学、生物力学、生物力能学、生物声学、生物化学、生物数学等。而我大学学的专业就属于比较崭新生物学分类——系统生物学（之生物信息学）。

如果你跟马云老师一样，喜欢武侠，也应该很清楚，随着“武功”这种东西不断发展，就会不断有新的门派出来。例如全真教、明教、五岳剑派、武当、崆峒派，峨嵋派等等太多太多了。当我们还是一群猩猩猴子的时候，有什么武功门派吗？估计没有吧，只有所谓“江湖”，所谓“武侠”发展了，自然就会衍生出不同的武学体系，不同的门派。

如果您也看《火影》，应该知道，传说现在所有的忍术都是拥有轮回眼的一个叫“六道仙人”的家伙创立的。其忍术随着后代的传承以及其他形式的传播，已经有了明显的分类，虽然这方面我十足业余，但是我知道，至少有风、活、雷、土、水五种不同性质的忍术。

说了这么多，无非想说明，事物发展必然会出现差异与分支。

按照这种规律，像互联网发展如此迅猛，其应该也产生了很多新的分支。确实如此，就社会职业来讲，随着互联网的发展，出现了输入交互设计师，网页设计师，UI设计师，还有就是我现在所从事的前端开发工程师这些职位。然而，这些显而易见的东西不是本文的论述重点。我的主要观点是关于CSS与页面重构的。

就目前而言，CSS的发展是短暂的，不过十几年。这大致10年的时间CSS是不断发展的，从CSS1~CSS3，名字虽然变了，功能与效用也越来越强大了，但是这个CSS还是这个CSS，其中并没有所谓的分类，例如分为（我瞎命名的）界面CSS，或是功能CSS，没有，虽然CSS属性有所分类，但是，这个CSS还是这个CSS。

然而，当我们将CSS应用到HTML代码上，去重构页面的时候，我渐渐发现，CSS似乎有了“流派”之分，虽然，这种“流派分支”还不是很清晰，但是我看到了其中的苗头，而且可以逐渐的理出头绪来。所以，我决定将我认为的“当前CSS页面重构存在流派之分”这个观点提炼出来并加以阐述论证。我发现，理顺了这个东西，前端的眼界开阔了，对其他同行的认识更清晰了，对于实际的工作也有很实际的指导意义。这也是本文的意义所在。

二、CSS页面重构之混沌状态

纵观业界，有太多的人埋头写过CSS了，包括我自己，我们根据设计图，根据CSS样式的含义，设计不同的CSS组合，然后重构页面。但是，我们都是埋头写CSS，陷在CSS的迷雾中。这就好像，我们每天上班下班，谈恋爱，购物或是ooxx，却看不到对这个大的人类社会造成了什么影响一样。因为就我们大多数人而言，这个影响微乎其微，少了我们，地球依然很坚挺的旋转，重庆依然会有42度的高温，所以，我们会忽略，这是正常的，我也是这样子的。我们中国，上万个（数据YY，表示写CSS的人多）写CSS代码的，加载一起，会对整个CSS体系没有一点影响吗？影响是有的，但是，目前状况而言，CSS仍然多混沌，要说分支，顶多一个苗头而已。

假设，CSS与页面重构是条直线，如下图所示：

直线上任意一点可能会出现一个新的分支，或者说流派，或者说以后的主流与趋势。当我们某位CSS页面工程师为某个页面写了一个CSS，注意一个很重要的前提：“CSS认真书写，人非CSS菜鸟”，其在整个CSS水平线上必然有个位置，这个位置根据其CSS以及页面的重用性，兼容性，代码简洁度，效率等会有个特定的位置，我们现在在这个位置上画一个圈圈，见下图：

现在，我们国内有上万甚至更多的优秀的CSS工程师，假设他们每写一个页面，就会根据他们CSS代码以及重构的页面的特点在这条CSS线上画一个圈，结果，当圈圈很多后，有了广泛的统计数据后，结果如何，在我看来，会类似于下面，依旧显得混乱，无规律。

我们，尤其是经验丰富的CSS页面工程师，他们都有自己的一套布局方式或是书写准则，也可以说是习惯，在他们看来，我这种写法是最相当合理。当他们用自己的这套准侧去审视别人的代码或是页面的时候，如果看到不一样的地方，心中可能就会暗想：这里不应该这样写，这个页面这个按钮怎么在不同浏览器下不一样啊，这个人水平不行，离我还有差距。或许，它是狠狠地扎根在了兼容性这个点上，而对方扎在的页面扩展性这个点上，如果以自己的优势去审视别人的，结果往往就是相互鄙视，可悲啊，陷在自己的那个小葫芦里，整个CSS与页面重构是条直线，不是你自以为的一个点，所以不要轻易使用自己的那套CSS准则去评判别人的代码。

上图，还有些内容，没有补全，完整点的内容应该如下图所示：

目前的CSS是混沌的，没有明显的风格派别之分，我们会误以为CSS就是我们所掌握的那点世界。其实，可能你我都是上面那条直线上的红点，只是由于你我在直线的两端，可能就会互认为对方应该是下面那条水平线上的。

三、CSS页面重构之两类风格端倪

我们写页面，非常非常重要的一个重要指导思想就是有限条件下的权衡，然而，由于事物的发展，企业文化，团队前辈的继承等因素，这种权衡的侧重点是不一样的，这也就成为了CSS页面重构“流派化”的星星之火，理论基础。然而，有太多的CSS页面制作人员能够写出一个过得去的页面已经不错了，对他们来讲，完全没有CSS代码的权衡侧重点这个概念与意识。整体的参差不齐使得权衡侧重点的界限很模糊，CSS页面重构的“门派”之分也就被掩埋了。所以，要想找到“门派”之分的端倪，需去粗取精，看那些具有代表性的，真正优秀的CSS工程师的页面重构权衡侧重点。

我觉得我所熟知的最具有代表性的两个页面重构代表性站点是“腾讯网”和“Google”。这两个网站代表了当下两类不太明显的CSS派别，前者是“兼容体验派”，后者是“扩展性能派”，用上面的图表示就是：

虽然这两大互联网公司的内容与业务有所不同，某种程度上，缺少一定的可比性，但是，我们依然可以从同类型的产品上看到一定的端倪与差异，例如非常优秀的qq邮箱和gmail邮箱。qq邮箱可以说是qq的一系列产品说最接近简洁与性能的产品了，但是，毕竟是非常重视用户体验的腾讯公司的产品，很多时候，在考虑性能成本与视觉体验上，其很明显的倾向了视觉体验上，这与将简洁之道贯彻到底且性能至尚的gmail是不同的。

首先，qq邮箱是兼容性非常良好的，这里所说的兼容性是指在各个浏览器的模样是非常之接近的，例如下面在Firefox3.6和IE7下，qq邮箱默认皮肤的截图：

对比可以发现，在QQ邮箱下，无论是按钮，边框，以及自定义下拉样式，位置等都是一模一样的。现在我们来看看gmail邮箱在Firefox3.6浏览器和IE7浏览器下的UI表现：

现在看看gmail在IE7浏览器下的样子，如下图：

如果以我们狭义的“兼容性”准则来评判gmail，其可能是不及格的，因为其在不同浏览器下的按钮差别不是一般的大，Firefox下是细腻的渐变质感，而IE浏览器下是略显生硬的高光质感。而实际上，在我看来，无论是兼容性良好的QQ邮箱，还是看似“兼容性”奇怪的gmail邮箱，都是非常优秀的，只是他们站立的角度与位置不同而已。在体验兼容性和性能扩展性权衡的时候，QQ邮箱则倾向于了更好的视觉体验，及牺牲一点页面代码或是加载的成本来获得更好的视觉体验；而Gmail邮箱在权衡的时候，更注重的是代码的数量，页面性能，页面的加载成本，至于视觉体验，反而是次要的。

这种权衡时的不同倾向代表了CSS页面重构可能的两种不同的风格与流派。

还是邮箱的例子，我们再具体深入点。我们通过具有代表意义的下拉来一窥QQ与Gmail在页面重构上不同的思想。

首先QQ邮箱的下拉，如下：

可能是考虑到兼容性，可能是考虑到IE6下select框有些傲骨的坏脾气，或者就是为了更好的UI体验，QQ邮箱使用一个长得像下拉框的东东模拟的下拉选择，显然，这类较好的体验，同时又要兼顾兼容性，显然需要一定的成本，QQ邮箱在此的成本控制上已经很出色了，但是，还是逃不了要使用图片的命运，如上图所示。同时，为了让各个浏览器表现一致，其下拉弹出内容的背景使用的是2像素的实色来模拟的。

Gmail可谓极致简洁，能够不使用图片就不使用图片。Google的产品似乎没有所谓了“兼容性”的概念，他可不管什么浏览器下都要一个样子，其准则就是怎样简洁，怎样成本低，怎样页面加载速度快，同时有最大化的视觉体验就怎么来。

同样的下拉效果，其是如何处理，其为何在不同浏览器下会有不同的UI表现呢？体会了其页面重构的准则和思想就不难理解。Google是页面扩展性、简洁以及性能方面的专家，站在这些角度去看待其页面code，很多东西也不难理解了。Google的页面到按钮基本上都是采用的流体布局，即自适应布局，不仅宽度自适应，高度也是自适应的，会尽量避免使用图片，能够使用CSS模拟或是字符模拟的都采用这类方式实现。例如其顶部的更多后面的尖角就是使用的三角字符（QQ多邮箱切换三角也是如此）：

现在来看Gmail的下拉，先看Firefox3.6下的按钮，Firefox下，其圆角细腻渐变的按钮是使用CSS3实现的：

如果想要实现各个浏览器“兼容”，要实现Firefox下的这个细腻质感的圆角按钮效果势必要使用图片或是其他耗性能的方法。但是Gmail或者说Google产品中没有所谓的“完全兼容”这个概念，其走的是“渐进增强”的路线。（关于“渐进增强”，可以参见我的“CSS 渐进增强 在web制作中常见应用举例”一文）

这在下拉的显示层的投影样式上也可见这种“渐进增强”的思想：

而同样的下拉内容在IE7下就是个简单的边框：

还有，很重要的，这里IE7下的下拉按钮，为何是个长得其实不咋地的高光按钮呢？关于这个按钮，我之前专门写过文章“关于Google圆角高光高宽自适应按钮及其拓展”，这个高光效果按钮是100%使用CSS模拟的，从圆角到渐变，高度自适应，宽度自适应。是个高性能，高扩展的按钮，但是其视觉体验相比其技术含量就要逊色很多，然而，这就是Google前端的风格。

//zxx:今年9月份之前IE6打开Gmail会看到另一番天地，过了这个时间段，就无缘再见啦~~

这种“渐进增强”的思想也体现在了Google的图片搜索上，Firefox3.6下和IE下的图片搜索结果页真是截然不同。Firefox下的显示真是非常的强大，我一直还没明白其图片两端对齐是如何实现，回头有时间一定要好好研究研究。

总结之，Google按钮效果坚决不使用图片，不支持CSS3的IE浏览器就采用多标签模拟不错的按钮效果，对于已经支持CSS3的Firefox等浏览器，就应用“渐进增强”，使用单标签+CSS3实现。最后，还有一点我是疑惑的，也是让我着实郁闷了一下的，我总以为Gmail中这个按钮下拉的三角是字符，与上面与左侧的三角一样是字符，其实用小bug(我对firebug昵称)一看，使用的是背景图片，一个小小的CSS Sprite(点击这里查看此图)，对于属于Google流派的我着实不解了一把，为何不用字符呢，我用字符试了下，效果也是很ok的：

兼容性与扩展性也是经常会发生冲突的对立的两个权衡点，QQ则倾向于兼容性，而Google则倾向于扩展性，这是这两个流派的主要特点。很简单的例子，QQ邮箱的下拉定高了，而Gmail的下拉没有固定高度（为了高度亦自适应，增加扩展性）：

四、我是典型的“扩展”派

我从小就是个特立独行的人，潜意识里总是拒绝随大流的东西，虽然这让我成为了心灵的孤独者，但是可能是运气好，总能时不时呼吸到新鲜空气。这种意识也无形中渗透到了我的代码中，随着自己渐渐地成长，越来越不是个中规中矩的代码布道者，随着时间的推移，我发现我处理CSS的方式似乎与绝大多数的网站的CSS不再一个点上，像是在一条线的两端。于是，我总是不断思考其间的不同之处，后来想通了，是页面重构的权衡点的差异，我在这段，而很多在另一端。而我这一段，与Google产品权衡点位置接近，我把自己归结为“扩展”派，我在处理页面的时候，想到是页面的重用与扩展性，其次就是性能，至于所谓的像素级的兼容性，还有一些体验细节，则是次重点。

举个简单的例子，您可能就会明白我在说些什么了。

例如，处理按钮，首先，简单样式的按钮，我会使用CSS模拟，而不使用图片，因为我觉得这样子的按钮扩展性更强，宽度随意，颜色修改方便，例如我个人网站上的所有圆角按钮都是用CSS模拟的。

或是注册页面的注册注册按钮：

如果按钮使用CSS模拟成本过高（理论上任何的按钮效果都可以使用CSS实现），我也会使用图片，但是，我会将按钮背景图片制作成这样的：

我会去按钮的极限宽度作为按钮背景图的宽度，一种按钮就一行图片，然后采用自适应技术实现。也就是说一种按钮效果只要一段样式就可以了，没有必要为各种宽度的按钮分别写样式。我是完全倾向了按钮的扩展性与重用性。如果是QQ公司的页面重构师，会怎么处理了。我打开企鹅的团购页面，发现没什么像样的按钮；然后有打开了QQ校友，随便查看一个按钮背景图，结果如下所示：

您可以点击这里查看此背景图。

其对不同宽度按钮做了不同的背景图，不同高度的按钮也做了不同的图片。要是我的话，最为扩展性重用性至尚的我，处理这里的按钮效果只要一小段高度足够的渐变背景就够了，如下图所示：
，因为这样子处理按钮不仅宽度自适应还可以实现宽度的自适应，关于此可以参见我前面的“CSS渐变图片背景下高度亦自适应按钮”一文。

至于企鹅的校友团队页面工程师为何这么处理，我想可能是其更倾向于完美的体验吧。为何这么讲呢？按钮自适应虽然说重用性很高，可以节约不少的代码量，工作量，但是，要想实现带圆角按钮的自适应，需使用两层标签，其中有一层需要错开内部标签几像素，以便可以让圆角显示出来，但是这回带来体验上的小小问题，就是点击区域与outline虚框的不对称。如下图所示：

但是如果使用单标签，按钮宽度固定，则虚框区域很规整很对称：

我实在无法想象pony看到自己产品有着无对称的虚框而无动于衷，对于如此重视细节与体验的腾讯公司，估计是不会放过这些显示上的瑕疵的，在加上一些完美主义的设计师。可以，文化与倾向的不同决定了我们在处理同样的页面内容时，差异巨大的处理方式。

再举个“扩展性”至上的常见的而又被忽略，甚至被鄙视的例子。见下图：

要实现上图所示的效果，您会怎么做？我大胆估计了下，考虑到最少的HTML代码，您可那会有如下的样式：

.box{width:430px; padding:20px; border:1px solid #ddd;}

HTML如下：

<div class="box">
    <strong>温馨提示</strong><br />
    团购成功后，消费凭证将发送到手机：<strong class="cr">132 0803 3621</strong>，凭短信去商家消费。
</div>

基本上使用一层标签就解决了，确实很nice，我以前也这么做过。但是，现在的我不会这么做了。考虑到扩展性，以及流体布局思想留下的习惯下，这里我会使用两层标签。将width属性与padding分离，分离再不同标签下。外层标签就负责宽度或者与之分离的margin属性，以提高CSS的重用性以及页面的容错与自适应能力。

.box{width:430px;}
.box_in{padding:20px; border:1px solid #ddd;}

分离的样式，错开的标签：

<div class="box">
   <div class="box_in">
        <strong>温馨提示</strong><br />
        团购成功后，消费凭证将发送到手机：<strong class="cr">132 0803 3621</strong>，凭短信去商家消费。
    </div>
</div>

上面的样式命名是示例，要是在我的CSS架构下，在这类非公用功能模块上，外部box的class一定会以w470分离出来作为网站通用样式库。而padding:20px;属性可由p20代替，p20来自CSS通用样式库。这些都是无关紧要的，主要的是，为何这里需要两层标签，要将padding值放在里面一层标签上。

一是这是自己自适应布局多了后留下的习惯，所谓一山不容二虎，padding会增加box的占据高宽，border属性也是如此，所以padding/border一定要与width属性分离，这样页面模块会有更好的扩展性，出bug的可能性也会降低，没有计算，宽度就是宽度。

为何使用两层标签，将宽度标签单独剥离出来可以提高扩展性与重用性呢？举个例子吧。大家都知道模块重用的，就是一段HTML代码可能在多个地方使用。现在我们在其他页面上的某个位置，例如右侧栏，要添加同样样式以及文字的内容，但是右侧栏的宽度有限，例如像是企鹅微博的右侧栏：

此时你该怎么做，如您使用上一种方法，也就是单标签的方法，well，抱歉，我想，您需要再额外写一段CSS样式了，而这段CSS样式唯一不同的就是宽度，也就是padding:20px; border:1px solid #ddd;某种意义上重复，显然，这样的CSS代码重用性是低的。而将宽度单独提出来后的双标签方法，直接将class为box_in这段HTML放在右侧栏就可以了，什么CSS都无需再写，这就是为何要使用两层标签，看似有一层标签似乎是“多余的”，但是，这种多余只是权衡后倾向于“重用性”的结果。（下图为box_in放在右侧栏后的结果：）

所以当你看到别人的HTML代码似乎有些多余的层级的时候，请不要轻易的认为人家这里做得不好，相反的，可能是别人比你更加的深谋远虑。

五、CSS页面重构“门派”意识与包容心

为何要提出“门派”这个概念，我想我希望大家都能以一颗包容的心态对看到其他同行的CSS代码以及页面重构方式。就拿上面QQ校友按钮与自适应按钮的例子举例吧，可能有些同行在使用某一个按钮时发现这个按钮的虚框不对称，可能心中就会暗想，这个网站或者这个页面制作人员不重视细节，离我还是有些差距的；可能有喜欢自适应按钮的同行看到QQ校友或是其他很多网站定宽按钮时，会暗想，这些网站的前端技术真是不咋地，按钮一点重用性都没有。最后的结果可能是相互鄙视与不屑。

其实大可不必，我是体会到了一颗包容的海纳百川的心态对于自身的成长非常的重要。千万不要拿着自己的那套准则趋评判别人的代码，去指手划脚。您站在直线的A点，怎么能轻易的就明白B点处所包含的思想呢。我们应该做的是以一颗开放的心态去看待别人您目前看似不屑的代码与页面重构方式，并从中学习到新的东西。这种心态决定了我们成长的高度。我们要一直保持饥渴的状态，不要固守自己的那套东西，灵活，吸收与变化。

所以，您要是发现某个页面某处在IE6下有3像素的偏移，不要轻易断言，这里是个bug，这个页面工程师火候不够。或许是这个工程师更看重的页面扩展性与CSS代码的数量，对这种一般用户根本不会注意的问题，其没有必要再写一个hack去解决；您要是看到页面上的按钮将文字也作为图片切进去了，不要觉得这个工程师功力不够，觉得这样子按钮毫无重用性，或许人家更看重的是视觉体验，宁可多做几张图，多几个按钮，也要有更好的视觉体验效果。

六、实用指导意义

虽然没有明确的“门派”的概念，但是实际上，CSS届确实有隐性的“门派”之分的。知道这个也是有一定的实际意义的，例如在找工作的时候，（个人观点，仅供参考），如果您要进入腾讯公司，要清楚腾讯公司写页面更看重的是什么，作为一个颇具规模的大互联网公司，其流程规范等都已经相对非常成熟了，前辈们继承下来的东西不是你所能左右的，您所能做的就是代码风格也页面重构思想要与之相符。如果您固守你自己那一套，比如说将扩展性与重用性放在首位，对于体验尤其是兼容性（各个浏览器一致）放在次席的话，到头不幸的肯定是你自己。你需要就是对其产品页面的CSS代码（命名，风格）以及HTML重构思想进行一番研究。对于大公司，说句可能不对的话，中规中矩地写你的CSS代码，这往往反而是最好的。

要是，以后，我羽翼渐丰，有幸能够面试他人的话，我更看重的将会是对方的CSS与HTML代码的重用性与扩展性是否足够高，CSS代码是否足够简洁，性能是否足够高，对于所谓的兼容性（也重要）不是最先决的条件。此时，您的代码与页面要是方方正正，规规整整，就像是砖头房子一样，我一定会把你劈掉的。我要是流水般的页面布局。

七、期盼已久的结语

不得不说，好久没有写这么长的文章了，连续写了三个晚上写才到这里。刚boss突然出现，害得我的小鹿乱撞，没想到老板居然也加班。虽然唠叨了这么多，也不知道我的观点表达得是否足够清晰了。对于CSS页面重构的“门派”之分，其实自己的思考还不是很成熟，借此文顺便梳理了下自己的思考。这里，我特别想汲取其他同行的一些观点与看法，以帮助自己进一步地成长。所以非常欢迎指出您觉得表达不准确的地方，也欢迎提出您自己的一些观点，思想火花的碰撞是最有助于成长的了。您可以以评论的方式留下您犀利的见解或是中肯的建议或是猛烈的否定，不管如何，都不甚感谢。

//zxx: 对了，貌似后天七夕了，看我有这么多时间写文章就知道我是单身了，我就琢磨着，哪位有缘的同行可以介绍个临时的或有可能成为永远的伴，在上海，要女生，包一场电影外加所有的食物~~ zhangxinxu@zhangxinxu.com

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

（本篇完）

一、demo以及下载

上图为Firefox3.6下的效果截图，在IE浏览器下也有效果，只是微微有些bug，这个后面会说的。

您可以狠狠地点击这里：炫酷圆环时钟效果demo

我还做了个简洁的demo，已打包为zip，您可以狠狠地点击这里：colorful-round-clock.zip

素材与创意来自：http://tutorialzine.com/2009/12/colorful-clock-jquery-css/

二、实现原理简介

下图为我在原文原理图基础上用中文标注的原理图：

具体点将，就是将一个完成的圆形图，用左右两个div以background-image的形式分装，其中右半区域的层级在左半区域之上。以秒举例，在前30秒，右半区域（层级较高）隐藏（否则会覆盖左半侧旋转的图形），左边区域旋转，由于左半区域之上还有一个实色背景层覆盖，所以我们只会看到从右半区域旋转出来的内容。后三十秒，原来左半区域固定旋转180度，也就是，右半区域会一直有完整的半圆。此时，原先的右半区域开始旋转，由于右半区域层级较高，于是，其旋转可以完整显示。于是前后半分钟的旋转可以完好的拼合。

现在的问题是，如何实现图形的旋转呢？关于CSS旋转的一些知识点，您可以参见我之前“图片旋转效果的一些研究、jQuery插件及实例”，里面对各个浏览器的旋转有着详细的介绍。本文的旋转所用的属性在其中就有详细的介绍。

其中，现代浏览器使用的是CSS3的transform属性，IE使用的是旋转滤镜。目前，现代浏览器中除了Opera浏览器外，基本上都支持了CSS3的transform属性中的rotate属性，一般用法类似下面：

-moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg);

IE浏览器是使用其私有的滤镜，类似下面的写法：

filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');

其中roation为旋转的弧度值。

使用js表示则写法如下(以下表示旋转60度)：

obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=0.5,M12=-0.866,M21=0.866,M22=0.5,SizingMethod='auto expand')";
obj.style.MozTransform = l.style.WebkitTransform = l.style.transform = "rotate(60deg)";

有了原理，有了方法，按照常规理解，只要设置定时器，然后将时间值与角度相对应就好了。然而，在IE浏览器下，事情则没有这么简单。正如我在“图片旋转效果的一些研究、jQuery插件及实例”所说的，IE滤镜的旋转完全就是顶着外框的旋转，元素本身的旋转会撑大外部box的高度和宽度。例如下面视频所展示的：

如果您的浏览器是IE或是IE内核的，您可以狠狠地点击这里：IE旋转宽高撑开实例demo

如果直接使用js改变IE滤镜的正弦余弦值，由于旋转div所占据的宽度高度随着旋转而增大，会造成圆环的不是居中旋转的，会产生偏差。就如上面视频所示，其旋转不是以正矩形的中心旋转的。所以，要想让IE居中旋转，需要计算其中心位置的偏移，在每个时间器执行时，动态改变旋转div的位置。

正如上面视频所展示的，旋转中心的位置每旋转90度就是一个循环。
所以，我就回到高中一样，画图，计算，得到了一个计算偏移值的方法，如下：

var offsety = offsetx = (200 - 200 * Math.sqrt(2) * Math.cos(Math.PI / 180 * Math.abs(angle - 45))) / 2 ;

当然，参数angle一定要限制在0~90度之间。

三、结语

个人觉得，对于实际项目而言，就目前浏览器对CSS3支持的现状而言，此效果没有多少实用价值，但是对于学习前端技能而言，确实是个不错的东西。最近团购不是很流行吗，里面有个倒计时，您有兴趣可以在那里应用应用。

就这些，有什么表述不准确之处欢迎指正。

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

（本篇完）

一、终效果图enjoy~~

以下效果截图截自Firefox3.6浏览器：

上图为CSS3实现的效果图，如果您有兴趣可以与正宗的Opera浏览器的logo图做比对，查看logo原图请狠狠地点击这里：Opera浏览器logo原图

您可能是个细心的人，可以看出其中不少差异，但是我确实是没有看出多少不同来，我只能叹服CSS的惊人潜力。

demo与下载
您可以狠狠地点击这里：CSS3实现Opera浏览器logo demo

源文件下载请狠狠地点击这里：css3-opera-logo.zip(右键-[目标|链接]另存为)

二、效果的实现

一般这类CSS3实现的效果无非那几个CSS属性，要么圆角(border-radius)，要么渐变(gradient)，要么就是盒阴影(box-shadow)。本文的实现也不例外，由于这几个属性我之前有过专门的介绍，所以这里不具体叙述，仅提供一些链接。

CSS3属性就像是photoshop中的图层样式，仅仅掌握一些图层样式效果不一定能够实现精湛的UI效果，例如，我们还需要知道图层原理。本文的实例可以说就是图层与图层样式结合的产物，也就是使用photoshop绘图的过程（说Illustrator的使用更贴切，因为绘出的图形都是矢量的）。而这里，图层样式就是CSS3属性，图层就是absolute绝对定位。

换句话说，本文的Opera logo效果，是CSS3+绝对定位实现的。

本实例logo由8个div层绝对定位合成的。现在我们一个一个展示出来（以下截图均截自Firefox3.6浏览器）：

①淡阴影

圆角+无距离的盒阴影实现。参见如下代码：

-moz-border-radius: 152px/25px;
-webkit-border-radius: 152px 25px;
border-radius: 152px/25px;
-moz-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
-webkit-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
box-shadow: 0 100px 30px hsla(0,0%,0%,.2);

上述代码有两点值得一提：
一是圆角的缩写。此值的表示方式与background-position类似，只是Mozilla使用斜线，而webkit使用空格。border-radius可以说是用得最广的CSS3属性，没有之一。关于border-radius的基本用法，以及一些相关文章可以狠狠地点击这里：border-radius使用参考
二是颜色的HSLA表示，HSLA也是CSS3中的属性，使用色调，饱和度，亮度以及透明度来表示颜色。查看HSLA基本属性，您可以狠狠地点击这里：HSLA使用参考。按照作者的说法，使用这种色调形式表示颜色，而不是RGBA是，是由于HSLA更方便对颜色进行微调。

关于box-shadow盒阴影的相关内容，您可以狠狠地点击这里：box-shadow使用参考指南，里面有不少相关文章的集合，如下截图所示：

②深色阴影
在上面的颜色的较淡的阴影上再覆盖一个更深一点的阴影，结果如下：

此处的相应的CSS3代码是：

-moz-border-radius: 110px/35px;
-webkit-border-radius: 110px 35px;
border-radius: 110px/35px;
-moz-box-shadow: 0 100px 15px hsla(0,0%,0%,.6);
-webkit-box-shadow: 0 100px 15px hsla(0,0%,0%,.6);
box-shadow: 0 100px 15px hsla(0,0%,0%,.6);

③外框边缘

相应的CSS3代码如下：

background: #800;
background: -moz-linear-gradient(-90deg, #F88, #800);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#F88), to(#800));
border-radius: 220px;
-moz-border-radius: 220px/235px;
-webkit-border-radius: 220px 235px;
border-radius: 220px/235px;

主要内容就是圆角与渐变，圆角上面已经提及，关于渐变，您可以参见下面三篇文章：“CSS渐变之CSS3 gradient在Firefox3.6下的使用 ”、“CSS gradient渐变之webkit核心浏览器下的使用 ”、“CSS实现兼容性的渐变背景(gradient)效果”其中对不同的浏览器如何应用渐变效果做了相当详细的介绍，您有兴趣可以去看看。

④高亮
高亮图层就是比边缘图层尺寸略小的渐变跨度更大更淡的渐变层。高亮层的覆盖使得背景的深色渐变只透出一点较深的边缘。如下图所示：

相关的CSS3代码如下：

background: #d40009;
background: -moz-linear-gradient(-90deg, #FCC, #E71616 50%, #d40009);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FCC), color-stop(50%, #E71616), to(#d40009));
-moz-border-radius: 218px/233px;
-webkit-border-radius: 218px 233px;
border-radius: 218px/233px;

⑤填充
填充图层与上面高亮层属性作用类似，用来勾勒高光边框，之所以称为填充图层，因为我们看到最后的Opera logo的效果的主要颜色就是此图层的颜色，故称之为填充层。该图层覆盖在高亮层上的效果如下图：

也是CSS3渐变和CSS3的杰作~~，代码如下所示：

background: #E71616;
background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, #800000 85%, #b80304);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A), to(#b80304), color-stop(50%, #E71616), color-stop(80%, #800000), color-stop(85%, #800000) );
-moz-border-radius: 218px/228px;
-webkit-border-radius: 218px 228px;
border-radius: 218px/228px;

此处的渐变颜色断点较多，所以渐变代码稍事复杂了点。如果您对渐变的代码含义不是很了解，您可以参见我前面说过的三篇关于渐变的文章。

⑥内边缘
内边缘层继续覆盖后的效果如下：

不变的圆角，不变的渐变，其相关参数如下所示：

background: #d20000;
background: -moz-linear-gradient(-90deg, #cc3836, #d9100f 50%, #d20000);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#cc3836), color-stop(50%, #d9100f), to(#d20000));
-moz-border-radius: 99px/170px;
-webkit-border-radius: 99px 170px;
border-radius: 99px/170px;

⑦内填充
进一步填充，效果见下图：

圆角以及渐变相关CSS3代码如下：

background: #b80000;
background: -moz-linear-gradient(-90deg, #9a0000, #b80000);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#9a0000), to(#b80000));
-moz-border-radius: 96px/170px;
-webkit-border-radius: 96px 170px;
border-radius: 96px/170px;

⑧画龙点睛的反色
最后一个图层是画龙点睛之比，是个白色的反色的图层，无渐变，单纯的圆角加上纯白的背景，废话少说，见效果：

哇哦，我不禁起立鼓掌！so nice, so perfect, so unimaginable!就几个圆角，就几个渐变图层，最后却有了如此精湛的Opera浏览器3D的logo效果。感谢CSS3，感谢作者，感谢所有的web开发人员。//zxx:糟了，我记得应该先感谢国家的……

好吧，固定的流程还是要走的，最后一段CSS3代码：

background: #FFF;
-moz-border-radius: 82px/170px;
-webkit-border-radius: 82px 170px;
border-radius: 82px/170px;

小Tip：上述所有CSS3代码仅展示了CSS3相关部分，一些宽度高度以及绝对定位的left和top CSS属性未展示。不过您可以从打包的demo页面中找到完成的CSS代码。

三、其他的浏览器兄弟

二部分所有的效果截图均来自Firefox3.6浏览器，如果您不想麻烦，把demo页面在一个一个浏览器下看效果，您也可以直接看下图，展示了目前各个浏览器下的对此CSS3实现的Opera浏览器的logo的支持程度：

对于早已让我让我无言以对的IE6/IE7/IE8浏览器，我就不说什么了。貌似IE9会支持圆角属性，虽然微软把IE9说得天花乱坠，但是我是不抱什么大的期待的~~

四、关于一些前端的技术趋势

从最近国外各大前端技术网站的内容来看，HTML5，CSS3，与SVG必定是趋势与主流，已经呈现势不可挡，繁荣昌盛之势。就国内死水般的现状而言，感觉又要落后人家好几年了。此现状不仅在前端，在交互、在设计都是如此。虽然，交互与设计我不够专业，但是从腾讯团队博客所嚼的些有关交互与设计方面的理论都是国外数年前的研究成果来看，滞后于国外是当前中国互联网行业的普遍现状（从互联网产品的内容与盲目借鉴也可见一斑）。

前端领域可以大有作为。多关注HTML5，CSS3，与SVG吧，对于未来的你必定会有受益的。但是，前提是，对于当前的XHTML与CSS2你需要足够的理解。这是一条艰苦的路程，任重而道远啊！

我今天看到首页上有人提问说为什么今日为更新文章，因为最近我在研究与学习另外一个js库，MooTools库，这是大众点评网使用的js库。最近迷上了这个，且学到了很多东西。精力有限，所以差不多一周的时间都没有写新文章了。

就说这些，我要学的还有太多太多，大家一起成长吧~~

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

（本篇完）