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

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