The supports command

The @supports command styles elements based on the features supported by the browser. In this command you can create conditions using logical operators not, and, or.

Syntax

css@supports condition {
  
}

Example

Let's set the condition that if your browser supports the display property with the flex value, then only the paragraph with the corresponding text will be displayed, and its font color will be blue:

html<p class="yes">Your browser support display: flex.</p>
<p class="no">Your browser does not support display: flex.</p>

css@supports (display: flex) {
  .no {
    display: none;
  }
  p {
    color: #467CBC;
  }
}
@supports not (display: flex) {
  .yes {
    display: none;
  }
}

Результат:

See also