Re: [css-cascade][mediaqueries] Allow custom mq before @import?

> 
> On 15 Apr 2015, at 17:51, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> 
> On Wed, Apr 15, 2015 at 4:50 AM, Glen Huang <curvedmark@gmail.com> wrote:
>> I see the rationale. Thanks.
>> 
>> You mentioned the possibility of custom media being redefined. I can't help but wonder how it works:
>> 
>> ```
>> @import "def.css";
>> @import "redef.css" (--foo);
>> @import "foo.css" (--foo);
>> ```
>> 
>> def.css
>> ```
>> @custom-media --foo true;
>> ```
>> 
>> redef.css
>> ```
>> @custom-media --foo false;
>> ```
>> 
>> Will this cause "foo.css" not being imported?
> 
> Good question!  The spec needs to be clarified, but an @custom-media
> rule inside of a MQ block "indirectly depends" on the features tested
> by the MQ block, so you're not allowed to be circular with that
> either.  Since a conditional import is identical to an unconditional
> import that wraps its contents in a MQ block, this means that the line
> in redef.css is invalid due to circularity, and (--foo) stays true.

This got me thinking about a point I think we might need to make the
spec more explicit about.

Looking at this example,

@custom-media --schrodinger false; /*1*/
@media not (--schrodinger) {
  @custom-media --schrodinger true; /*2*/
}

The *2* custom media is clearly circular, making it invalid, and
undefining the custom media query. However, *1* is not circular, so it
looks like we could make --schrodinger be false. However I don't think
that we should allow that. It's not only the *2* @custom-media that needs
to be removed due to the circularity, but all @custom-media attempting to
define --schrodinger. As for why, look at this one for example:

@custom-media --schrodinger false; /*1*/
@custom-media --heisenberg false; /*2*/
@media not (--heisenberg) {
  @custom-media --schrodinger true; /*3*/
}
@media not (--schrodinger) {
  @custom-media --heisenberg true; /*4*/
}

If we invalidated rule by rule, removing any of 1, 2, 3 or 4 would
remove the circularity. But it is very unclear which of the 4 that should be.
It's much more predictable to invalidate all of them.

I think the spec wording is correct, but I am not sure it is sufficiently
clear to make this obvious. Maybe we should add the above example(s) to the spec?

>> Also, being able to using custom media in other places sounds wonderful, but does it have to be specified in a <meta>? Could a <style>, placed at an early position of <head>, containing the custom media definitions, be enough to make the custom media queries available document wide?
> 
> Maybe; the issue is just making it easy enough for the preload scanner
> in browsers (which is intentionally fairly dumb and fast) to get hold
> of it.  Parsing a stylesheet enough to find the @custom-media rules
> might be too much, which is why I'm currently thinking of using a
> <meta>.  But maybe it's ok!  We'll find out.

I'm not sure there's a meaningful difference between @custom-media and
@viewport in this scenario.

If this works
 <style>@viewport {width: 500px; }</style>
 <link rel="stylesheet" media="(max-width: 800px)" href="foo.css">

Then this should work
 <style>@custom-media --foo true }</style>
 <link rel="stylesheet" media="(--foo)" href="foo.css">

 - Florian

Received on Thursday, 16 April 2015 08:08:18 UTC