随网之舞

CSS Hacks

秦歌 — Sat, 12 Jul 2008 03:05:48 +0800

Java一直标榜一句老话叫“编写一次，到处运行(Write Once,Run Anywhere)”，CSS也差一点点做到了。但就是为了差的一点点往往需要大量的工作，虽然这并不是CSS的错。基本上别妄想兼容所有的解析器了，仅仅是为了让网页在YUI中列举的A级浏览器呈现一致就不是一件特别容易的事情。虽然通过精心的组织HTML结构加上使用最合适最通用的CSS代码可能实现多浏览器呈现一致，但当在视觉的过度设计、精确到像素的规定和前端快速实现的要求的前提下，可能你不得不为不同的浏览器写不同的CSS代码，这就是CSS Hacks了。我们的目标是保持CSS简洁和没有CSS Hacks，但即使多年以前就呼吁Keep CSS simple的PPK也不得不在他的网站中使用CSS Hacks，即便如此其站点在所有的A级浏览器中也无法保持一致的呈现。所以，下面这个我常用的CSS Hacks列表或许有些用：

	IE6	IE7	Firefox2+	Firefox3+	Opera9.5+	Safari3.1+
选择符{ *属性:值; }^[1]	√	√	×	×	×	×
选择符{ _属性:值; }	√	×^[2]	×	×	×	×
选择符,x:-moz-any-link{ 属性:值; }	×	√	√	√	×	×
选择符,x:-moz-any-link,x:default{ 属性:值; }	×	√	×	√	×	×
@media all and (min-width:0){ 选择符{属性:值;} }^[3]	×	×	×	×	√	√
@media all and (-webkit-min-device-pixel-ratio:0){ 选择符{属性:值;} }^[4]	×	×	×	×	×	√

这里有一个上述CSS Hacks的应用的例子可以看看。

[1] 此处的*号其实也可以是.号、>号、+号和#号。但它们都不属于CSS2.1规范合法属性名的一部分，所以不能通过验证。
[2] 当IE7为quriks mode时和IE6为quriks mode解析相同，所以此时这个表达式在IE7中也能生效。这个hack已经应用了很久了，下划线_作为属性名的前缀是符合CSS2.1规范语法的，但不存在于其属性名列表中，所以依旧不能通过标准语法验证。对于多个IE的CSS Hacks，条件注释是一个很值得考虑的解决方案。另外对于IE8可以关注其新功能和变化，但现在考虑其CSS Hacks问题有点过早，真的有需求可以通过增加<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />来解决。
[3] 如果把表达式中的and和(中间的空白去掉变成@media all and(min-width:0){选择符{属性:值;}}，那么Safari3+将无法识别，Opera9.5+则可以。
[4] 这个表达式Opera9.0是支持的。

上面这些CSS Hacks仅仅是沧海一粟，是一些简单的通用的CSS Hacks。这个世界上还存在很多很知名很经典的CSS Hacks，更多的CSS Hacks可以看这里：

您或许也喜欢看：

欲望都市与迷失城市

秦歌 — Thu, 26 Jun 2008 00:54:49 +0800

向往一个都市时，满脑都是对那个都市的欲望；当身陷一个城市时，似乎总是迷失在这个城市中。

小时候，当说起北京时，会有一种很奇妙的感觉。三年前，当我向往北京时，脑子里会有一长串的景象，长城的雄伟蜿蜒、紫禁城的黄瓦红墙、老胡同里的四合院、妙不可言的中华小吃……。当今天要离开北京时，突然发现以前脑海中的那一长串的景象似乎尚未触摸或者仅仅是惊鸿一瞥，整个三年都似乎都迷失在这个城市中了。

曾经很迷恋小说，所以当说起烟雨江南这个词时有另外一种很奇妙的感觉。在我的心里，这四个字或许能代表对杭州这座都市的欲望。所以，当第一次看和西子一样的西湖时，或许满眼都是贪婪。当第二次来杭州时，计划需要待三个月，而实际上这个三个月仅仅到过西湖一次，还是路过。现在计划要更长久的待在杭州这个城市了，或许就是更长久的迷失。

离开一个城市，却留恋这个都市；向往一个都市，却抗拒这个城市。其实，互联网已经让两个都市的信息仿佛就是一体，现代化的交通已经让两个城市仿佛相邻，但从一个城市到另一个城市总是让人有些很道不清说不明的情绪，从一个都市到另一个都市总是让人遗憾前一个忐忑后一个。于是，我就在欲望都市与迷失城市的漂浮不定中循环下去了。

您或许也喜欢看：

是时候不用考虑基于字体大小（em）的设计了

秦歌 — Tue, 17 Jun 2008 02:23:35 +0800

今天是Firefox3的2008下载日(貌似北京时间是6.18的凌晨1:00)，这就意味着Firefox3正式发布了。Firefox3有众多的改进和新功能，我最关注的功能之一是“全页面缩放（Full page zoom）”。这就意味着Firefox3和Opera以及IE7+都可以让用户“完全控制显示内容的大小同时自动调整页面布局和结构”，说白了就是可以让整个页面直接放大或缩小却不会乱掉。这就意味着我们不用再考虑为了可访问性而整个页面是基于字体大小（em）的设计了。

在CSS中，有两种单位。一种是绝对长度单位，包括英寸(in)、厘米(cm)、毫米(mm)、点(pt)和派卡(pc)。另一种是相对长度单位，包括em、ex和像素(px)。ex由于在实际应用中需要获取x大小，因浏览器对此处理方式非常粗糙而被抛弃(更多内容可以参考Eric A. Meyer的《CSS权威指南》)，所以现在的网页设计中对大小距离的控制使用的单位是em和px（当然还有百分数值，但它必须是相对于另外一个值的）。

在css中，1个“em”定义为一种给定字体的font-size值。所以1em可能随元素的不同而不同，它会相对于父元素字体大小而改变。在常见浏览器下，默认字体的大小为16px。常见有两种方法来进行网页设计：

设置默认字体大小为10px：
```
body{font-size:62.5%;}
#wrapper{width:97.4em;}
```
这便于依次计算出其他元素的长宽值，比如某个容器#wrapper的宽度是974px，CSS中定义为97.4em。本站随网之舞就是依据这种方式来实现的。
设计默认字体大小为网页中最常用字体的大小，比如最常用字体的大小是12px：
```
body{font-size:75%;}
#wrapper{width:81.1667em;}
```
这样虽然省去了设置默认字体的大小，但是偶尔却为严格尺寸设计带来麻烦，比如你要设置那个宽为974px的容器#wrapper就会遇到此类麻烦。其实第一种方法也会遇到类似麻烦，只不过比第二种少些。

基于字体大小的设计好处很明显，当用户调整浏览器默认字体的大小时，字体和页面会随之缩放，能够满足挺这种方法的人常说的一个优点就是弱视的人可以通过放大字体来看清楚页面内容，增强了页面的可访问性。

每个屏幕都有分辨率，比如1280×1024分辨率时屏幕就有1280×1024个点，这每个点就是一个像素(px)。所以利用px来设计网页，不存在em那种相对于父元素字体大小变化而变化的问题。而实际上绝大部分的站点设计都是基于px设计的。在Windows平台下IE7之前都无法通过调整浏览器中的“字体大小”来调整文本大小，非IE浏览器可以，但实际上是一般基于px的页面，一旦仅仅调整了文本大小页面就会乱掉（在Firefox 2下观看除中国雅虎外的门户网站，调整一下字体大小就了解了）。

为了IE下不能调整以px为单位的字体大小，而非IE下可以的问题，YUI CSS Tools采用了如下代码来设置默认1em的大小，支持用户的字体大小调整：

body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}

