css - 无效字符使声明无效时的意外 css 行为

Question

我最近遇到一个问题，字体声明不起作用，我的自定义字体由于某种原因默认为 arial。当我调查时发现在 font-face 声明之前有一个杂散的无效字符

像这样:

 v
 @font-face {
    font-family: 'Somefont';
    src: url('somefont.eot?') format('eot'), 
         url('somefont.woff') format('woff'), 
         url('somefont.ttf') format('truetype');
}

所以在这个例子中，'v' 停止了 font-face 声明的工作，这是有道理的。这之后的所有样式声明都正常工作，同样如您所料。

我的问题虽然与我的无效字符和我的样式声明之间存在有效注释的事实有关，如下所示:

v
/* 
 * FONTS
 * ------------------------------------
 */

@font-face {
    font-family: 'Somefont';
    src: url('somefont.eot?') format('eot'), 
         url('somefont.woff') format('woff'), 
         url('somefont.ttf') format('truetype');
}

所以这就是我有点坚持的地方:

我原以为无效的“v”字符什么都不做，并且评论(格式正确)会重置 css 的无效性并允许第一个字体正常工作，就像在第一个示例中，第一个字体声明“受到打击”并允许剩余的 css 正常工作。

它是直接的 css，因此没有预处理器参与。

有比我更了解 css 的人愿意解释一下吗？

注意我正在寻找关于为什么它允许样式声明重置/偏移无效字符而不是评论的技术解释，而不是如何避免 css 错误/错误

Answer 1

简单:在部署之前验证您的 CSS。通过将有问题的 CSS(带有杂散的 v)传递给 W3C's CSS validator ，您将在第二行收到解析错误。

流浪的 v 使您的 CSS 文件无效的原因是因为规则，当没有被 ';' 分隔时并且不以'}'结尾，将被假定为连续直到下一个非空格字符。多个空格将被视为一个空格。

为了更好地说明我的观点，所有这些行都是有效的:

body {
    height: 100%;
    padding: 20px 10px;
}

body {
    height:
    100%
    padding: 20px
             10px;
}

body {
    height: 100%;
    padding: 20px
             10px
}

---

回到你的问题，为什么注释不会阻止语法错误的传播:注释被解析器完全忽略，所以它不会阻止语法错误“传播”，即使它发生在注释的上游，即该注释不能作为早期语法错误的权宜之计。

因此，给定您的 CSS 代码:

v
 @font-face {
    font-family: 'Somefont';
    src: url('somefont.eot?') format('eot'), 
         url('somefont.woff') format('woff'), 
         url('somefont.ttf') format('truetype');
}

实际上相当于:

v @font-face {
    font-family: 'Somefont';
    src: url('somefont.eot?') format('eot'), 
         url('somefont.woff') format('woff'), 
         url('somefont.ttf') format('truetype');
}