Re: [mediaqueries][css-values] Use cases for calc() in MQ?

> Currently it seems no browser supports calc() in media queries, but it 
> should be supported per spec.
>
> Does anyone have examples where calc() in media queries is useful? 
> Examples of sites that use such breakpoints today (implemented in JS)?
>
> François REMY came up with an example:
> > @yoavweiss @zcorpan if you have a fixed size column and want to know 
> > remaining aspect ratio: (a)media (min-width: calc(100vh + 300px)) {}
> https://twitter.com/FremyCompany/status/461060172790915072
>
> ...but didn't know of any sites actually doing that today 
> (https://twitter.com/FremyCompany/status/461072179174854656).
>
> On the one hand, it would be "nice" to support calc() everywhere. On the 
> other hand, resources are limited and it's better if we focus on 
> supporting things that people really want to do and skip the things that 
> are only "nice". Therefore I suggest that we disallow calc() in media 
> queries unless someone comes up with a compelling use case or demonstrates 
> URLs that would benefit from supporting this.

An argument I've also seen elsewhere is that MQs are used outside the 
context of CSS (ie: link@media) and keeping their syntax simple is therefore 
an interop advantage.

That means only accepting values that are :

    - dimensions (min-width: 800px)
    - keywords (pointer: coarse)
    - numbers (color: 32)

I've no strong opinion on this, but I think if no browser does support 
calc() expressions in MQs or has plan to support them, it should probably be 
codified in a spec (that we may want to revisit in the future should 
compelling-enough use-cases appear).

(Background: this discussion started as Yoav Weiss found out it would be 
easy for him to add support for "calc()" in MQs as part of his work on the 
<picture> tag implementation -- but wondered if it would make sense to add 
those if other browsers didn't feel compelled to do so, too)

Received on Tuesday, 29 April 2014 10:39:37 UTC