@supports is a CSS conditional group at-rule for progressive enhancement. It tests whether a browser understands a declaration, then applies the enclosed rules only when the test succeeds; unsupported browsers ignore that block. section 1.5.3
Fallback first, grid second
Style a coffee-link collection with broadly usable rules first: inline-block links, minimum widths, spacing, borders, and colors. Then use @supports (display: grid) to replace that arrangement with display: grid, three equal columns, and a gap, while clearing the fallback margins and minimum widths. Older browsers retain the fallback; supporting browsers receive the fuller layout. section 1.5.3
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
}
}
Inspect the complete fallback-and-enhancement pattern, including the declarations outside and inside the feature-query block. section 1.5.3
