What is the purpose of @supports in CSS?

• A. It defines a new CSS property
• B. Replace media queries
• C. Use @supports (display: grid) { ... } to apply grid-specific styles if supported.
• D. Provide vendor prefixes automatically

Answer: (C)

@supports checks whether the browser supports a specific CSS feature before applying styles, so you can tailor layouts to capability rather than just the viewport. It enables progressive enhancement by conditionally enabling rules only when the feature exists.

Using a syntax like @supports (display: grid) { ... } applies the grid-related styles only if the browser understands CSS Grid. If grid isn’t supported, the browser simply ignores that block, which lets you provide graceful fallbacks elsewhere. You can also combine tests, for example with and or not, to check multiple features.

This isn’t about defining a new property, replacing media queries, or automatically adding vendor prefixes. Media queries respond to screen size, @supports responds to CSS feature support, and vendor prefixes are typically handled by tooling rather than feature queries.