Re: [css-cascade] Allowing @import to be conditional on @supports queries

> On 20 Mar 2015, at 01:07, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> 
> On Thu, Mar 19, 2015 at 4:00 PM, fantasai <fantasai.lists@inkedblade.net> wrote:
>> On 01/15/2015 07:38 PM, Bjoern Hoehrmann wrote:
>>> 
>>> * Tab Atkins Jr. wrote:
>>>> 
>>>> I propose that we allow this by adding a
>>>> "supports(<supports-condition>)" function to the end @import grammar,
>>>> like:
>>>> 
>>>> ```
>>>> @import [ <url> | <string> ] [ <media-query-list> ||
>>>> supports(<supports-condition>) ]? ;
>>>> ```
>>> 
>>> 
>>> If I am not mistaken, that would not really be at the end, and I am not
>>> thrilled about
>>> 
>>>   @import url(...) a, b supports(...);
>>>   @import url(...) supports(...) a, b;
>>> 
>>> since white space usually binds more tightly than the comma, so it looks
>>> as though `supports` binds to the `b` in the first example and to `a` in
>>> the second example. Also
>>> 
>>>   @import url(...) not screen supports(...);
>>> 
>>> seems awkward at first glance, and people might then be tempted to write
>>> 
>>>   @import url(...) not supports(...);
>>> 
>>> which looks plausible but does not seem supported by the proposal.
>> 
>> 
>> I think this is a fair point. Do you have an alternate suggestion for
>> syntax?
> 
> We decided on:
> @import <url> [ supports(<supports-condition>) ]? <media-query-list>? ;
> 
> This uses positioning to keep them clearer, and keeps all the
> space-delimited bits together, so the MQ can trail off at the end on
> its own, similar to the font shorthand.

One of the downside of this is that it requires double parentheses in simple cases:

@import "http://example.com/foo.css" supports((display:flex));

It made sense to mandate the parentheses in the @support rule, but they seem overkill here, and is probably surprising for authors. We could do:

@import <url> [ supports(<supports-condition> | <declaration>) ]? <media-query-list>? ;

which would let you write:

@import "http://example.com/foo.css" supports(display:flex);

 - Florian

Received on Friday, 20 March 2015 11:34:46 UTC