CSS @supports rule

Definition and Usage

CSS @supports The rule is used to test whether the browser supports a certain CSS feature and defines fallback styles if it is not supported.

Example

If the browser supports display: grid, apply @supports CSS within the rule. If not supported, apply @supports Styles of the .container class outside the rule:

/* If the browser does not support display: grid, use this CSS */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}
/* If the browser supports display: grid, use this CSS */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

Try It Yourself

CSS Syntax

@supports (supports-condition) {
  /* If the condition is true, apply this CSS */
}

Attribute Value

Value Description
supports-condition

Conditions are defined in the form of name-value pairs (property: value) or function() syntax.

Conditions can be combined with and, or, or not.
selector()

It is the function() syntax. It checks whether the browser supports the specified selector syntax.

For example, @supports selector(h2 > p) returns true and applies CSS styles if the browser supports child combinators.
font-tech()

It is the function() syntax. It checks whether the browser supports the specified font technology.

For example, @supports font-tech(color-svg) returns true and applies CSS styles if the browser supports SVG multi-color tables.
font-format()

It is the function() syntax. It checks whether the browser supports the specified font format.

For example, @supports font-format(woff) returns true and applies CSS styles if the browser supports WOFF 1.0.

Browser Support

The numbers in the table indicate the browser version that first fully supports the @ rule.

@ Rule Chrome Edge Firefox Safari Opera
@supports 28 12 22 9 12.1
font-format() 108 108 106 17 94
font-tech() 108 108 106 17 94
selector() 83 83 69 14.1 69