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

@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