无效的CSS行如何解释? [英] How are the invalid CSS lines interpreted?

问题描述

我花了大约30分钟的时间来调试页面中的字体加载问题，最后我发现自己使用的是错误的评论:

I spent about 30 minutes to debug a font loading problem in a page and I finally found that I was using wrong comment:

// this is a comment
@font-face {
   /* is this ignored? */
   ...
}

.box {
  border: ... /* this was not ignored */
}

在/* ... */中更改//后，将正确加载字体.

After changing // in /* ... */ the fonts are correctly loaded.

所以，我的问题是:无效的CSS行如何解释?它们只是被忽略还是影响了其他CSS属性?

So, my question is: How are the invalid CSS lines interpreted? Are they just ignored or the other CSS properties are affected?

上面的例子只是一个例子.问题是关于通用无效行.

The example above is just an example. The question is about general invalid lines.

欢迎提供良好的官方参考.

A good official reference is welcome.

推荐答案

关于/的事情是，它在CSS2.1语法中的注释定界符或字符串之外均未出现，因此，如果您查看的是语法，则很难分辨如何影响样式表的准确解析.

The thing about / is that it doesn't appear anywhere in the CSS2.1 grammar outside of a comment delimiter or a string, so if you're looking at the grammar, it's hard to tell how it'd affect stylesheet parsing exactly.

它可以算作格式错误的选择器，因为CSS的基本构建块由一个选择器和一个声明块(统称为规则集)组成，但是由于/不会出现在Selectors语法中除了字符串值(选择器不是)之外，我会犹豫地将其视为选择器.

It could count as a malformed selector, because the basic building block of CSS consists of a selector and a declaration block (collectively a rule set), but since / does not appear in the Selectors grammar except in string values, which selectors are not, I would hesitate to consider it as a selector.

我要说的是，在这种特定情况下，它只是一个通用的声明格式不正确:

I would say that in this specific case, it's just a generic statement that's malformed:

• 格式错误的语句.用户代理必须处理解析语句时遇到的意外令牌，方法是读取直到语句结尾，同时遵守匹配()，[]，{}，"和"，并正确处理转义符.例如，格式错误的语句可能包含意外的大括号或关键字.例如，以下各行都将被忽略:

• Malformed statements. User agents must handle unexpected tokens encountered while parsing a statement by reading until the end of the statement, while observing the rules for matching pairs of (), [], {}, "", and '', and correctly handling escapes. For example, a malformed statement may contain an unexpected closing brace or at-keyword. E.g., the following lines are all ignored:

p @here {color: red}     /* ruleset with unexpected at-keyword "@here" */
@foo @bar;               /* at-rule with unexpected at-keyword "@bar" */
}} {{ - }}               /* ruleset with unexpected right brace */
) ( {} ) p {color: red } /* ruleset with unexpected right parenthesis */

一条语句被定义为规则集或规则，通常由一些标记组成，后跟一对大括号( {} )或直到下一个的任何内容分号(; ).再次注意，这里的示例都没有/，但是由于它是通用语句中的意外字符，因此可以预期会导致整个 @ font-face 规则"被忽略.

A statement is defined as either a rule set, or an at-rule, which usually consist of some token, followed by a pair of curly braces ({}) or anything up to the next semicolon (;). Note again that none of the examples here have /, but since it is an unexpected character in a generic statement, it's expected that it'd cause your entire @font-face "rule" to be ignored.

这篇关于无效的CSS行如何解释?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！