HTML & CSS Interview Question #140

What is @supports in CSS?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

@supports is a feature query that conditionally applies CSS when the browser reports support for a particular property-value combination or supported selector condition. It enables progressive enhancement without relying on browser-name detection.

Detailed Explanation

Feature queries are useful when a fallback layout is acceptable and a newer feature should enhance it. They should test the actual capability the design needs rather than infer support from unrelated features.

Code Example

.layout {
    display: block;
}

@supports (display: grid) {
    .layout {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
}

@supports selector(:has(*)) {
    .card:has(img) {
        padding-top: 0;
    }
}