说说标准——CSS的异常解析规则

【分享】说说标准——CSS的错误解析规则
我说我的眼里只有你 —— 景岗山

用这句歌词来形容CSS的错误解析规则，我觉得再合适不过。CSS的错误解析规则的眼里只有CSS标准，对其他的错误语法，大都采取直接忽略的态度，太**忠心了（此处省略三字）。

CSS跟我们所认识的其他语言，例如 JavaScript，一样，也有自己的语法，它适用于任何版本的CSS，描述了CSS的核心句法(syntax)、关键字、厂商扩展、可用字符集、规则集合、声明块、选择器、特性以及注释等所有CSS的构成部分。是组成CSS的根本。详细的资料，请参见：W3C CSS2.1中的 4.1 Syntax。

标准如同法律，有没有是一回事，切身相关的人执不执行有是另一回事。不同的是，法律带有强制性，标准就带有妥协性。你按照标准写，则可以正常的运作，否则，标准会根据它的错误解析规则，处理你的代码，大多数时候，是丢弃错误部分。不可能说你CSS写错了，出了大错就要毙掉，小错就要改造。如果是那样，估计没人敢碰了……

那么，CSS2.1中到底是如何处理错误的呢？
CSS语法规定了CSS的写法，但是开发人员还是可能写出不合CSS语法的代码，这时候，浏览器就需要忽略一部分不合法的样式表。
CSS2.1及所有后继版本中，对于任何以破折号、下划线开头的property:value组合和不包含标识符的@-keywords组合，都以忽略的方式处理。
比如：

CSS code

div{ _height: 19px;}

上面存在下划线开头的特性值，按照规则，应该忽略这个声明。
而只有IE6，以及IE7和IE8的兼容模式下会自动修复这个声明，其他浏览器都忽略该声明。
在IE6(Q)(S)/IE7(Q)/IE8(Q)中，最终会解析成：

CSS code

div{ height: 19px;}

补充一句，这就是著名的 IE CSS hack。

为了保证新的属性和值可以被正确添加，但遇到以下情况时，浏览器必须遵循以下的规则：
1. 未知的属性
浏览器必须忽略带有未知属性的声明。
如，

CSS code

p{yes:'good'}

yes不是CSS中已有的属性，所以，应当忽略此声明。
在所有浏览器中，该声明都会被忽略。

2. 不合法的值
浏览器必须忽略带有不合法值的声明。
如，

CSS code

p{height:20}

height的值应该是一个数字后加一个单位构成的值。只有一个数字的值是不合法的。应当忽略。
虽然标准如此，但是这个值在IE/Opera/Firefox/Chrome/Safari的兼容性模式下有效，在它们的标准模式下才会被忽略。可见，兼容性模式下对其做了自动修复。

3. 畸形的声明
当浏览器解析一个声明时，读取它的代码直到这个声明的结束，同时，检查 (), [], {}, "", 和 '' 的匹配规则，并且正确的处理编码，这时候，浏览器必须处理它所遇到的意外出现的标记。 怎样处理？标准没有明确指出。因为针对不同的情况，应该采取不同的处理手段。很多兼容性问题也都是因为标准没说明白造成的！！
如，

CSS code

p{height} /* 丢失了 ”:” 和后面的值，此属性应被忽略 */({)P{width:100px}   /* 多余的  ({)，此行应被忽略*/

这两条声明都是错误的，应该被忽略。
在所有的主流浏览器中，这两个声明都被忽略了。

4. 不可用的@关键字
如：

CSS code

@hello{...}

@hello不是标准中的@关键字。
所有浏览器都会忽略此声明。

5. 样式表的意外结束
浏览器必须自动闭合敞开的结构(如，块，字符串和注解等)
如

CSS code

@media screen { p:before { content: 'Hello

应该解析为：

CSS code

@media screen { p:before { content: 'Hello' } }

实际上，IE/Opera/Safari/Firefox/Chrome都没有自动的修正。注意，IE8才开始支持@media screen。
稍微修改一下：

CSS code

@media screen { p:before { content: 'Hello'

注意，现在Hello文本后增加了一个单引号。
这时，IE8的标准模式下，以及Firefox/Chrome/Safari/Opera都可以自动的添加未闭合的 "}"；IE其他版本和模式下不能修复是因为不支持@media screen。

6. 字符串的意外结束
如，

CSS code

p { color: green; font-family: 'Courier New Times color: red; color: red; }

应被解析为：

CSS code

p { color: green; color: red; }

但经过测试，只有Safari和Chrome里，P 元素里的文字是红色的，其他浏览器里都是绿色的，也就是说，Safari和Chrome里，最终解释成了：

CSS code

p { color: green; color: red; }

这是符合标准，正确的。
而在其他浏览器中，最终解析成了：

CSS code

p { color: green;}

将意外结束后的声明全部忽略了。

喜欢深究的，请来这里W3C CSS2.1 中 4.2



[解决办法]
JF```
[解决办法]
顶。。。。
[解决办法]
看看！
[解决办法]

[解决办法]
顶个，来接接分
[解决办法]
好，加入资料夹……
[解决办法]
厉害
[解决办法]
支持黑猫大侠！好贴，帮顶。。。
[解决办法]
浏览器差异的确是噩梦，不好做，
[解决办法]
学习中。。。。
[解决办法]
学习中
[解决办法]
不错不错。。。有道理
[解决办法]
感觉比较深刻啊 

[解决办法]
看完了 看来楼主在推广标准之路啊 受教了
[解决办法]

Java code

test
[解决办法]
太有用了  顶 

 

查看更多 下一篇