Re: [css-variables][mediaqueries] Allow var() in media queries?

The crux of my proposal is this:

declarations specified in @inital apply to an imaginative parent of :root

@initial {
  color: #000; /* regular property */
  --color2: #111; /* custom property */
}

:root {
  // inherits color, --color2 from @intial
}

The @initial at-rule is special that
variables used in media queries are resolved to the values of custom properties specified in @initial.
it’s a syntax error to specify @initial in @media.

This way, we avoid the recursion problem.

You can specify custom properties in :root, they override @intial, but variables used media queries won't be resolved to them, only regular rules.

I guess we can make other at-rules use custom properties specified @intial. @page, @viewport, just to list a few. Not sure if it creates new problems in the process.

We can also constrain the power of @intial by only allowing custom properties in it, if it creates less problems.

@initial {
  color: #000; /* ignored */
  --color2: #111; /* ok */
}

> On Apr 8, 2015, at 7:42 PM, Andrea Rendine <master.skywalker.88@gmail.com> wrote:
> 
> Glen,
> in your first message I didn't understand what would happen when @initial were not used, if existing. That is, if @initial were implemented, then variables shouldn't be specified in :root but in @initial, should they?
> My idea is to propose something like a CSS scope (in the sense of Javascript scope, of course) so that variable values (both var() and, e.g., @viewport) cannot escape their @media reference block and therefore do not participate in condition definition for their scope itself (I also sent a proposal in that sense).
> I hope someone solves this, because I guess there's another proposal _en route_ about variables and "classes" which would probably benefit from a stricter definition of separate "instruction blocks".
> Andrea
> 
> 2015-04-08 12:30 GMT+02:00 Glen Huang <curvedmark@gmail.com <mailto:curvedmark@gmail.com>>:
> @custom-media mitigates the duplication issue, but still not perfect in case like this:
> 
> :root {
>         --horizontal-nav-width: 600px;
> }
> 
> @custom-media --horizontal-nav-fits (width >= var(--horizontal-nav-width))
> @media (--horizontal-nav-fits) {
>         .nav {
>                 width: var(--horizontal-nav-width);
>                 margin: 0 auto;
>         }
> }
> 
> In this case, I design the media query specifically for the navigation. So it would be great if I can reuse the dimension in media query. Otherwise I have at least two places to edit when, for example, the number of navigation links change, and the allowed width is changed.
> 
> The recursion problem can be solved either as mentioned by Andrea (variables used in media query aren't live, they only resolve to the custom properties of the top level :root rule), or as mentioned by me (variables used in media query resolve to the custom properties of an at-rule that can’t be specified in a media at-rule).
> 
> Not sure if these two approaches are feasible.
> 
> > On Apr 8, 2015, at 8:30 AM, Tab Atkins Jr. <jackalmage@gmail.com <mailto:jackalmage@gmail.com>> wrote:
> >
> > On Sat, Apr 4, 2015 at 12:59 AM, Glen Huang <curvedmark@gmail.com <mailto:curvedmark@gmail.com>> wrote:
> >> Does this do what I think it does?
> >>
> >> ```css
> >> :root {
> >>        --page-width: 768px;
> >> }
> >> @media (min-width: var(--page-width)) {}
> >> ```
> >>
> >> If not, is it because media queries don’t inherit properties from the :root element? If that’s the case, can we add a selector to select a special element that the :root element and media queries will all inherit from?
> >>
> >> When you design the media query break points according to certain element dimensions, being able to use variables in media queries can be very helpful.
> >
> > The var() function, when used on an element, just replaces itself with
> > the value of the given custom property on the same element.  @media
> > rules aren't referring to any element, so they don't have any
> > properties at all, let alone custom properties.
> >
> > You could let it refer to the value of the custom properties on the
> > root, as you suggest, but as Cameron says, it makes it way too easy to
> > get into bad loop situations.
> >
> > What you want are just Custom Media Queries
> > <http://dev.w3.org/csswg/mediaqueries/#custom-mq <http://dev.w3.org/csswg/mediaqueries/#custom-mq>>.  That way you could
> > define something like:
> >
> > @custom-media --large-page (width >= 768px);
> > @custom-media --small-page (width < 768px);
> > @media (--large-page) { ... }
> >
> > ~TJ
> 
> 
>