Progressive Enhancement
Modern CSS features should be introduced in ways that preserve a useful experience when a feature is unavailable. Feature queries using @supports allow CSS to detect support before applying an enhancement.
This is especially useful for advanced layout features, modern color functions, and experimental capabilities.
Progressive Enhancement with @supports
Feature Query
.layout {
display: flex;
}
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}💡 The fallback works first and Grid is used when supported.
Key Takeaways
@supportsenables feature-based progressive enhancement.- Provide a useful baseline before applying advanced capabilities.
Knowledge Check
Which at-rule tests whether a CSS feature is supported?