« Previous
Next »
CSS Browser Support
Modern browsers (Chromium, Firefox, Safari, Edge) ship updates on a 4-week cycle and support roughly the same set of CSS features. The gaps are narrow but real — check before relying on the latest spec.
Where to check
| Resource | What it shows |
|---|---|
| caniuse.com | Per-feature support matrix across Chrome, Firefox, Safari, Edge plus mobile. |
| MDN compatibility tables | On every CSS property page — desktop + mobile breakdown. |
| Baseline (web-platform.org) | "Widely available" badge once a feature ships in all major engines for 30 months. |
How to handle gaps
| Pattern | Example |
|---|---|
| Feature query | @supports(aspect-ratio: 1) { … } |
| Negation | @supports not (display: subgrid) { /* fallback */ } |
| Multiple fallbacks | Declare the older syntax first, the newer one second — browsers use the last one they understand. |
| Vendor prefix | -webkit- for Safari-only properties (mask, line-clamp). |
What you can rely on universally
- Flexbox & Grid (basic features).
- Custom properties (CSS variables).
calc(),clamp(),min(),max().aspect-ratio,gap(incl. in flex),insetshorthand.- Modern colour functions (
oklch,color-mix) — recent Baseline.
Tip: Don't write defensive CSS for browsers no one uses. Pick a support floor (e.g. last two versions of every evergreen browser) and code for it.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Browser Support</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Conditionally apply a rule only if `aspect-ratio` is supported.
(aspect-ratio: 1) { .box { aspect-ratio: 1; } }
An at-rule starting with @.
Test yourself
« Previous
Next »
Discussion
Loading…