为此IE默认情况下，1em的大小是13.3333px，所以你会看到YUI CSS Grids里面那些诸如width:73.076em;这样的值。

所以，基于字体大小（em）的设计和基于px的设计相比而言：

基于字体大小(em)的设计页面带来的缩放效果有限，最早基于字体大小设计的门户网站应该就是Yahoo和MSN了，而实际上它们也仅仅是保证了上下缩放三级而已，再多就乱掉了。
现在的站点越来越多的图文混排，图像的高度和宽度本身就是像素数。除非你通过CSS来把图片的大小设置为相应的em值，就像本站的Logo这样，否则图片是不会随着文字变化而变化的。但是如果采用的是背景图片，那就基本上无计可施了。所以实际上基于字体大小来做图文混排设计的网页需要对图像的设计是有相当严格的要求的，即使如此仍无法完美解决，但复杂度却上升不少。
基于字体大小的网页设计，将使长度变得的非常的不直观，导致设置一个宽度变得非常麻烦，YUI CSS Grids中说明了这点。并且由于em会相对于父元素字体大小变化而变化的问题，导致图文混排的复杂设计时非常麻烦。特别是在盛行过度设计和精确到像素的这个浮躁时代。其实连Google和百度这种非常简单的首页都或多或少的利用px来布局。

现在主流浏览器都支持了“全网页缩放”功能，Safari尚未支持这个功能，而是像Firefox2一样支持文本缩放，但是具有讽刺意味的是Apple页面基本上都是基于px的，所以一缩放就乱掉，我深信Safari支持这个功能仅仅是时间问题。两年前有篇《95%的中国网站需要重写CSS》很流行，虽然保证用户的可访问性是应该的，但是应该找到其最佳实现的方法，毫无疑问浏览器的“全页面缩放”功能是最佳选择。从现在开始，基于px的设计不用再过于背负违背可用性的恶名了，基于em（文字大小）的设计不能给我们带来太多的好处，反而有可能耗费太多的精力挣扎于如何精确保护视觉设计上，设计师的精力应该更多的放在内容的理解、快速呈现、语义化、对屏幕阅读器的支持等等方面上。

