CSS2.1的容错机制

Supersha — Wed, 07 Jul 2010 09:43:52 +0000

CSS2.1是当前普遍使用着的CSS版本，平时如果循规蹈矩的编写CSS，或许不会发现问题，可问题就是：如果想要保存的时候，不小心按Ctrl+s的时候多留了一个s在CSS文件里，问题就开始来鸟；或者是不小心在规则的大括号外边多写了一个分号……出错的事情是千奇百怪的，对于新手来说频率可能会高些。出现这样的问题的时候、调试起来你可能会感觉很莫名其妙，这就需要了解一下CSS2.1版本的容错机制了。

CSS2.1的容错方式总的来说就是：对于出现一些无效的属性、属性值、@-keywords等等，它就会忽视这些样式声明或者整个规则声明。对于无效的属性、属性名会忽视该样式声明，对于@-keywords中keywords无效时，会将整个@-keywords包含的样式声明都忽略掉。

既然CSS2.1有这个容错机制，那么还有其他一些平时比较容易忽略的错误导致的样式失效的问题，下面举例出一些实例，看完下面的实例，基本可以了解CSS解析器解析CSS代码的一些原理了。

不要在CSS每个规则之间插入除空格之外的无效字符或者插入不合CSS语法的注释，否则该无效字符之后的第一个规则无效，例如：
```
body{color:green;}.  /*这里不小心多了个点号就杯具了*/
p.ten{color:red; background-color:green;} /*这个规则是无效的*/
p.one{color:red;} /*这个有效*/
```
有一种情况比较特殊，当无效字符等使用大括号“{}”包含的时候，它下面的规则正常应用了，因为浏览器CSS解析器将它当作一条规则来处理。比如：
```
body{color:green;}
{.}
p.ten{color:red; background-color:green;} /*它可以work啦*/
```
跟上面对应的就是在样式中出现无效字符或者插入不合CSS语法的注释，则当前无效字符之后的第一条样式无效，例如：
```
p.one{border-style:solid; . color:#00c; font-weight:bold;}  /*color无效*/
```
但是有一种情况比较特殊，就是存在分号“;”的时候，前面带有无效字符也没影响。可能浏览器CSS解析器是将样式规则用分号进行拆分成数组，每个分号之前的样式不会影响下一个样式，比如：
```
p.one{border-style:solid; . ; color:#00c; font-weight:bold;} /*color有效*/
```
因此从这里，有可以引申出一个问题：当编写每一个样式的时候最后没有加上分号，当前样式的下一个样式就会无效，因为浏览器把它解析成一整个属性:属性值对了（如果只有一个样式，或者是最后那个样式没有加上分号，则没什么影响。根据数组的split原理，建议是最后那个样式不加分号，这样就减少一个空的数组元素），比如：
```
/*下面就杯具了*/
p.one{
  border-style:solid
  font-weight:bold
}
/*这还不错*/
p.one{
  border-style:solid;
  font-weight:bold
}
```
不要在颜色值(英文、十六进制等等)上加上双引号，否则该样式规则无效，例如：
```
body{color:"red";background-color:"green";}
```
给元素设置border的时候，如果没有设置border-color，则会使用字体的颜色来代替；如果没有设置border-width，则默认是medium。例如:
```
p.one{border-style:solid; color:#00c;}
```
在一些连写的CSS规则中，如果其中一个元素的规则声明出现错误，则整个规则无效，比如：
```
p.one,em @,strong{border-style:solid; color:#00c;} /*这里em @ 出错，造成整个规则失效*/
```
如果在一个规则中样式进行了重复定义，如果其中一个样式的值无效（或者为空），那么不会覆盖有效的值的样式，因为浏览器会忽略掉无效值的样式声明，比如：
```
p.ten{color:red; background-color:green;color:ss;} /*color还是red*/
```
规则声明不可以嵌套：p.ten{color:#00c;p.ten{color:#f00};background:#0c0}
在规则的特殊性方面，对元素声明样式时，将样式定义在它自身上和定义在它父元素上的优先级差别：将样式定义在子元素上，即使是使用标签类型的规则都比父元素使用ID、class、important等这样高优先级的都高，比如：span是p元素的子元素，p带有ID属性为ten
```
span{color:red;} /*文本的color样式还是red*/
body p#ten{color:green !important;}
```

对于无效的属性或者属性值，CSS解析器会直接忽略掉这些属性或者属性值，也就使得这条样式声明无效，比如：

img { float: left }       /* correct CSS 2.1 */
img { float: left here }  /* "here" is not a value of 'float' */
img { background: "red" } /* keywords cannot be quoted */
img { border-width: 3 }   /* a unit must be specified for length values */

/*解析过后，是：*/
img { float: left }
img { }
img { }
img { }

属性值中双引号和单引号要闭合，否则结果很悲剧，例如：

p {
   color: green;
   font-family: 'Courier New Times
   color: red;
   color: green;
}
解析过后，就成了：
p{
  color:green;
  color:green;
}

平时是我们太循规蹈矩的去编写CSS代码了，对于一些因为粗心造成的失误而导致样式失效的问题，浏览器又没有很好的提示CSS错误的功能，所以只能是通过肉眼看样式是否生效来测试CSS代码了。其实当你不遵循CSS语法来写的时候，会发现更多的CSS的解析失效问题，或许这就是CSS Hack被发现的源头吧……

详细CSS2.1容错机制可以浏览：http://www.w3.org/TR/CSS21/syndata.html#parsing-errors

EvtWithSelector模仿YUI的on方法

Supersha — Thu, 17 Dec 2009 18:14:16 +0000

基于自己对YUI3中on方法的喜爱，忍不住想要去自己实现它，早期本人开发了一个cSelector库，这个库是用来通过selectors来查询DOM的，类似与jQuery的selectors功能。因此，想要实现on的操作方式就非常简单了，首先说明一下YUI中on方法的语法：
[javascript]
Y.on(type,fn,id,context);
[/javascript]

id不单止是一个HTML中的id而已，它可以是css2、3中的selectors，组合查询DOM，将查询到的DOM元素添加type驱动事件fn。这种思想非常的不错。也是自己想要去模仿它的原因，一个是实践，另一个也是加深对它的思想的理解。

cSelector库中支持普通的selector，比如：
[css]
#id .class first-child last-child nth-child > tag only-child *= $= ^= [attr]
[/css]

这已经适合与普通的DOM查询了。EvtWithSelector里定义了一个Evt的对象，Evt有一个on方法，调用方式跟YUI3的是一样的。比如下面的一个实例：

[javascript]
onload=function(){
Evt.on("click",function(){ alert(this.innerHTML);},"div");
}
[/javascript]
最后声明：纯粹是为了实践和喜好之目的，只提供交流和漫骂。下载EvtWithSelector

西红柿爱番茄 » selector

CSS2.1的容错机制

EvtWithSelector模仿YUI的on方法