CSS - @supports & Feature Queries

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 8–12 minutes

Feature queries let you conditionally apply modern CSS with graceful fallbacks.

Learning Objectives

• Write @supports rules to branch styles by capability.
• Provide fallbacks to keep experiences usable.

Details & Examples

@supports (display: grid){ .layout{ display:grid; gap:1rem; } }
@supports not (backdrop-filter: blur(4px)){ .frost{ background: rgba(0,0,0,.6); }}

Checks for Understanding

1. How do you apply a style only when a property is unsupported?

Exercises

1. Provide a fallback for backdrop-filter when unsupported using @supports not.
2. Use @supports to enable grid layout only if supported.