全球范围内IE6已经不到40%了，中国用户比率应该高些，但趋势是一样的，毕竟IE8都出Beta了，IE6会很快成为历史的。如果你是偏执狂，需要考虑Firefox2和Safari的话，或许设置body{font-size:10px;}再基于em进行设计是一个不错的办法，中国雅虎的首页就是利用类似原理。总之，是时候不用考虑基于字体大小（em）的设计了，特别是针对IE6的解决方案。

您或许也喜欢看：

黄山，黄山

秦歌 — Wed, 11 Jun 2008 23:36:56 +0800

一品黄山，天高云淡。就在上个月底，我蜻蜓点水般游历了这座中华最有名的山川。在大学时代爬了两次泰山，我感受了十八盘大道的艰难和玉皇顶上日出的壮观，但当身陷黄山两边都是万丈深渊的惊险小道，瑟瑟发抖却又豪情万丈地感受水墨般山川在云雾中穿梭和目不暇接的奇松怪石时，或许能体会点这句“五岳归来不看山，黄山归来不看岳！”。

云雾山景

总是能看到大片大片的云雾骤然升起突然消失，若隐若现的水墨山川感觉像在梦境中。

天都绝顶

天都峰是黄山的第三高峰，但却是最险的峰，大名鼎鼎的鲫鱼背在这座峰上。最开始两张照片就是在天都峰顶拍的。

在天都峰顶我看到了阳光和雨雾嬉戏。

这就是大名鼎鼎的鲫鱼背了，两边都是万丈深渊，感谢那些神奇的开山工。

这是下了鲫鱼背看到天都峰全貌。

惊险小道

一人行的宽度，60-80的坡度，至少一边是绝壁。

这个好像就是一线天了。

爬往天都峰的路上需要穿过很多天然的山洞。

清泉石上流

青松迎客

同样大名鼎鼎的迎客松。

山路小调

山边的花儿和小松鼠，在天都峰顶上也看到松鼠路过。

黄山的标识很有感觉，休息设施也非常完善。

索道上感受高空失重是挺刺激的，高空上俯瞰黄山是另一番味道。

最后一眼黄山的天空。

您或许也喜欢看：

秦皇岛北戴河归来

语法图

秦歌 — Wed, 28 May 2008 23:45:13 +0800

语法图（Syntax diagrams ）又叫铁路图（railroad diagrams）是描述形式文法的一种方式。它是巴科斯范式或扩展巴科斯范式的图形化表示。最早使用语法图的书包括Niklaus Wirth写的“Pascal User Manual”（语法图开始于47页）和the Burroughs CANDE manual。在编译领域，像BNF和它的变体这样的文字式表示法都是首选的。BNF能很好的被编译器作者和编译器理解，但是不能很好的被这些语言的大部分用户理解。铁路图能更容易被大多数人理解。数据交换格式JSON之所以流行的部分原因就是它用铁路图来表示。

准则

一个语法的表示法是由一套语法图组成。每个图定义了一个非终结符。有一个主图通过下面方式定义了这门语言：属于这门语言的每句话都必须在主图上描绘一个路径。

每个图都有一个起始点和一个终点。这个图通过穿过其他的非终结符和终结符描绘了这些两点之间的可能路径。终结符用圆形区域表示，同时非终结符用方形区域表示。

例子

我们用一个算术表达式作为一个例子。首先我们提供一段简单的BNF语法：

<expression>::= <term> | <term> "+" <expression>
<term>::= <factor> | <factor> "*" <term>
<factor>::= <constant> | <variable> | "(" <expression> ")"
<variable>::= "x" | "y" | "z"
<constant>::= <digit> | <digit> <constant>
<digit>::= "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"

这段语法也能在EBNF中被表示：

expression = term , {"+" term};
term = factor , {"*" factor};
factor = constant | variable | "(" , expression , ")";
variable = "x" | "y" | "z";
constant = digit , {digit};
digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";

关于这段语法的一组可能的语法图：

扩展链接

原文：Syntax diagram

您或许也喜欢看：

巴科斯范式和扩展巴科斯范式

巴科斯范式和扩展巴科斯范式

秦歌 — Sat, 17 May 2008 18:17:54 +0800

巴科斯范式

巴科斯范式（也称为巴科斯-瑙尔范式、巴克斯-诺尔范式）即 BNF 是一种用于表示上下文无关文法的语言，上下文无关文法描述了一类形式语言。尽管巴科斯范式也能表示一部分自然语言的语法，它还是更广泛地使用于程序设计语言、指令集、通信协议的语法表示中。大多数程序设计语言或者形式语义方面的教科书都采用巴科斯范式。在各种文献中还存在巴科斯范式的一些变体，如扩展巴科斯范式EBNF或扩充巴科斯范式 ABNF。

