Media queries and calc

calc isn’t a new feature, but at the time of writing MDN describes it as experimental:

this technology’s specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers

– MDN

According to caniuse.com, it’s a little safer than MDN suggests.

One area where it does fall over is media queries. For a number of reasons, it’s better practice to use proportional media queries (em) than pixel based media queries.

This falls over with range based media queries, consider the following:

@media (min-width:64px) and (max-width:127px) {
  /* two cells/row */
  .grid-cell:nth-child(2n+1) { clear: left; }
}

@media (min-width:128px) {
  /* three cells/row */
  .grid-cell:nth-child(3n+1) { clear: left; }
}

calc becomes necessary when converting this exactly to proportional based media queries:

@media (min-width:4em) and (max-width:calc(8em - 1px)) {
  /* two cells/row */
  .grid-cell:nth-child(2n+1) { clear: left; }
}

@media (min-width:8em) {
  /* three cells/row */
  .grid-cell:nth-child(3n+1) { clear: left; }
}

As far as I am concerned, the above code demonstrates why calc is one of modern CSS’s most elegant features. You can have your animations, your gradients, your rounded corners. I will take calc.

Unfortunately it doesn’t work in media queries*.

Options for calc-less media queries

Hoping browsers round down and using @media (min-width:4em) and (max-width:59.99em).

Hoping browsers include media queries in zoom calculations and using pixel based values. Not including them started as a bug, in up-to-date browsers it is squashed.

Hoping reverting the value in this code block won’t cause unforeseen interference with other code.

@media (min-width:4em) {
  /* two cells/row */
  .grid-cell:nth-child(2n+1) { clear: left; }
}

@media (min-width:8em) {
  /* three cells/row */
  .grid-cell:nth-child(2n+1) { clear: none; }
  .grid-cell:nth-child(3n+1) { clear: left; }
}

Regardless, there is some amount of hope involved. Fortunately, the amount of hope in web development is in sharp decline, I’m sure it won’t be too long before the above is resolved.

*Checked Jan 20, 2015 against Chrome 39, Firefox 34 & Safari 8 on OSX