How to use @supports rule in CSS?

CSS and SCSS both have at-rules that make the logic such as conditional code easier to write.

Using @supports rule you can specify a piece of code that will only executes if the browser supports that feature.

The rule inside @supports parenthesis is called a feature query.

The most used example regarding @supports is the grid support check since CSS grid wasn’t supported in IE and (few other browsers for some time).

This one checks if grid is supported and if so, make the element with main tag a grid.

@supports (display: grid) {
  main{
    display: grid;
  }
}

This one checks if grid is NOT supported and if so, make the main a flex.

@supports not (display: grid) {
  main{
    display: flex;
  }
}

Together they work like if-else blocks basically.

You can just leave out the not supported code block and write a fallback without checking the @supports.

Something like this:

main{
  display: flex;
}
@supports (display: grid) {
  main{
    display: grid;
  }
}

In the example above, by default main will be a flex but if the browser supports CSS grid then the main will be a grid.

@supports with and

Using and operator you can check if multiple CSS features are supported.

@supports (display: grid) and (display:inline-grid) {
  main{
    display: grid;
  }
}

@supports with or

Using or operator you can check if at least one of the CSS features is supported from multiple conditions.

@supports (border-radius: 10px) or (-moz-border-radius: 10px) or (-webkit-border-radius: 10px) {
  main{
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
  }
}

Share this post