BNF 规定是推导规则(产生式)的集合,写为：

<code><符号> ::= <使用符号的表达式>

这里的<符号> 是非终结符，而表达式由一个符号序列，或用指示选择的竖杠 ‘|’ 分隔的多个符号序列构成，每个符号序列整体都是左端的符号的一种可能的替代。从未在左端出现的符号叫做终结符。

扩展巴科斯范式

扩展巴科斯-瑙尔范式(EBNF)是表达作为描述计算机编程语言和形式语言的正规方式的上下文无关文法的元语法符号表示法。它是基本巴科斯范式(BNF)元语法符号表示法的一种扩展。

它最初由尼古拉斯·沃斯开发，最常用的 EBNF 变体由标准，特别是 ISO-14977 所定义。

基本

代码，如由终结符即可视字符、数字、标点符号、空白字符等组成的计算机程序的源代码。

EBNF 定义了把各符号序列分别指派到非终结符的产生规则:

digit excluding zero = "1"|"2"|"3"|"4"|"5"|"6"|"7"|"8"|"9" ;
digit = "0" | digit excluding zero ;

这个产生规则定义了在这个指派的左端的非终结符 digit。竖杠表示可供选择，而终结符被引号包围，最后跟着分号作为终止字符。所以 digit 是一个 0 或可以是 1 或 2 或 3 直到 9 的一个 digit excluding zero。

产生规则还可以包括由逗号分隔的一序列终结符或非终结符:

twelve = "1" , "2" ;
two hundred one = "2" , "0" , "1" ;
three hundred twelve = "3" , twelve ;
twelve thousand two hundred one = twelve , two hundred one ;

可以省略或重复的表达式可以通过花括号 { … } 表示:

natural number = digit excluding zero , { digit } ;

在这种情况下，字符串 1, 2, …,10,…,12345,… 都是正确的表达式。要表示这种情况，于花括号内设立的所有东西可以重复任何次，包括根本不出现。

可选项可以通过方括号 [ ... ] 表示:

integer = "0" | [ "-" ] , natural number ;

所以 integer 是一个零(0)或可能前导可选的负号的一个自然数。

EBNF 还包括描述指定次数的重复，和排除产生式的某部分或向 EBNF 文法插入注释的语法。

依据 ISO 的扩展

依据 ISO 14977 标准，提供了两个设施来扩展 EBNF。其一是在 EBNF 文法部分的特殊序列，它是在问号包围内的任意文本，其解释超出了 EBNF 标准的范围。例如，空格字符可以用如下规则定义:

space = ? US-ASCII character 32 ?;

其二利用圆括号在 EBNF 中不能放置到紧随标识符之后的事实。下列不是有效的 EBNF:

something = foo ( bar );

所以 EBNF 的扩展可以使用这种表示法。例如，在 Lisp 文法中，函数应用可以用如下规则定义:

function application = list( symbol , [ { expression } ] );

扩展 BNF 的动机

BNF 有着可选项和重复不能直接表达的问题。作为替代，它们需要利用中介规则或两选一规则，对于可选项，定义要么是空的要么是可选的产生式的规则，对于重复，递归的定义要么是被重复的产生式要么是自身的规则。同样的构造仍可用在 EBNF 中。

可选项:

signed number = [ sign , ] number ;

可按 BNF-风格定义为:

signed number = sign , number | number ;

或

signed number = optional sign , number ;
optional sign = ε | sign ; (* 使用 ε 来更清晰的指示空产生式 *)

重复:

number = { digit } ;

可按 BNF-风格定义为:

number = digit | number digit;

其他增加和修改

EBNF 排除了 BNF 的一些缺陷:

BNF 为自身使用了符号 (<, >, |, ::=)。当它们出现在要定义的语言中的时候，BNF 不能不加以修改或解释的使用。
BNF-语法在一行中只表示一个规则。

EBNF 解决了这些问题:

终结符被严格的包围在引号 (”…” 或 ‘…’) 中。给非终结符的尖括号 (”<…>”)可以省略。
通常使用终止字符分号结束一个规则。

进一步还提供了定义重复次数，排除法选择(比如除了引号的所有字符)和注释等的增强机制。

不管所有这些增强，EBNF 在能定义的语言的意义上不比 BNF 更强大。在原理上用 EBNF 定义的任何文法都可以用 BNF 表达。但是经常导致可观的更多规则的表示。

EBNF 已经被ISO用代码 ISO/IEC 14977:1996(E) 标准化了。

