CSS that works in your browser at your screen size is not done. Senior engineers verify across browsers and sizes with a repeatable process and build with progressive enhancement so newer features degrade gracefully.
Feature queries with @supports
The <code>@supports</code> rule applies CSS only if the browser understands a feature, letting you use cutting-edge CSS with a safe fallback. Write the fallback as the base, then enhance inside <code>@supports</code>.
.grid { display: flex; flex-wrap: wrap; } /* fallback */
@supports (display: grid) {
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
}Progressive enhancement
Build the experience in layers: a solid baseline that works everywhere, then enhancements for capable browsers. The page is never broken — older browsers get a simpler but functional version, newer ones get the polish.
A responsive testing process
Test systematically, not randomly: check each defined breakpoint, plus the awkward sizes between them; verify both orientations on mobile; and confirm content reflows without horizontal scroll. Browser device emulation covers most cases; real devices catch the rest.
Cross-browser realities
Modern browsers are far more consistent than a decade ago, but differences remain: form control styling, scrollbars, and brand-new features. Know your project's supported browser list, and test the real ones rather than assuming.
.grid { display: grid; } /* breaks where unsupported *//* flex fallback, then @supports (display:grid) enhancement */Using a new feature with no fallback, so unsupported browsers get a broken layout. Provide a baseline and enhance with @supports.
Build with progressive enhancement: a working baseline plus @supports enhancements. Test each breakpoint and the gaps between, both orientations, and your real supported browsers — with a repeatable checklist.
Write a layout with a Flexbox fallback and a Grid enhancement inside @supports (display: grid). Then test a page across your browser's device emulator at several widths and both orientations.
1. What applies CSS only if a feature is supported?
2. Progressive enhancement means…
3. A good responsive test checks…
- @supports lets you use new CSS with safe fallbacks.
- Progressive enhancement keeps the page working everywhere.
- Test each breakpoint, the gaps between, and both orientations.
- Know and test your project's real supported browsers.