Skip to main content

CSS @support

The @supports rule in CSS to be a powerful tool for feature detection. This rule allows you to write conditional CSS that will only be applied if the browser supports a particular property or value, making it easier to implement progressive enhancement and graceful degradation strategies.

Syntax​

The basic syntax of @supports is as follows:

@supports (CSS feature) {
  /* CSS rules for browsers that support the feature */
}

You can also use logical operators like and, or, and not to test multiple features:

@supports (display: grid) and (grid-template-areas: none) {
  /* CSS rules for browsers that support both features */
}

Examples​

  1. Using @supports for Grid Layout

    @supports (display: grid) {
      .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
    }

  2. Using @supports with Logical Operators

    @supports (display: flex) or (display: grid) {
      /* CSS rules for browsers that support either flexbox or grid */
    }

  3. Using @supports with not Operator

    @supports not (display: table-cell) {
      /* CSS rules for browsers that do not support display: table-cell */
    }

Best Practices​

  • Progressive Enhancement: Use @supports to provide an enhanced experience for browsers that support newer CSS features, while offering a basic experience for others.

  • Avoid Redundancy: Don't repeat the same styles inside and outside of the @supports rule. Only include the styles that are specific to the feature you're testing.

  • Testing Multiple Features: If you need to test for the support of multiple features, use logical operators to combine multiple conditions.

  • Browser Support: While @supports is widely supported, some older browsers may not recognize it. In such cases, the contained styles will simply be ignored, so make sure to provide sensible defaults.

  • Feature Queries and JavaScript: You can also use JavaScript to test for CSS support using CSS.supports() method, which can be useful for more complex logic that can't be expressed in CSS alone.

if (window.CSS && CSS.supports("display", "grid")) {
  // Do something
}