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

> 
> On 22 Apr 2015, at 05:27, Glen Huang <curvedmark@gmail.com> wrote:
> 
>> I think both should follow the example of @import and have very strict location at the top of the stylesheet where they can be defined.
> 
> +1, that will make things much easier.
> 
> Currently, @viewport being nested in @media is a brain teaser. I doubt it will be wildly useful.

I would probably not object to restricting @viewport to the top of a stylesheet.

And given that @viewport has the min/max-width/height syntax, I agree with you that nesting it
in a media query that's testing width or height should fairly rare.

However, we still need to define what @viewport does if it depends on media queries, whether or not
we  allow it in @media.

1) Since you can have @viewport inside a stylesheet imported by a link element that has a media
attribute, or an @import statement with media queries, or a style element with a media attribute,
we need to define what it does anyway.

We could cause @viewport to be ignored it depends a media query (@media or otherwise),
but that would be pretty surprising to authors, especially considering point 2.

2) Media queries are not only used for width and height. Consider this:

<link rel="stylesheet" media="screen" href="/style.css">
<link rel="stylesheet" media="print" href="/print.css">

style.css
========
@viewport { width: auto; }
...


the @viewport does depend on a media query, and having it do nothing wouldn't
be very author friendly.



As for restricting @custom-media to the top of the stylesheet, I am less convinced.

1) custom media queries will also be possible to define in js, so even if you've
restricted @custom-media the the top stylesheets and parsed the top of all styleheets,
you're still not sure that you know of all custom media queries.

2) Doing this seems useful:

@custom-media --foo-bar: false;
@supports ((foo:bar) or (-moz-foo: bar) or (-ms-foo: bar) or (-webkit-foo: baar) or (-o-foo: bar)) {
  @custom-media --foo-bar: true;
}

Restricting @custom-media to the top of a stylesheet would disallow that. We could add extra
syntax just for it, maybe @custom-supports or
"@media <extension-name> supports(<supports-condition>);"
but that seems to be complicating things more than needed.

 - Florian

Received on Wednesday, 22 April 2015 15:34:24 UTC