- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Fri, 10 Apr 2015 11:17:40 -0700
- To: Glen Huang <curvedmark@gmail.com>
- Cc: Andrea Rendine <master.skywalker.88@gmail.com>, www-style list <www-style@w3.org>
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 Friday, 10 April 2015 18:18:27 UTC