Intermediate LevelCSS & Modern Layouts
How do @supports feature queries detect CSS property support?
❓ Interview Prompt: Explain @supports for progressive enhancement, testing property support, and providing fallbacks.
@supports conditionally applies CSS rules based on browser feature support:
Syntax:
@supports (property: value) { /* rules */ }
Operators:
•
@supports (display: grid) — checks if grid is supported.•
@supports not (display: grid) — negation.•
@supports (display: grid) and (gap: 1rem) — both must be supported.•
@supports selector(:has(*)) — checks selector support.Use Case:
Provide modern CSS with fallbacks for older browsers.
Code Implementation Example
css
/* Fallback for browsers without container queries */
.card { padding: 16px; }
@supports (container-type: inline-size) {
.card-wrapper {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { padding: 32px; }
}
}
/* Check :has() selector support */
@supports selector(:has(*)) {
.form-group:has(:invalid) { border-color: red; }
}💡Progressive enhancement with @supports for container queries and :has().
🎯 Interview Key Takeaway
Use @supports for progressive enhancement, providing modern CSS features with fallbacks for older browsers.
#@supports#Feature Queries#Progressive Enhancement#Intermediate
Back to all CSS & Modern Layouts Questions→