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 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
for @each loop in SCSSSCSSHow to add before after image effect using pure CSS?CSSHow to remove the Gutenberg Block Library CSS from WordPress?WordPressHow to install Gulp with WordPress?WordPressDefault Values in SCSS (Sass)SCSSHow to create Flickering Texts using CSS?CSS