Compare and contrast: valid and invalid use of calc() in media queries

This JSFiddle demonstrates that calc() functions in media queries are valid UNLESS (a) "mixed" units are used or (b) percentages are used.

by David Partyka

HTML

<div>
This is a test - this is only a test
</div>

CSS

div {
  background: #fff;
  width: calc(20em - 20px); /* Notice mixed units are fine here - but see below */
  height: 200px;
  padding: calc(2% - 1%) /* Notice percentages are fine here */
}

@media (min-width:calc(2em - 1em)) { div { color: green } } /* same non-percentage units - valid */
@media (min-width:calc(2px + 1px)) { div { border: 2px solid green } } /* same non-percentage  units - valid */

@media (min-width:calc(2em - 1px)) { div { color: red!important } } /* mixed units - invalid except Firefox */