How are the invalid CSS lines interpreted?
css
Solution
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.
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 */
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.
Problem
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. 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.