Feature Queries

🎨 CSS3+ 🟢 Chapter 45 of 49 📂 Phase 16: Modern CSS 📅 2026 Edition

📌 Covered in this chapter: @supports · Progressive Enhancement · Fallbacks · Feature Detection · Grid Fallback · Container Query Fallback · Modern Color Fallback · Graceful Degradation · Testing

Welcome to Chapter 45: Feature Queries — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.

📚 What You Will Learn

@supports rule for feature detection in CSS
Progressive enhancement strategy — base first, enhance later
Fallback patterns for Grid, Container Queries, modern colors
Graceful degradation for older browsers
Production testing across browser versions

💡 Why This Matters

Not all users have the latest browser. @supports lets you write cutting-edge CSS while providing solid fallbacks — no JavaScript feature detection needed. This is the CSS-native way to do progressive enhancement.

1@supports Syntax & Basic Usage

CSS▶ Try in Editor

.card {
  display: block;
}

@supports (display: grid) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

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

@supports not (container-type: inline-size) {
  .sidebar { width: 240px; }
}

Property / Selector	Explanation
`@supports (prop: value)`	Browser supports property — apply nested rules
`@supports not (...)`	Browser does NOT support — apply fallback
`@supports (A) and (B)`	Both must be supported
`@supports (A) or (B)`	Either one supported

2Progressive Enhancement Patterns

CSS — Grid with Flexbox Fallback▶ Try in Editor

.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.layout > * {
  flex: 1 1 280px;
}

@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
  }

  .layout > * { flex: unset; }
}

CSS — Modern Color Fallback▶ Try in Editor

.hero {
  background: #2563eb; /* fallback */
  background: oklch(54% 0.22 264); /* modern browsers */
}

@supports (color: color-mix(in srgb, red, blue)) {
  .hero-overlay {
    background: color-mix(in srgb, #2563eb 80%, transparent);
  }
}

3Production Testing & Graceful Degradation

caniuse.com — check feature support before using
BrowserStack / LambdaTest — test on real older browsers
Strategy: Base styles work everywhere → @supports adds enhancements
Never: @supports only block without fallback outside
CSS.supports() in JS: CSS.supports('display', 'grid') for dynamic loading

❓ Mini Quiz

Q1 @supports media queries la work avuthundaa?

Similar concept — media queries check viewport/device, @supports checks CSS feature support in browser.

Q2 Progressive enhancement vs graceful degradation?

Progressive enhancement: base experience first, add features. Graceful degradation: full experience first, fallback for old browsers. PE is preferred modern approach.

✅ Quick Recap

@supports detects CSS feature support at runtime
Always provide fallback styles OUTSIDE @supports block
Use for Grid, container queries, oklch colors, nesting
Test on caniuse.com and real devices before production
Progressive enhancement = accessible to all, enhanced for modern browsers

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy · CSS Complete Roadmap · Last updated August 2026