HTML & CSS Interview Question #139

What is progressive enhancement?

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

Quick Interview Answer

Progressive enhancement starts with a functional semantic baseline and adds richer styling or capabilities when the browser supports them. Core content and essential actions should remain usable even when an optional enhancement is unavailable.

Detailed Explanation

In CSS, feature queries and resilient layouts can add newer features without making the basic experience dependent on them. This is especially valuable when supporting a range of browsers, devices, network conditions, or accessibility needs.

Code Example

.card-list {
    display: block;
}

@supports (display: grid) {
    .card-list {
        display: grid;
        grid-template-columns:
            repeat(auto-fit, minmax(15rem, 1fr));
        gap: 1rem;
    }
}