@supports CSS At-Rule

Description

The CSS @supports at-rule allows you to specify CSS declarations that depend on a browser's support for CSS features. This is useful for providing progressive enhancement, where you can provide different CSS styles for browsers that support different CSS features.

The @supports at-rule takes a single argument, which is a feature query. A feature query is a Boolean expression that evaluates to true if the browser supports the specified CSS feature, and false otherwise. Feature queries can be combined using AND, OR, and NOT operators.

The @supports at-rule can be used in any context where CSS declarations can be used. However, it is most commonly used at the top level of a CSS stylesheet, so that the different CSS styles can be applied to the entire page.

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

The following table will show you the current browser support for the at-rule @supports.

Desktop
Edge Chrome Firefox Opera Safari
12282212.19
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
282212.191.54.4

Last updated by CSSPortal on: 30th September 2023