CSS @supports

CSS @supports

@supports is a feature query. It lets you apply CSS only if the browser supports a specific property:value pair.

This is useful for progressive enhancement: you can provide a safe fallback layout, then upgrade to CSS Grid when supported.

@supports (display: grid) {
  .layout {
    display: grid;
  }
}

Basic Syntax

The condition is written inside parentheses. If it evaluates to true, the CSS block runs.

@supports (position: sticky) {
  .sidebar {
    position: sticky;
    top: 12px;
  }
}

You can also check multiple conditions using and, or, and not.

@supports (display: grid) and (gap: 12px) {
  .grid {
    display: grid;
    gap: 12px;
  }
}

@supports (not (display: grid)) {
  .grid {
    display: block;
  }
}

Fallback + Grid Upgrade

A common pattern is to build a basic fallback with flex or block layout, then upgrade to grid.

Fallback (flex):

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.cards .card {
  flex: 1 1 260px;
}

Upgrade to grid when supported:

@supports (display: grid) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
  }

  .cards .card {
    flex: initial; /* no longer needed */
  }
}

Tip: Keep the fallback working. @supports is meant to improve the experience in capable browsers without breaking older ones.

Checking Specific Features

You can test specific Grid features as well:

@supports (grid-template-columns: subgrid) {
  /* subgrid-specific styles */
}

Or test a property that matters to your component:

@supports (aspect-ratio: 16 / 9) {
  .thumb {
    aspect-ratio: 16 / 9;
  }
}

Summary

• @supports applies CSS only when a feature is supported.
• Use it for progressive enhancement: fallback first, upgrade later.
• Supports logical operators: and, or, not.
• Very useful for rolling out Grid layouts safely.