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

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

From: Glen Huang <curvedmark@gmail.com>
Date: Fri, 10 Apr 2015 19:45:49 +0800
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
Message-Id: <7D325174-D4FA-4C4E-8547-288D217F6780@gmail.com>
To: Andrea Rendine <master.skywalker.88@gmail.com>
@Andrea

Glad you like the idea, but I'm not sure @viewport being nested in @initial makes sense. @intial selects an element, what does specifying @viewport inside an element mean?

@tab @cam

I'd like to provide a few more use cases for variables in media queries:

1. Mutually exclusive media queries:

--narrow-width: 300px
--wide-width: 800px

@media (width <= var(--narrow-width))
@media (var(--narrow-width) < width <= var(--wide-width))

2. Design media queries according to minimal size of an element:

--min-thumbnail-width: 100px

@media (width >= calc(3 *var(--min-thumbnail-width)) {
  .thumbnail { width: 33% } // three thumbnails in a row
}

@media (width >= calc(4 *var(--min-thumbnail-width)) {
  .thumbnail { width: 25% } // four thumbnails in a row
}

I really like to see variables in media queries. They are easily polyfillable with a preprocessor if the variables won't be live (in the sense that no nesting contexts can change them).

> On Apr 9, 2015, at 7:09 PM, Andrea Rendine <master.skywalker.88@gmail.com> wrote:
> 
> Well then, I have to admit I like it very much!
> The concept of having initial values to resolve media queries to avoid
> circular dependency is not new (see CSS Device Adaptation et al.), but
> I find it disturbing the value used to resolve MQs in that case is
> different depending on whether the content of MQ affects viewport, or
> style application.
> 
>> We can also constrain the power of @intial by only allowing custom properties in it, if it creates less problems.
> What if @initial could also contain @viewport?
> Or, in general, it could contain whatever can affect media queries, so
> that properties specified in it are the only values which can affect
> MQs.
> It would be the opposite of the concept of "scope" I proposed some
> days ago and which is not logically applicable to CSS.
Received on Friday, 10 April 2015 12:12:07 UTC

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