CSS Feature Queries (@supports)
CSS Feature Queries (@supports) — Detect browser feature support with @supports queries for progressive enhancement, fallbacks, and graceful degradation. The guide walks through What Are Feature Queries?, Using @supports, Logical Operators: not, and, or, Progressive Enhancement Pattern, Practical Examples and Limitations. Feature queries, using the @supports at-rule, let you apply CSS rules only when the browser supports a specific CSS feature. They are similar to media queries but test for feature support instead of viewport characteristics. Basic syntax: @supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr; } } If the browser supports display: grid, the rules inside the… @supports tests whether a browser supports a specific CSS property-value pair: @supports (display: flex) { .container { display: flex; } } /* Only applies if browser supports flexbox */ @supports (selector(:has(p))) { .card:has(.btn) { border-color: #6366f1; } } /* Tests selector support */ @supports (aspect-ratio: 1) { img { aspect-ratio: 16/9; object-fit: cover; } } /* Tests property AND value…