Atomic Smash homepage splash

Feature detection with @supports

Words by Colin GoodmanDecember 9, 2018

If you’re reading this post as a developer, I’m pretty sure you have used some kind of feature detection on previous projects. Modernizr is probably the most well known feature detection tool but, is it time to start using the @supports CSS rule instead. In this post, I will explain how to use the @supports rule and what benefits it brings over using something like Modernizr.

What is feature detection?

Feature detection involves working out whether a browser supports a certain block of code, and then running alternative code dependent on whether it does or doesn’t, to ensure that the browser can still provide a usable experience for a user.

How can @supports help?

The @supports CSS rule can be used to detect whether the CSS property you plan on using is supported by the browser you view your page in, without having to use any JavaScript at all. A simple working example is shown below:

@supports ( background-blend-mode:luminosity ) {
    #hero {
        background-blend-mode:luminosity;
    }
}

The code example above is asking the browser if it supports “background-blend-mode:luminosity” then applying it to the #hero HTML element if true. As you can see the syntax is really straightforward, you start by stating the @supports rule then supplying your CSS property and value you want to check against. If this returns true in the browser you’re using then the style you state within this query will be applied.

There are other operators for the @supports rule and they are the “not“, “and” and “or” operators. You can also chain CSS properties to check against which is shown in the example below:

@supports not ( background-blend-mode:luminosity ) or ( background-blend-mode:multiply ) {
    #hero:after {
        content:"";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.4);
    }
}

 

Why use @supports over a Javascript alternative like Modernizr?

The browser support for @supports is currently very good for the more well known browsers but, no support for it in any version of internet explorer so this could be a deal breaker. However a big reason to use @supports over something like Modernizr is performance, by moving over to @supports you are removing an external dependency, potentially saving an HTTP request and it doesn’t require time to execute any javascript as its just CSS.

Summary

The decision to use @support will vary between project but I think if you can use it then you should. I really like using @supports and just knowing I can remove another JavaScript dependency from a project is awesome however, like most situations where you’re thinking of introducing something new you will have to make the call yourself. If your on a project where any version of IE needs to be supported then using @supports won’t be a great idea due to the lack of support. If your project is targeted at the latest browsers then using @support is a viable option and ditching feature detection being done through JavaScript would be a good move.

I suggest just go and give @supports a try and hopefully, you will start to see how you could use it within your CSS, to ensure your users are getting a good user experience regardless of what browser they use to browse your website.

Profile picture of Colin Goodman

Colin Goodman

Colin works very closely with David and Ben on the front end development aspects within projects. He has an exceptional eye for detail and is constantly looking at new ways to code websites with the latest technologies available.

Go back to top

Keep up to date with Atomic news