- From: Andrea Rendine <master.skywalker.88@gmail.com>
- Date: Sun, 5 Apr 2015 05:46:08 +0200
- To: Glen Huang <curvedmark@gmail.com>
- Cc: Cameron McCormack <cam@mcc.id.au>, www-style list <www-style@w3.org>
- Message-ID: <CAGxST9m7k=YRJrQ86uJ9NRNihCoGghqE3j+vPtUyasJMAUuObQ@mail.gmail.com>
> 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