How to Write Robust CSS Fallback Styles for Inconsistent Browsers

Because browsers implement CSS features inconsistently, developers often rely on progressive enhancement and graceful degradation; therefore, when creating sophisticated styles, a reliable fallback (fallback) must be provided for browsers with limited capabilities, using CSS’s own mechanisms rather than hacks.

For example, a designer may want an element’s background to be a semi‑transparent black using rgba(0,0,0,0.75). Older browsers such as low‑version IE do not understand rgba, so the fallback should be solid black ( #000), which approximates the design intent.

An initial attempt might place the ideal style first and then add an IE‑only hack:

background: rgba(0,0,0,0.75);
background: #000\9;

The first declaration targets modern browsers; the second line is a CSS hack that only IE recognises, so IE shows a black background.

This approach has two clear drawbacks:

It targets "IE browsers" rather than the broader set of browsers that lack RGBA support, so the code’s effect does not match the intended intent.

When IE9+ appears, it supports rgba yet still processes the hack, causing the element to render solid black instead of the desired translucent colour, exposing the fragility of CSS hacks and their uncertain future compatibility.

CSS already provides a forward‑compatible mechanism: when a browser encounters an unknown declaration, it simply ignores it without error. (CSS hacks work precisely because they exploit this behaviour.)

Consequently, the correct ordering is to write the fallback first, then the ideal style:

background: #000;
background: rgba(0,0,0,0.75);

In browsers that do not support rgba, the second line is ignored, leaving the solid black fallback. Browsers that do support rgba apply both declarations, but because the second rule has higher specificity in the cascade, the translucent effect wins.

This article is excerpted from the "CSS Magic" annotations for the book CSS Secrets .

(Image credit: @Justineo’s GitHub HoverCard project.)