Unclosed quote in a CSS block

Question

This snippet is red on Firefox and blue on Chrome. Who is right?

* { background: red; '}
* { background: blue; }

§4.1.6 Blocks says:

Single (') and double quotes (") must also occur in matching pairs, and characters between them are parsed as a string.

But if ' or " do not occur in matching pairs, how should the syntax error be handled?

Answer 1

By my reading of 4.2 Parsing Errors, and the so-called "rules for matching pairs" the construct:

* { background: red; '}
* { background: blue; }

Should be read as:

* { background: red; ...<EOF> }

That is, everything in the file after the '} is going to be discarded because there's no matching } for the { in that line (because there's always another { first before another } is seen), so it will not get closed until the end of the file implicitly closes it.

Of course, it's really complicated, so I could be wrong...

---

Further reading through the CSS21 grammar seems to confirm this. Basically, there are two effects in play here:

1. An unmatched ' will cause everything to the end of the current line to be ignored. And,
2. An unmatched { will cause everything to the end of the file to be parsed as though it is still part of the same Block of Declarations.

So basically, #1 causes the closing } to be lost. And #2 probably causes everything after it to be lost because it cannot be parsed as a valid declaration with the block (because the {..} nesting count will always be wrong).

Answer 2

While Chrome simply ignores the line without complaining, Firefox stops processing the CSS any further and logs a warning (this applies at least to Chrome 41.0.2.. and FF 36.0.1 on Mac OS X Yosemite):

Found unclosed string ''}'. Expected declaration but found ''}'. Skipped to next declaration.

And though the warning says Skipped to next declaration., FF actually does not in my case (added a bit of css before and after the code provided).

Both is not a very good solution in my opinion since the web relies in big parts on CSS these days, so neither should a Browser ignore a syntax error nor should it stop processing the css altogether.

I know Safari wasn't mentioned in the question and I'm not really a big fan of it, but here's what it does: Log a warning, skip the line and process the rest of the file. This is what I would expect.

Just my 0.02..