How to Use @supports Rule to Check CSS Compatibility in Browsers

Web developers often face the challenge of ensuring that browsers can handle specific features. To address gaps in browser capabilities, we sometimes use Polyfills. While many turn to Modernizr for this purpose, did you know you can also achieve this using only CSS?

The W3C Draft is developing a new rule, known as @supports. This rule helps you determine whether a browser supports certain CSS features directly through CSS. In this blog post, we will explain how @supports works and how it can be useful in detecting browser capabilities.

How to Use the @supports Rule

The @supports rule differs from Modernizr in that it requires both a property and a value to be specified. For example, if we want to apply CSS3 grid layouts only to browsers that support them, we can structure the code as follows.

@supports (display: grid) {
  .selector {
    display: grid;
    grid-column: 3;
    grid-row: 1;
    grid-row-span: 2;
  }
}

Under the @supports rule, CSS declarations are only executed if the condition is true. In the example provided, the grid layout will only be applied if the browser supports the display: grid property. Otherwise, the browser will default to other specified rules outside of @supports.

Combining Conditions with @supports

You can also mix multiple conditions using the and, or, and not operators in the @supports rule. For instance, imagine you want to apply specific CSS rules only under certain conditions:

• The browser supports either CSS3 Grid or CSS3 Flexbox.
• The browser supports CSS3 Columns.

Here’s how you could write the conditional CSS rules:

@supports 
((display: grid) or (display: flexbox)) 
and (column-count: 3) {
  /* Your CSS rules here */
}

It’s important to use parentheses to group each condition correctly. This ensures the browser interprets the rules as intended. The following example shows an incorrect format that could confuse the browser:

@supports 
(display: grid) or (display: flexbox) and (column-count: 3) {
  /* Your CSS rules here */
}

Final Thoughts on @supports

This feature is highly beneficial and can be incredibly useful in various situations.

However, for the @supports rule to be effective, it must be supported by the browser in use; if not, the method will not work. As of this writing, Opera is the only browser that has implemented this feature fully. Therefore, until the specification is finalized and widely adopted by all major browsers, it’s advisable to refrain from using this method in production environments. For experimental purposes, though, feel free to use it extensively.