在某些场合任何扩展的 BNF 都被称为 EBNF。例如 W3C 使用 one EBNF 来规定 XML。

另一个例子

只允许赋值的简单编程语言可以用 EBNF 定义为:

(* a simple program in EBNF − Wikipedia *)
program = 'PROGRAM' , white space , identifier , white space ,
           'BEGIN' , white space ,
           { assignment , ";" , white space } ,
           'END.' ;
identifier = alphabetic character , [ { alphabetic character | digit } ] ;
number = [ "-" ] , digit , [ { digit } ] ;
string = ‘”‘ , { all characters − ‘”‘ } , ‘”‘ ;
assignment = identifier , “:=” , ( number | identifier | string ) ;
alphabetic character = “A”|”B”|”C”|”D”|”E”|”F”|”G”
             |”H”|”I”|”J”|”K”|”L”|”M”|”N”
             |”O”|”P”|”Q”|”R”|”S”|”T”|”U”
             |”V”|”W”|”X”|”Y”|”Z” ;
digit = “0″|”1″|”2″|”3″|”4″|”5″|”6″|”7″|”8″|”9″ ;

white space = ? white space characters ? ;
all characters = ? all visible characters ? ;

一个语法上正确的程序:

PROGRAM DEMO1
BEGIN
  A0:=3;
  B:=45;
  H:=-100023;
  C:=A;
  D123:=B34A;
  BABOON:=GIRAFFE;
  TEXT:="Hello world!";
END.

这个语言可以轻易的扩展上控制流，算术表达式和输入/输出指令。就可以开发出一个小的、可用的编程语言了。

使用了在标准中提议为正规表示的下列字符:

用途	符号表示
定义	=
串接	,
终止	;
分隔	\|
可选	[ ... ]
重复	{ … }
分组	( … )
双引号	” … “
单引号	‘ … ‘
注释	(* … *)
特殊序列	? … ?
除外	-

约定

使用了如下约定:
1. 扩展 BNF 每个元标识符都被写为用连字号连接起来的一个或多个字；
2. 结束于“-symbol” 的元标识符是扩展 BNF 的终结符的名字。

表示扩展 BNF 的每个操作符的正常字符和它所蕴涵的优先级(顶部为最高优先级)为:

* repetition-symbol
- except-symbol
, concatenate-symbol
| definition-separator-symbol
= defining-symbol
; terminator-symbol

下列括号对超越正常优先级:

'  first-quote-symbol            first-quote-symbol  '
"  second-quote-symbol          second-quote-symbol  "
(* start-comment-symbol          end-comment-symbol *)
(  start-group-symbol              end-group-symbol  )
[  start-option-symbol            end-option-symbol  ]
{  start-repeat-symbol            end-repeat-symbol  }
?  special-sequence-symbol   special-sequence-symbol ?

作为例子，下列语法规则展示了表达重复的设施:

aa = "A";
bb = 3 * aa, "B";
cc = 3 * [aa], “C”;
dd = {aa}, “D”;
ee = aa, {aa}, “E”;
ff = 3 * aa, 3 * [aa], “F”;
gg = {3 * aa}, “D”;

这些规则定义的终结字符串如下:

aa: A
bb: AAAB
cc: C AC AAC AAAC
dd: D AD AAD AAAD AAAAD etc.
ee: AE AAE AAAE AAAAE AAAAAE etc.
ff: AAAF AAAAF AAAAAF AAAAAAF
gg: D AAAD AAAAAAD etc.

有关工作

W3C 使用一种不同的 EBNF 来指定 XML 语法。
British Standards Institute 在1981年出版了一个 EBNF 标准: BS 6154。
IETF 使用在 RFC 4234 中规定的扩充 BNF (ABNF)。

ps，由于中文维基百科尚不可访问，所以就原文转载了其中关于巴科斯范式和扩展巴科斯范式的词条。

您或许也喜欢看：

语法图

天不时，地不利，人要和！

秦歌 — Tue, 13 May 2008 04:32:27 +0800

今夜注定要终生难忘，很多人正被压在窒息的空间中等待救亡或死亡，很多人站在阴雨萧瑟的空地上瑟瑟发抖担心害怕，更多人正在带着对生命的恐惧发现生命或证明死亡，还有更更多人焦急牵挂期待关注默默等待。我的一个朋友现在正在绵阳空旷的广场上似乎伴着细雨煎熬着这漫长的黑夜，就在这几个小时前她发给我几条短信说：

这里断水电气手机不通，地震很可怕今天确实很可怕。当地政府没有任何举措。我们已经准备充足在空旷地过夜很担心余震，灾害真的很可怕！

我的电话不出去！快告诉我关于地震的一切详情！我们被波及了！网上说什么了？还有没有余震多发点详情！

你有地震预报及时发给我，我这像个死城断水电气，电话打不出今晚无法回家还在广场呆着。太可怕了灾难！

