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
• CSS.supports()

When support checks aren’t supported

So, all seems good, but there’s one problem - what to do when support checks aren’t supported? Both @supports and CSS.supports() are great, but they only work on relatively recent browsers, meaning no IE support - which is typically the main focal point of feature checks.

Available workarounds

There are many ways to approach this problem. You can, for example, write the specific tests yourself, testing whether certain elements react to selected CSS properties, or if they generate any styles. You could also use ready CSS.supports() shims and smaller tools like that.

#css #javascript #tips & tricks #library