Understanding CSS fallback behavior

May 06, 2021css-practicescss

CSS is forgivable. If a browser encounters a declaration or rule it doesn’t understand, it just skips it completely without applying it or throwing an error.

This might be frustrating for you and your users if such a mistake slips through to production code, but at least it means the whole site doesn’t come crashing down because of one error, and if used cleverly you can use it to your advantage.

Not everybody on the web is using the same operating system, web browser, or even physical hardware. Providing fallbacks is the perfect solution for compromising with your many unique visitors.

There are two mainstream strategies to provide CSS fallbacks: progressive enhancement and graceful degradation.

Theoretically we may still end up in exactly the same place when using either above strategies, but whether we start with the basic experience or the enhanced one by default is considered synonymous with our priorities.

If you prioritize everyone, then go for progressive enhancement. If you prioritize the privileged few who use the latest browsers then go for graceful degradation.

Graceful degradation and progressive enhancement have the same objective to create robust, accessible and broad-reaching solutions that work for everyone no matter their choice of browser.

One question that many web developers have is how far back in terms of browser versions should you support? There is no cut-and-dry answer to this question. It depends on the site itself.

CSS layouts aren’t as easy to provide graceful fallbacks for as simple CSS properties like colors, shadows, or gradients. If layout properties are ignored, your entire design will likely fall to pieces.

CSS feature queries (@supports) let you specify declarations that depend on a browser’s support for one or more specific CSS features. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

Progressive enhancement doesn’t work well when you’re uncertain about number of old browsers you want to support, it’s time consuming when writing tons of fallbacks using old technologies that you might not need at all. In this case consider using graceful degradation instead.