[css-cascade-4] Conditional @import: supports interaction with media queries

There's no example of an @import with both supports and media queries. The
syntax specification states that the supports must go before the media
query, but this is not specifically called out. Which of the following are
valid?

   1. @import url("xxx.css") supports(display: flex) print;
   2. @import url("xxx.css") print supports(display: flex);
   3. @import url("narrow.css") supports(display: flex) handheld and
   (max-width: 400px);
   4. @import url("narrow.css") supports(display: flex) (handheld and
   (max-width: 400px));
   5. @import url("narrow.css") supports(display: flex) and handheld and
   (max-width: 400px);
   6. @import url("xxx.css") supports((display: flex) and (display: block));
   7. @import url("xxx.css") supports(display: flex) and supports(display:
   block);

My reading of the spec is that 1, 3 and 6 are valid, 2, 5 and 7 are
invalid, and I'm not sure about 4. An example or two would help make this
clearer.

Cheers,
Tom

Received on Thursday, 10 September 2015 15:42:32 UTC