@supports support with fallbacks

[iamnewton]

This rule tests whether a browser supports a feature, then applies the styles for those elements if the condition is met. It's sort of like Modernizr but tailored specially for CSS properties.

/* Check one supported condition */
@supports (display: flex) {
  .module { display: flex; }
}

 /* Check multiple conditions */
@supports (display: flex) and (-webkit-appearance: checkbox) {
  .module { display: flex; }
}