W3C home > Mailing lists > Public > www-style@w3.org > April 2015

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

From: Andrea Rendine <master.skywalker.88@gmail.com>
Date: Sun, 5 Apr 2015 05:46:08 +0200
Message-ID: <CAGxST9m7k=YRJrQ86uJ9NRNihCoGghqE3j+vPtUyasJMAUuObQ@mail.gmail.com>
To: Glen Huang <curvedmark@gmail.com>
Cc: Cameron McCormack <cam@mcc.id.au>, www-style list <www-style@w3.org>
> you can easily set up rules inside the @media that change what the @media condition
evaluates to

I'm new to this thread and to the matter itself, but wouldnt it be possible
to solve this case in a way similar to that proposed to solve the conflict
between @viewport and media queries in CSS Device Adaptation.
Media queries should be evaluated according to the rules specified outside
of them, without being affected by the same changes they cause. So
  :root {
    --page-width: 768px;
  }

  @media (min-width: var(--page-width)) {
    :root {
      --page-width: 120px;
    }
  }

This case, @media is evaluated with the value of min-width = 768px, and
local changes made by it (overwriting --page-width to 120px) cannot affect
it.
Is it possible, on a programming sense?

2015-04-05 4:24 GMT+02:00 Glen Huang <curvedmark@gmail.com>:

> Ah, this indeed is undesirable.
>
> But what about we add a new at rule:
>
> ```css
> @initial {
>         --page-width: 768px;
> }
> ```
>
> properties (custom or regular) specified in this at rule apply to a
> special (imaginative, can’t be queried) element that all elements and media
> queries inherit from. It can’t be specified in a @media rule:
>
> ```css
> @media (min-width: var(--page-width)) {
>         @initial { /* syntax error, ignored */
>                 --page-width: 768px;
>         }
> }
> ```
>
> > On Apr 5, 2015, at 7:41 AM, Cameron McCormack <cam@mcc.id.au> wrote:
> >
> > Glen Huang:
> >> 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.
> >
> > I agree it would be helpful, but a problem with this is that you can
> > easily set up rules inside the @media that change what the @media
> > condition evaluates to:
> >
> >  :root {
> >    --page-width: 768px;
> >  }
> >
> >  @media (min-width: var(--page-width)) {
> >    :root {
> >      --page-width: 120px;
> >    }
> >  }
> >
> > So far CSS has avoided adding any new situations like this (the existing
> > problem with :hover rules moving the element is one we are stuck with).
> >
> > --
> > Cameron McCormack ≝ http://mcc.id.au/
>
>
>
Received on Sunday, 5 April 2015 03:46:37 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:30 UTC