dots Created with Sketch.
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;
  }
}

amazon

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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
Styling Lists with CSSCSSINTERSECT and EXCEPT in PostgresPostgresPHP arrays for US states’ full names and abbreviationsPHPfor @each loop in SCSSSCSS5 Key Principles Of Good Website UsabilityUI/UXWhat are partials in SCSS (Sass)?SCSS