How To Check And Only Apply CSS If Feature Is Supported In The Browser
July 29, 2019 by Andreas Wik
When designing pages you constantly need to think about browser support. You would love to add that 3D transformation to the button, but a bunch of people with browsers that don’t yet support it will get weird results.
Is there an easy way, directly in CSS, without involving JavaScript, to check what’s supported and not?
Feature Queries, or @supports, lets you do exactly this. You simply write @support () and inside the brackets you add the feature you want to check is supported. For example, to check if the browser supports display: grid you would write:
@supports (display: grid) {
// This styling will only be applied if grid is supported
.container {
display: grid;
}
}You can also do it the other way around and only apply CSS if the browser does not support the feature, using @support not()
@supports not (display: grid) {
// Only apply this styling when grid IS NOT supported
...
}Checking two or more features at once with AND
You can combine checks with and to ensure that two or more features are supported before applying your styles. Let’s check if it supports both filter: blur and border-radius:
@supports (filter: blur(5px)) and (border-radius: 15px) {
// Only apply this styling when BOTH filter blur and border-radius are supported
...
}Checking if at least one of several features is supported with OR
Using or you can check if one or more or several features are supported. So in the example below, only one of the two features will need to be supported for the styling to be applied.
@supports (border-radius: 5px) or (-webkit-border-radius: 5px) {
// Only apply this styling if border-radius OR -webkit-border-radius
...
}Browser support for @supports …
Funny enough, you will still also have to consider the browser support for @supports.
But yeah, this is a really nice little feature that CSS offers and I’m using it quite a bit.
Share this article