现在还是有余震，能感觉到。听说在抢修电，可是仍没有电全城一片黑暗。没有星星也没有月亮恐怖片一样。

这是不幸中很幸运的短信，至少和各个门户头条上不断上涨的惊人死亡数字相比，已足够幸运了，但是此刻你能体会到一个柔弱女孩在黑夜中持续恐惧的心情吗？

其实我们应该深深的感谢互联网。我们除了能快速的准确的知道地震的发生时间和地点，能了解几小时内温总理已前往灾区，能学习地震中逃生十大法则，能感动于地震中妈妈对中风的父亲不离不弃，我们更能看到网友对地震中逃生十大法则的质疑，唐山大地震已经30年了，我们的自救能力进步了吗？可以看到数十万只蟾蜍迁徙引居民担忧被专家解析为“这种大规模的蟾蜍迁移其实是一件好事情，说明绵竹的生态环境越来越好了”，更能看到四川省人民政府网上现在已删除的“阿坝州防震减灾局成功平息地震误传事件”。短临地震预测是非常困难的，但事后每个人还是期望能：从2000年前张衡用蟾蜍来预测地震的经验和其他的老祖先总结中，从1975年已经有了成功的预测先例中，从30年前唐山大地震的悲惨教训中，从空穴来风的民间传言中和看到的自然现象中，从向多地震国家诸如日本之类的学习中，来拯救今天的和以后的生命与恐惧。

在这个期待已久的2008年还没有走完一半的时候，我们似乎已经经历了太多的不幸，“南方雪灾”、“西藏暴乱”、“胶济铁路火车相撞事件”、“手足口”，今天来了这个更悲惨的震撼“四川汶川大地震”。难道这些悲惨的铺垫就是为了8月的震撼性的狂欢吗？我们已经是最幸运的那群人，我们已经看到了有史以来政府最快的行动，我们应该感谢生命和祈求他人生命，我们更应该立足本职去尽力做力所能及的事。天不时，地不利，人要和！

从现在开始，我要记录我看到的：

您或许也喜欢看：

语义、标准和样式

秦歌 — Mon, 12 May 2008 00:48:33 +0800

大概在2004年初的时候，我第一次买了一本很厚的书，名字或许叫《Dreamweaver MX从入门到精通》，很认真看着书并实践操作大约三分之二后，就感觉自己不错了，利用Dreamweaver加上表格套表格可以把视觉精确的转化成静态页面，在那年底我完成了随网之舞的第一版。也就是在那个时候“WEB标准”这个新名词闯入了我的视线，《网站重构》这本书和w3cn.org吸引了我。2005年初，当我在广东茂名实习的时候，我第一次利用当时理解的标准，准确来说就是利用XHTML1.0加上利用CSS布局做了两个能同时兼容IE5.0+和Firefox的站点。毕业后，看到到处言必称标准，开发时强调XHTML1.0的语法规范（标准貌似被很多人认为就是XHTML1.0+CSS），检查时强调W3C的验证器（比如为了通过验证利用Javascript实现弹窗），招聘是强调会DIV+CSS（这是标准的另一个称呼，甚至到现在偶尔还有人给我一个链接对我说：”看我按标准做的网页，全部是DIV，一个TABLE都没有。”），那个时候似乎陷入了对基础语法（通过验证）和对CSS技能（hack技术）的追求上去了。后来，当我了解HTML的历史时，我才注意到HTML众多版本的标准，意识到HTML本质是用语义结构化文档和构建WWW的超链接。

现在回想起来，《网站重构》让我接触到标准，却没有让我理解标准，所以现在对它的记忆似乎仅限于那句“休斯顿，出了问题”。很长一段时间我都尝试去理解HTML标签的含义，比如去了解dl是definition list的缩写，通过看W3C、A List Apart、YAHOO的源码去揣摩HTML的语义、结构嵌套规则和语义化的命名，也是当我看到YAHOO首页的DTD是HTML4.01时，才意识到标准并不仅有XHTML1.0这个DTD，更重要的是语义化的结构。虽然W3C有大量的文档存在，但总给我一种很晦涩难懂的感觉，所以到现在为止关于HTML我参考最多的文档还是《XHTML1.0参考》、《(X)HTML Strict 下的嵌套规则》和《XHTML1.1标签列表》。但这些对于如何利用语义标签恰到好处的结构化文档还是模糊和远远不够的。一个月前，我看到了《HTML Mastery》，这本书的内容可以通过其中译本《精通HTML》的目录一目了然。这是我目前看到关于HTML学习最好的一本书，它涉及到大部分我在HTML应用上的遇到问题，同时也印证和细化了大部分我对HTML语义化的理解。同时在这本书里我还新学到了：

