Progressive enhancement with `@supports`

Learn how to detect support for new CSS features so advanced styling is applied only where it works, while the site stays resilient everywhere else.

How much do you know about CSS?

📘 Theory

Syntax and logic

Ask for capabilities, not browser versions.

Unlike older browser-sniffing techniques, `@supports` checks real capabilities. The base syntax is straightforward: `@supports (property: value) { ... }`.

You can combine conditions with logic operators:

- `and`: both conditions must be true.

- `or`: at least one condition must be true.

- `not`: invert the query, which is useful for unsupported cases.

For example, `@supports (display: grid) and (not (display: subgrid))` can help you apply a normal Grid layout only when `subgrid` is not available.

The onion strategy

Build the experience in layers.

1. **Base layer**: simple, accessible and readable CSS, often using block flow or basic Flexbox.

2. **Modern layer**: introduce Grid, Subgrid or other richer features through `@supports`.

3. **Experimental layer**: reserve for properties that only work in very new or browser-specific environments.

This approach guarantees that the website is never broken. At worst, it is simply less sophisticated in older browsers.

Detecting selectors

`@supports selector(...)`

A powerful addition to feature queries is the ability to ask whether the browser understands a specific selector, such as `:has()` or a newer pseudo-element.

The syntax is `@supports selector(:has(p))`.

This matters because sometimes the problem is not the property itself, but the advanced selector you need in order to apply the pattern.

1 Syntax and logic 2 The onion strategy 3 Detecting selectors

🧭 Key visuals

Progressive enhancement with `@supports`

Shows how to enable modern features without breaking browsers with less support.

Decision flow for supports with a supported branch and a fallback branch.

🧪 Learn by doing

Example Demo: resilient layout This example starts with a safe Flexbox card layout and upgrades to modern Grid only if the browser supports it.

⌄

Example Interactive demo: masonry with `grid-lanes` plus fallback See how an experimental layout can rely on `@supports` to activate `grid-lanes` only when available, while keeping a usable `columns` fallback.

⌄

Example Challenge: detect `subgrid` Apply a green background if the browser supports `subgrid`, and a red one if it does not, using `not`.

⌄

🧰 Resources

Useful links

MDN - `@supports` (Feature Queries) Resilient Web Design - Jeremy Keith MDN CSS MDN Layout Cookbook

Test

Check your knowledge with a test about CSS.

Test for CSS

Course resources 78

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 57

CSS Nesting: the end of repetitive selectors

Lesson 59

CSS compatibility: support, prefixes and strategy

›