Yogesh Chauhan's Blog

How to use @supports rule in CSS?

in CSS on July 21, 2021

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;
  }
}


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Always add associated labels to your Form elementsUI/UXAt-rules: @error and @warn in SCSSSCSSGive buttons accessible namesUI/UXHow to add menu to your WordPress theme?WordPressWhat’s a Strict mode in JavaScript?JavaScriptAggregate Functions Examples in Postgres for BeginnersPostgres