HTML中对什么是标签(tag)，什么是元素(element)最准确的描述。
对MIME理解
链接的rel和rev属性的含义和作用，如何创建可访问性链接
abbr和acronym的区别
语义化表格：表格是很复杂的东西，每次看都有新的收获，配合着Eric A.Meyer的《CSS权威指南》的“表布局”那章就更好了。
微格式：以前都是零零碎碎，这次真系统啊。

《HTML Mastery》的副标题是Semanctics,Standards,and Styling，我把它作为我的标题。语义是HTML的本质和基础，标准是HTML的通用的保证，样式是在语义和标准基础上更好的为人民服务。良好的语义不仅有利于内容、表现和行为的分离，也应该有利于表现和行为的实现，进一步反应了我们对需要结构化内容（信息是互联网的核心）的理解和对可能出现变化的把握。HTML5新增的标签也说明了这点，比如<header>和<footer>不正是<div id=”header”></div>和<div id=”footer”></div>抽取吗？XHTML2更是在这个问题上走到黑。当然现实残酷的，CSS还不足以通过简单的标签表达丰富的视觉，所以不得不为了视觉而添加一些无意义的标签。在知道保证语义的基础上做一些合理妥协和本身认为增加无意义标签是理所当然的是两种不同的境界。如果你选择了第一种，那么你深刻的理解HTML的语义是必然的选择。CSS Zen Garden和CSS Mojo是这方面的表率。

D2上不少人说想交流HTML的语义化，其实可以从这本书开始。如果您的工作涉及到HTML，就应该读这本书，所以我向我的同事们、口碑的同学们都推荐过，现在我依旧向您推荐它。

您或许也喜欢看：

Javascript的匿名函数

秦歌 — Wed, 07 May 2008 01:14:40 +0800

一、什么是匿名函数？

在Javascript定义一个函数一般有如下三种方式：

函数关键字(function)语句：
```
function fnMethodName(x){alert(x);}
```

函数字面量(Function Literals)：

var fnMethodName = function(x){alert(x);}

Function()构造函数：

var fnMethodName = new Function('x','alert(x);')

上面三种方法定义了同一个方法函数fnMethodName，第1种就是最常用的方法，后两种都是把一个函数复制给变量fnMethodName，而这个函数是没有名字的，即匿名函数。实际上，相当多的语言都有匿名函数。

二、函数字面量和Function()构造函数的区别

虽然函数字面量是一个匿名函数，但语法允许为其指定任意一个函数名，当写递归函数时可以调用它自己，使用Function()构造函数则不行。
```
var f = function fact(x) {
  if (x < = 1) return 1;
  else return x*fact(x-1);
};
```
Function()构造函数允许运行时Javascript代码动态的创建和编译。在这个方式上它类似全局函数eval()。
Function()构造函数每次执行时都解析函数主体，并创建一个新的函数对象。所以当在一个循环或者频繁执行的函数中调用Function()构造函数的效率是非常低的。相反，函数字面量却不是每次遇到都重新编译的。

用Function()构造函数创建一个函数时并不遵循典型的作用域，它一直把它当作是顶级函数来执行。

var y = "global";
function constructFunction() {
    var y = "local";
    return new Function("return y");  //  无法获取局部变量
}
alert(constructFunction()());  // 输出 “global”

和函数关键字定义相比Function()构造器有自己的特点且要难以使用的多，所以这项技术通常很少使用。而函数字面量表达式和函数关键字定义非常接近。考虑前面的区别，虽然有消息说字面量的匿名函数在OS X 10.4.3下的某些webkit的引擎下有bug，但我们平常所说的匿名函数均指采用函数字面量形式的匿名函数。更多详细内容可以阅读《JavaScript: The Definitive Guide, 5th Edition》的Functions那章。

三、匿名函数的代码模式

昨天hedger wang在他的blog介绍了几种匿名函数的代码模式：

错误模式：其无法工作，浏览器会报语法错。

function(){
  alert(1);
}();

函数字面量：首先声明一个函数对象，然后执行它。
```
(function(){
  alert(1);
} ) ( );
```
优先表达式：由于Javascript执行表达式是从圆括号里面到外面，所以可以用圆括号强制执行声明的函数。
```
( function(){
  alert(2);
} ( ) );
```
Void操作符：用void操作符去执行一个没有用圆括号包围的一个单独操作数。
```
void function(){
  alert(3);
}()
```

这三种方式是等同的，hedger wang因为个人原因比较喜欢第3种，而在实际应用中我看到的和使用的都是第1种。

四、匿名函数的应用

《Javascript的一种模块模式》中的第一句话就是“全局变量是魔鬼”。配合var关键字，匿名函数可以有效的保证在页面上写入Javascript，而不会造成全局变量的污染。这在给一个不是很熟悉的页面增加Javascript时非常有效，也很优美。实际上，YUI以及其相应的范例中大量使用匿名函数，其他的Javascript库中也不乏大量使用。
Javascript的函数式编程(functional programming)的基石。具体请看《用函数式编程技术编写优美的 JavaScript》和《函数式JavaScript编程指南》。

