CSS feature detection in JavaScript?!

CSS preprocessors and transformers are great, but what when they’re not enough…

When you need to use newer JS features in older browsers, you can either use a preprocessor or polyfills. In most use cases, they’re able to do the job with acceptable performance and/or bundle size costs.

However, with CSS, things aren’t that simple. You can use a preprocessor like SCSS to add additional functionalities and transforming tools like PostCSS to add prefixes and so on, but many CSS features won’t be “polyfillable”.

That’s why it’s important to do proper feature checks and implement fallbacks where necessary. Let’s see how it’s done!

CSS @supports rule

Starting off with the basics, there’s a dedicated CSS at-rule for detecting supported CSS features right from the stylesheet! It’s called CSS Feature Query, aka @supports, and is relatively well-supported, with all popular browsers, except IE supporting it.

@supports can be used at the top level of your CSS file or nested inside another @supports or @media.

As for syntax, it’s similar to @media, with your feature checks having a form of (checked-property: checked-value) wrapped in a parenthesis: