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

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