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

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 10 Sep 2015 11:45:07 -0700
Message-ID: <CAAWBYDAvMaHDJC51HZsGdozKbq5qXOMkREpLwubzYS6yXcgmfg@mail.gmail.com>
To: Tom Potts <karaken12@gmail.com>
Cc: CSS WG <www-style@w3.org>
On Thu, Sep 10, 2015 at 8:42 AM, Tom Potts <karaken12@gmail.com> wrote:
> There's no example of an @import with both supports and media queries.

I'll add one.

> The
> syntax specification states that the supports must go before the media
> query, but this is not specifically called out.

I'm not sure what you mean by this.  The grammar is the normative
definition of what the valid syntax is, and it's clear that supports()
must occur before MQ.  What else are you looking for?

> Which of the following are
> valid?
>
> @import url("xxx.css") supports(display: flex) print;

Yes.

> @import url("xxx.css") print supports(display: flex);

No. (MQ before supports())

> @import url("narrow.css") supports(display: flex) handheld and (max-width:
> 400px);

Yes.

> @import url("narrow.css") supports(display: flex) (handheld and (max-width:
> 400px));

No. (Wrapper parens around MQ)

> @import url("narrow.css") supports(display: flex) and handheld and
> (max-width: 400px);

No. ("and" between supports() and MQ)

> @import url("xxx.css") supports((display: flex) and (display: block));

Yes.

> @import url("xxx.css") supports(display: flex) and supports(display: block);

No. (Two supports() functions.)

> 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.

I'm happy to add an example, but what part of the spec made 2, 4, 5,
or 7 unclear?

~TJ
Received on Thursday, 10 September 2015 18:45:53 UTC

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