css - 为什么指定 @charset "UTF-8"；在你的 CSS 文件中？

Question

我一直将这条指令视为已移交给我的众多 CSS 文件的第一行:

@charset "UTF-8";

它有什么作用，这条规则是否必要？

另外，如果我在我的“head”元素中包含这个元标记，是否不需要在我的 CSS 文件中也出现它？

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Answer 1

这在没有根据 HTTP header 或其他元数据告知编码的上下文中很有用，例如本地文件系统。

设想以下样式表:

[rel="external"]::after
{
    content: ' ↗';
}

如果读者将文件保存到硬盘，而您省略了 @charset规则，大多数浏览器将以操作系统的区域设置编码读取它，例如Windows-1252，并插入 → 而不是箭头。

不幸的是，您不能依赖这种机制，因为这种支持相当……罕见。请记住，在网络上，HTTP header 将始终覆盖 @charset规则。

确定样式表字符集的正确规则按优先顺序排列:

1. HTTP 字符集 header 。
2. 字节顺序标记。
3. 第一个@charset规则。
4. UTF-8。

最后一条规则是最弱的，它会在某些浏览器中失败。
charset <link rel='stylesheet' charset='utf-8'> 中的属性在 HTML 5 中已过时.
注意不同声明之间的冲突。它们不容易调试。

推荐阅读

• 拉斯·罗尔夫:Declaring character encodings in CSS
• IANA:Official names for character sets – 不允许使用其他名称；为 @charset 使用首选名称如果为同一编码注册了多个名称。
• MDN: @charset .有一张支撑台。我不相信这个。 :)
• Test case来自 CSS WG。