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

Thank you. But I mean the "ideas list for Custom Properties 2" Tab mentioned. Would like to see other ideas for CP2.

> On Apr 11, 2015, at 5:40 PM, Andrea Rendine <master.skywalker.88@gmail.com> wrote:
> 
> Hi Glen!
> Here is the list archive!
> https://lists.w3.org/Archives/Public/www-style/
> Cheers,
> Andrea
> 
> 2015-04-11 8:49 GMT+02:00 Glen Huang <curvedmark@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> 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 12:20:19 UTC