您或许也喜欢看：

《双食记》的余味

秦歌 — Sat, 03 May 2008 01:57:36 +0800

五一的凌晨看过这部号称“男人不敢看，女人最爱看”的《双食记》，它改编自殳俏的同名短篇小说。电影压缩了小说中时间的长度，把原有的“工笔花鸟一般的三菜一汤”的故事改编成“翻滚出蜿蜒的血水”的洋式大餐，看是浓烈，实则粗糙。如果按照常识逻辑推理，这是一部很标准的脑残片，最明显的莫过于燕子和coco的第一次碰面了，小朋友们都知道不和陌生人打交道，何况一个漂亮的空姐呢？不会一点防备和常识都没有吧。

毫无疑问，我更喜欢小说的味道。电影中，为了把它拍成惊悚片，不顾一切的为了惊悚而惊悚，似乎在明目张胆的告诉观众，看好了这里是惊悚，殊不知铁笼般的密闭房间不是李银珠最后一部片子《红字》中的轿车后备箱，也不是前几天那个悲惨的火车事故中的车厢，远没有小说中他中毒后似乎感觉“他相信那天在医院自己绝对看到，在绵绵和冰冰错身而过的一刹那两人相对的眼神，那满足到几乎要笑出来的眼神”这种让人产生潜意识的惊悚。最烂的莫过于结尾，整个片子过度的渲染燕子的老谋深算阴狠毒辣和coco的无知白痴天真可爱，似乎就是为了得到一个和谐的结尾“一个人不能吃两家饭”，而小说中轮回般的给出了他悲哀的发现他妻子在做两家饭的结局要深沉的有意味的多。

如果说电影版的《双食记》给我留下什么味道，那就是美食了。虽然电影的开头为了增加厚重感引出孔子《礼记礼运》的“饮食男女，人之大欲存焉”和孟子《告子章句上》的“食色，性也”，但还是没有在那整个厨房一丝不苟快慢有秩的加工美食的过程有味道。直白的“要抓住男人的胃才能抓住他的心”也比小说中“生活的苍白其实始自饭桌的苍白”有生活感觉，正是这句话，让电影更恰恰如其分的奉上了色香味俱全的相生相克杀人于无形的七道大餐呢？三联生活周刊的《双食记》饕餮之死，有完整的介绍：

第一道菜：椒姜羊排煲，易学易做，壮阳催情。对应汤：仙茅牛子南瓜汤，目的壮阳催情。牛子即牛睾丸，和羊排有同样的功效；南瓜是温补食材。妻子为了取信于情敌，必须先煎熬自己的忌妒心。

第二道菜：香酥脑花，以形补形，以脏补脏，补血健脑。配菜：芹菜香干、蚝油洋葱鹅翼、青瓜水蛋。对应汤：花生乌鸡炖参汤。菜谱合成目的：伤肾伤元气，使他力不从心。脑花安神补脑，乌鸡止咳提神，但是脑花与盐、酒在一起会影响男子性功能；鹅翼洋葱有伤肾功效。其他的配菜目的是显得很家常易学，降低男主人公的戒心。

第三道菜：清蒸大闸蟹，肉肥味鲜，通络固精，清热解毒。配菜：板栗咕噜肉、酥炸香蕉、杏仁双菇。对应汤：番茄芋头牛肉羹。菜谱合成目的：伤害脏器，针对胃、肝、脾等部位，让他肚子痛。这里面有一个漏洞，螃蟹实际是与柿子不能同吃的，这是一般人都具有的常识。柿子性寒，含大量的果胶和柿胶酚，未熟透的柿子还含有红鞣质，柿胶酚红鞣质遇到胃酸可凝结成块。柿子吃得过多，凝块可能变成硬块——胃柿石，对胃黏膜造成损害。蟹肉含丰富的蛋白质，柿子含许多鞣酸，蛋白质遇到鞣酸也会发生凝结。拟这份菜谱的导演赵天宇实在找不到以柿子为原料的菜，只好用番茄代替。有人吃牛肉、板栗引发过呕吐，因此这两种食物配在了一起。

第四道菜：豉爆鲶鱼，味甘性温，补中益阳。配菜：韭菜木耳、皮蛋豆腐、胡萝卜肉丁。对应汤：麦冬菠菜猪肝汤。菜谱合成目的：烧心，针对心脏，让他心绞痛。

第五道菜：田螺+鳖肉，菜谱合成目的：中毒。

第六道菜：炖鸭+羊肉，菜谱合成目的：中毒。

第七道菜：虾类+维生素C，可生成砒霜，致死。