Feature detection using @supports in CSS

Michael Gearon Published on April 28, 2020

The @supports CSS at-rule allows you to write CSS based on whether a feature is supported or not in the user’s browser. Otherwise known as a feature query the @support can be placed at the top level of your code or nested inside any other rule such as the media query.

By using this CSS it can replace JavaScript and libraries like Modernizr. Which means less JavaScript which is good for performance as well removing the problem of what if the user doesn’t have JavaScript enabled or their browser doesn’t support it.

Syntax for @supports

@supports (display: grid) {
   // code that will only run if CSS Grid is supported by the browser 
 }

If the browser does support the display: grid then everything inside this feature query would be supported.

The benefit of this is that you can style your website on what is or isn’t supported in the user’s browser. This is really useful for new CSS properties which may not be fully implemented right now but you want to enhance the user experience for those browsers that do supported it.

You can also use conjuncations such as “and”, as well as disjunctions like “or” as well as negations such as “not”. You can then create feature queries which says if this “thing” is not supported then do this.

Example of not supports

@supports not (display: flex) {
  .sidebar { float: left; }
}

Example of or supports

@supports (display: flex)
or (display: -webkit-box)
or (display: -webkit-flex)
or (display: -ms-flexbox) {
 .menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
 }
}

Can I use Feature Queries?

The @supports has worked in Firefox, Chrome and Opera since mid-2013. It also works in Edge and is well supported in mobile browsers and smaller browsers. It is not supported in Internet Explorer.

More guides

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects