1. Baseline First, Enhancement Second

Progressive enhancement means everyone gets a functional layout. Browsers with newer features get better visuals or richer interaction.

Layered strategy

Baseline

Core layout and readable content.

Enhanced

Optional visuals when feature support exists.

Start with universal CSS, then conditionally add advanced properties.

.panel {
  border-radius: 12px;
  background: #fff;
}
@supports (backdrop-filter: blur(10px)) {
  .panel {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
  }
}

2. @supports Syntax Patterns

You can detect one feature, combine multiple checks with and or or, and invert checks with not.

Single check

@supports (display: grid)

Enable CSS Grid only where supported.

Combined check

@supports (display: grid) and (gap: 1rem)

Require both features before applying enhancement.

Fallback branch

@supports not (container-type: inline-size)

Use this for explicit fallback rules.

@supports (display: grid) {
  .list { display: grid; gap: 1rem; }
}
@supports not (display: grid) {
  .list > * { margin-bottom: 1rem; }
}

3. Visual Enhancement Example: backdrop-filter

Keep a readable translucent panel as baseline and upgrade to blur where available.

Baseline plus enhancement

This panel stays readable in all browsers.

Users get a good baseline even if blur support is missing.

.glass {
  background: rgba(255, 255, 255, 0.6);
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .glass {
    background: rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

4. Layout Enhancement Example: Flex to Grid

Ship a flexible baseline with Flexbox and enhance to Grid where it improves symmetry.

Auto-upgrade layout

Item A

Item B

Item C

The same markup supports both fallback and enhanced layouts.

.cards { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@supports (display: grid) {
  .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

5. Safe Adoption of Modern Features

Feature queries help you adopt logical properties, scroll-snap, and other modern APIs without breaking older browsers.

Logical properties

Alpha Beta Gamma

Use physical spacing as baseline and logical properties as enhancement.

Scroll snap

Design Build Test Ship

Without support, the list still scrolls normally.

.chip { margin-right: 0.5rem; } /* baseline */
@supports (margin-inline: 0.5rem) {
  .chip { margin-inline: 0.5rem; }
}

.timeline { overflow-x: auto; } /* baseline */
@supports (scroll-snap-type: x mandatory) {
  .timeline { scroll-snap-type: x mandatory; }
}