[CSS2.1] Grammar for @media versus general block parsing

An @media block in the grammar is defined as a MEDIA_SYM followed by an LBRACE followed by optional rule-sets followed by an RBRACE. Because @media is a known at-block with pre-defined semantics we treat the grammar piece as absolute and I think other browsers do as well, but there is one discrepancy. Here is the test case and the results.

<!Doctype HTML>
<style>
@media all
{
    @import url(foo.css);
    DIV { color: red; }
}
</style>

<DIV>Hello</DIV>

IE 8 - Black
Opera 9.5 - Black
Safari 3.1 - Black
Firefox 3 - Red

What I believe to be happening is that Firefox treats the @media block as if it were a general block and so it detects the @import as an at-rule and follows at rule semantics and therefore throws it out cleanly. It can then process the following selector. In IE 8 we try immediately to parse a rule-set, which fails at the @ token, and so we go into rule-set recovery which eats the following block. If you add a second DIV rule, both IE and Opera will pick that one up. Safari fails to pick it up (not sure why). Firefox will definitely pick it up because it picked up the first one, so the second is simply normal parsing.

So the question is, should the grammar in this case be read strictly since it clearly points out a semantic for the @media block, and thus only allow rule-sets making the Opera/IE 8 behavior correct? Or should the parsers allow any statement within the block including the at-rule?

Justin Rogers [MSFT]

Received on Tuesday, 24 June 2008 15:40:49 UTC