🧪 @supports — Feature Detection in Modern CSS

🌐 What is @supports?

@supports is a CSS at-rule (also called a *feature query*) that lets you apply CSS styles only if the user's browser supports a specific CSS property or value. This unlocks **progressive enhancement**, ensuring newer features work where allowed without breaking older browsers.

>>“@supports helps you write future-proof CSS — using new features safely and intelligently.”

Note

✔ Supported in all modern browsers.
✔ Similar to JavaScript’s `if (‘property’ in element.style)` but for CSS.

🎯 Why Use @supports?

  • Safely use new/uncommon CSS features
  • Write fallback styles for older browsers
  • Check for value-level support (not just property-level)
  • Handle partial browser compatibility gracefully

📌 Basic Syntax

@supports Syntax

@supports (property: value) {
  /* CSS that runs only if supported */
}

🧪 Example 1 — Checking for grid support

CSS Grid Feature Query

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

The layout switches to Grid only if the browser supports it.

🧪 Example 2 — Fallback Styles

Fallback + Enhancement

.box {
  display: block; /* fallback for old browsers */
}

@supports (display: flex) {
  .box {
    display: flex; /* modern enhancement */
  }
}

Old browsers use block layout; modern browsers upgrade to flexbox.

Note

💡 @supports makes progressive enhancement easy and clean.

🎯 Using Logical Operators

✔ AND

AND Operator

@supports (display: grid) and (gap: 1rem) {
  .gallery {
    display: grid;
    gap: 1rem;
  }
}
✔ OR

OR Operator

@supports (display: flex) or (display: grid) {
  .box {
    display: flex;
  }
}
✔ NOT

NOT Operator

@supports not (backdrop-filter: blur(10px)) {
  .header {
    background: rgba(0, 0, 0, 0.8);
  }
}

If the browser does NOT support backdrop-filter, we apply an alternative dark background.

🧪 Example 3 — Checking Support for Specific Values

Value-Level Support Query

@supports (position: sticky) {
  .nav {
    position: sticky;
    top: 0;
  }
}

You can test property *values*, not just properties — extremely powerful!

🧪 Example 4 — Using Nested @supports

Nested Queries

@supports (display: grid) {
  @supports (aspect-ratio: 1) {
    .image {
      aspect-ratio: 1;
    }
  }
}

Useful when you want to apply enhancements only if *multiple* modern features exist.

📱 Real-World Example — Using @supports for CSS Subgrid

Subgrid Enhancement

@supports (grid-template-columns: subgrid) {
  .child {
    grid-template-columns: subgrid;
  }
}

Only browsers supporting subgrid will apply this rule.

📐 Checking Multiple Conditions

GoalQuery
Check for grid + gap@supports (display: grid) and (gap: 20px)
Check if browser supports ANY modern layout@supports (display: flex) or (display: grid)
Check if something is NOT supported@supports not (color: lch(50 60 30))

🎨 Example — Modern CSS but with Fallback

Progressive Enhancement Example

.card {
  background: #ddd;
}

/* Only browsers supporting CSS nesting will apply this */
@supports (selector(:is(& > *))) {
  .card {
    background: #f8f8ff;
  }
}

This allows cutting-edge features with safe fallback support.

⚠️ Common Mistakes

  • Missing parentheses → @supports requires (property: value)
  • Assuming @supports checks browser version — it checks properties only
  • Testing invalid CSS → always returns false
  • Using @supports for features that already have perfect support

Note

🧠 @supports is about *capability detection*, not browser detection.

🔥 Summary

@supports is a powerful tool for writing robust, future-friendly CSS. It helps you safely adopt modern features like Grid, Subgrid, CSS Nesting, clamp(), logical properties, backdrop-filter, and more — while maintaining compatibility with older browsers.

>>“Use @supports to embrace the future of CSS without abandoning the past.”

Learn more →MDN Docs 📘