Which technique uses feature detection to apply CSS only when a browser supports it?

Which technique uses feature detection to apply CSS only when a browser supports it?

• A. Use media queries with min-width
• B. Use @supports feature queries
• C. Use @import with conditions
• D. Use JavaScript to add classes after DOM load

Answer: (B)

Using CSS feature detection lets you apply styles only if the browser actually supports a given CSS capability. The @supports rule checks whether a property-value combination is understood by the browser and, if it is, applies the enclosed styles. For example, you can write @supports (display: grid) { ... } to opt into CSS Grid rules only in browsers that support Grid. This lets you progressively enhance your design without breaking older browsers. Media queries, like min-width, test viewport characteristics (size, orientation, resolution), not whether a feature exists. So they’re about layout in different environments rather than capability detection. Using @import with conditions isn’t a reliable way to detect support, and relying on JavaScript to add classes after the page loads is a scripting approach, not a pure CSS feature-detection method. The CSS @supports feature queries are the standard way to apply styles only when the browser supports a specific feature.

Using CSS feature detection lets you apply styles only if the browser actually supports a given CSS capability. The @supports rule checks whether a property-value combination is understood by the browser and, if it is, applies the enclosed styles. For example, you can write @supports (display: grid) { ... } to opt into CSS Grid rules only in browsers that support Grid. This lets you progressively enhance your design without breaking older browsers.

Media queries, like min-width, test viewport characteristics (size, orientation, resolution), not whether a feature exists. So they’re about layout in different environments rather than capability detection. Using @import with conditions isn’t a reliable way to detect support, and relying on JavaScript to add classes after the page loads is a scripting approach, not a pure CSS feature-detection method. The CSS @supports feature queries are the standard way to apply styles only when the browser supports a specific feature.