【分享】@charset使用注意事项

在前面的帖子里，我们使用 @charset 来解决CSS文件和页面编码不一致的问题，见：【分享】页面与页面中引入的外部 CSS 文件编码不一致引起的兼容性问题

于@charset 本身来说，也有兼容性问题。

例子
test.html(UTF-8编码):
HTML code

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="d.css" media="all"/>
<h1>@charset</h1>

d.css(UTF-8编码):
CSS code

h1{width:100px; height:100px; background:red;}
@charset "UTF-8";
h1{background:blue;}
h1{font:bold 12px/100px Verdana; color:white;}

先问个问题，这段代码有问题吗？呃，，看下面的解释吧！

规则
CSS 2.1 规范中有以下描述：@charset 规则必须出现在样式表的最开始，它前边不能有任何字符。用户代理（即浏览器）必须忽略任何不是在样式表最开始的 @charset 规则。

见W3C CSS2.1 文档：http://www.w3.org/TR/CSS21/syndata.html#charset

很明显，上面代码中的 @charset 的位置是不符合标准的。在这种情况下，浏览器应该忽略此规则。

截图
CSS2.1中只是规定了应当忽略@charset ，但是没有说会不会影响其中样式。看以上代码在各浏览器中的截图。
Chrome和Safari中：

其他浏览器：


出什么事儿了？仔细看看，在Chrome和Safari中，有一条CSS规则(h1{background:blue;})竟然没有起作用……

可见
根据 CSS 2.1 规范的描述，当一个 '@charset' 规则没有出现在样式表的最开始时，浏览器应该忽略该规则。
   
但在 Chrome Safari 中，如果 '@charset' 规则之前有非空白字符或注释的内容存在，那么该规则之后的一个规则集将失效。

解决
要使用 '@charset' 规则，请确保将其放在样式表的最开始。

原文来自
http://www.w3help.org/zh-cn/causes/RN5001

更多兼容性问题：
【分享】浏览器兼容性问题目录

......... 打酱油的 路过