The @supports rule lets you apply styles only if the browser understands a specific property, or property: value pair. It's finally accumulated a critical mass of browser support, and degrades fairly gracefully; if the browser doesn't understand @supports, it probably won't understand the fancy CSS you're testing for.

  @supports (text-shadow: 3px 3px 0 #000) {
  h1 {
    color: transparent; /* Should be safe to do this now */
    text-shadow: 3px 3px 0 #000;
  }
}

But what about selectors? @supports only takes a property, or a property/value pair.

Turns out we don't need anything to do that; the capability exists since CSS1. Browsers will ignore entire declaration blocks if they don't understand any selectors, even if they're comma-separated. So to progressively enhance the checkbox hack, because some browsers have problems with it, we'll attach a bogus tag name with the tested selector:

  supports:checked, /* this is the important bit */
input[type="checkbox"] {
  opacity: 0;
}

input[type="checkbox"]:not(:checked) + label {
  background: url(/unchecked-box.svg);
}

input[type="checkbox"]:checked + label {
  background: url(/checked-box.svg);
}

Without that first supports:checked, the user would see nothing; a checkbox with zero opacity but no background image applied.


510 0 1