@supports CSS At-Rule

Description

The @supports CSS at-rule allows you to check whether a browser supports this or that feature, and based on this create a set of style rules. It is permissible to create complex conditions using the logical operators not, and, or.

Syntax

@supports  {
  /* specific rules */
}

Values

• notThe not operator can precede any expression to create a new expression, resulting in the negation of the original one. The following example returns true if the browser's transform-origin property doesn't consider 10em 10em 10em valid:

  @supports not (transform-origin: 10em 10em 10em) {}

• andThe and operator creates a new expression from the conjunction of two shorter expressions. It returns true only if both of the shorter expressions are also true. The following example returns true if and only if the two shorter expressions are simultaneously true:

  @supports (display: table-cell) and (display: list-item) {}

• orThe or operator creates a new expression from the disjunction of two shorter expressions. It returns true if one or both of the shorter expressions is also true. The following example returns true if at least one of the two shorter expressions is true:

  @supports (transform-style: preserve) or (-moz-transform-style: preserve) {}

Example

@supports (display: grid) {

  div {

    display: grid;

  }

}

@supports not (display: grid) {

  div {

    float: right;

  }

}

Browser Support

Desktop
X	12	28	?	12.1	9
Tablets / Mobile
≤37	28	?	12.1	9	Yes