CSS References
CSS Browser Support
Browsers ship CSS features at different times, so before relying on something new you should check its support and plan a graceful fallback. This guide covers how to look up support with caniuse, how to detect features at runtime with @supports, when vendor prefixes still matter, and gives rough support levels for several modern features.
How to check support
- Look up any property or feature on caniuse.com to see per-browser support and usage share.
- Check MDN — each property page has a Browser compatibility table at the bottom.
- Detect support at runtime in CSS with the @supports at-rule (feature queries).
- Detect support in JavaScript with CSS.supports("display", "grid").
Progressive enhancement with @supports
Write a baseline that works everywhere, then layer on modern CSS only where it is supported. This is progressive enhancement — nobody gets a broken page, and capable browsers get the best experience.
/* Baseline: floats or block layout everywhere */
.cards > * { display: inline-block; width: 32%; }
/* Enhancement: grid where supported */
@supports (display: grid) {
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cards > * { width: auto; }
}
/* Only when a feature is NOT supported */
@supports not (aspect-ratio: 1) {
.thumb { height: 180px; }
}Vendor prefixes
Historically, experimental features shipped behind vendor prefixes like -webkit-, -moz- and -ms-. Most modern features no longer need them, but a few still do. Put prefixed versions before the unprefixed one so the standard wins when supported.
| Prefix | Vendor / engine |
|---|---|
| -webkit- | Chrome, Safari, Edge, most mobile browsers |
| -moz- | Firefox (Gecko) |
| -ms- | Old Internet Explorer / legacy Edge |
| -o- | Old Opera (Presto) |
Let a build tool like Autoprefixer add prefixes automatically from your target browser list — hand-writing them is error-prone and quickly goes stale.
Rough support for modern features
Support levels below are approximate as of the mid-2020s. Always confirm on caniuse for your exact target browsers.
| Feature | Support | Notes |
|---|---|---|
| Flexbox | Universal | Safe everywhere. |
| CSS Grid | Universal | Safe in all modern browsers. |
| Custom properties (var()) | Universal | Safe everywhere. |
| gap in Flexbox | Excellent | All current browsers. |
| clamp() / min() / max() | Excellent | Widely supported. |
| :has() selector | Good | All modern engines; not in very old browsers. |
| Container queries | Good | Supported in current browsers; check older versions. |
| Cascade layers (@layer) | Good | Modern browsers. |
| Subgrid | Fair/Good | Newer; verify on caniuse. |
| oklch() colours | Good | Modern browsers; provide an rgb fallback. |
| accent-color | Good | Modern browsers; degrades to default control. |
| text-wrap: balance | Fair | Progressive enhancement only. |
Never assume a feature is supported because it works in your browser. Test your real target audience's browsers, and always provide a sensible fallback.