W3C home > Mailing lists > Public > www-style@w3.org > September 2015

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

From: Tom Potts <karaken12@gmail.com>
Date: Thu, 10 Sep 2015 16:42:00 +0100
Message-ID: <CAF2aeH16rPZpHKqszk44_f4JrhWWryMsut+-eOT-mo03Xnf8vA@mail.gmail.com>
To: CSS WG <www-style@w3.org>
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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:56 UTC