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: Sat, 11 Apr 2015 14:49:31 +0800
Cc: Andrea Rendine <master.skywalker.88@gmail.com>, www-style list <www-style@w3.org>
Message-Id: <FA37E186-E8BB-4455-A75A-0509F8C959EB@gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Thank you. Is the list publicly available?

> On Apr 11, 2015, at 2:17 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> 
> On Fri, Apr 10, 2015 at 4:45 AM, Glen Huang <curvedmark@gmail.com <mailto:curvedmark@gmail.com>> wrote:
>> @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).
> 
> You make some compelling cases.  I'll put this on the ideas list for
> Custom Properties 2.
> 
> ~TJ
Received on Saturday, 11 April 2015 06:50:01 UTC

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