Testing support of calc-sum comparison functions in media queries

Shown here is a demonstration of 3 calc-sum comparison functions and whether or not they are supported by the current browser.

by David Partyka

HTML

<p class=max>If max() is supported in a media query, this text will be green.</p>
<p class=min>If min() is supported in a media query, this text will be green.</p>
<p class=clamp>If clamp() is supported in a media query, this text will be green.</p>

<br>

<p class=max-mixed>If max() using mixed units is supported in a media query, this text will be green.</p>
<p class=min-mixed>If min() using mixed units is supported in a media query, this text will be green.</p>
<p class=clamp-mixed>If clamp() using mixed units is supported in a media query, this text will be green.</p>

CSS

p {
  font-size: 20px;
  color: red;
  margin: 20px 0
}

@media (max-width: max(1000000px, 2000000px, 1px)) {
  p.max {
    color: green
  }
}
@media (min-width: min(1000000px, 2000000px, 1px)) {
  p.min {
    color: green
  }
}
@media (max-width: clamp(1px, 50000px, 1000000px)) {
  p.clamp {
    color: green
  }
}

@media (max-width: max(1000000em, 2000000px, 1rem)) {
  p.max-mixed {
    color: green
  }
}
@media (min-width: min(1000000rem, 2000000rem, 1px)) {
  p.min-mixed {
    color: green
  }
}
@media (max-width: clamp(1em, 50000px, 1000000rem)) {
  p.clamp-mixed {
    color: green
  }
}