Progressive enhancement layers newer CSS capabilities onto a usable baseline. Older browsers ignore unsupported declarations or rules while continuing to parse the rest of the stylesheet; newer browsers receive the fuller experience. section 1.5 section 1.5.1
Apply the technique by building from a dependable baseline:
- Define an acceptable experience with widely supported CSS. section 1.5
- Layer a newer declaration afterward when the cascade can safely select it. section 1.5.1
- Separate selectors when one unsupported selector would invalidate an entire ruleset. section 1.5.2
- Use @supports when conditional application is clearer or when several declarations must change together. section 1.5.3
A transparent background with a fallback
Set a solid color first, then add the newer eight-digit hexadecimal form: the older browser keeps the solid color, while a supporting browser uses transparency. The page remains usable in both cases. section 1.5.1
Listing 1.25 Using a feature query for progressive enhancement
.coffees {
margin: 20px 0;
}
.coffees a {
display: inline-block; #1
min-width: 300px; #1
padding: 10px 15px;
margin-right: 10px;
margin-bottom: 10px;
color: black;
background-color: transparent;
border: 1px solid gray;
border-radius: 5px;
}
@supports (display: grid) { #2
.coffees {
display: grid; #3
grid-template-columns: 1fr 1fr 1fr; #3
gap: 10px; #3
}
.coffees a {
margin: unset; #4
min-width: unset; #4
}
}
A coffee-link layout starts with inline-block cards, then switches to a three-column grid and removes conflicting margins when the browser supports display: grid. section 1.5.3
