CSS @supports

Last reviewed May 28, 2026 Content v20260528

This lesson

This lesson teaches CSS @supports—the ideas, syntax, and habits you need before moving on in CSS.

Most modern layouts are built with flexbox and grid; skipping this lesson leaves responsive UI fragile.

You will apply CSS @supports in contexts like: Page layouts, dashboards, marketing sections, and component libraries.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

@supports enables feature queries so modern enhancements can be gated without breaking older environments.

.cards { display: block; }\n@supports (display: grid) {\n  .cards { display: grid; }\n}

Q: Why use @supports?
A: Progressive enhancement with graceful fallback behavior.
Q: Difference from media query?
A: Media queries target environment/device features; supports queries target CSS feature support.
Q: Common misuse?
A: Gating critical baseline behavior behind supports with no fallback.

Tip: Use fr units and gap instead of margin hacks between tracks.

Can you explain this lesson in 30 seconds without reading notes?

Self-reflection (saved on this device)

Not saved yet.

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Multiple choice — immediate feedback.

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

No discussion yet. Be the first to ask a question.

Jump