CSS @supports Rule

.flex-container > * {
  padding: 0.3em;
  color: red;
  float: left;
}

@supports (display: flex) {
  .flex-container > * {
     color: green;
     float: none;
  }

  .flex-container {
     display: flex;
  }
}

Meaning

The @supports CSS at-rule lets you specify CSS declarations that depend on a browser's support for CSS features. Using this at-rule is commonly called a feature query. The rule must be placed at the top level of your code or nested inside any other conditional group at-rule.

Standard Syntax:

The @supports at-rule consists of a block of statements with a supports condition. The supports condition is a set of one or more name-value pairs.

@supports (supportsCondition) {
  /* If the condition is true, use the CSS in this block. */
}

The conditions can be combined by conjunctions (and), disjunctions (or), and/or negations (not).

@supports () and () {
  /* If both conditions are true, use the CSS in this block. */
}

Declaration syntax:

The declaration syntax checks if a browser supports the specified property: value declaration. The declaration must be surrounded by parentheses. The following example returns true and applies the CSS style if the browser supports the expression transform-origin: 5% 5%:

@supports (transform-origin: 5% 5%) {
}

The not operator syntax:

The not operator precedes an expression resulting in the negation of the expression. The following returns true if the browser's transform-origin property considers 10em 10em 10em to be invalid:

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

The and operator syntax:

The 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) {
}

The or operator syntax:

The 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) {
}

Function syntax:

The function syntax checks if a browser supports values or expressions within the function. The functions supported in the function syntax are described in the following sections.

selector()

This function evaluates if a browser supports the specified selector syntax. The following example returns true and applies the CSS style if the browser supports the child combinator:

@supports selector(h2 > p) {
}

font-tech()

This function checks if a browser supports the specified font technology for layout and rendering. The following example returns true and applies the CSS style if the browser supports the COLRv1 font technology:

@supports font-tech(color-COLRv1) {
}

font-format()

This function checks if a browser supports the specified font format for layout and rendering. The following example returns true and applies the CSS style if the browser supports the opentype font format:

@supports font-format(opentype) {
}

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status