Using Can I Use
Before shipping a CSS feature to production, you need to know whether the browsers your visitors actually use will render it correctly. caniuse.com has been the standard reference for answering that question for well over a decade, covering CSS, JavaScript, and HTML features with data sourced from real-world browser usage statistics.
Reading a Can I Use Table
Search for a feature on caniuse.com (for example "CSS grid" or ":has") and you get a compatibility table broken down by browser. A few things are worth knowing how to read:
What you see | What it means |
|---|---|
Global usage % | The percentage of all tracked web traffic worldwide using a browser version that supports the feature — a quick gut check for how safe a feature is to ship broadly. |
Per-browser columns | Chrome, Firefox, Safari, Edge, and others each get a column showing the version number where support began, color-coded green (supported) or red (not supported). |
Partial support (yellow) | The browser supports some but not all of the feature, or supports it behind a flag/with caveats — click through to the footnotes for specifics. |
Version history | Hovering or scrolling through older versions shows exactly which release introduced support, useful when you need to support a specific minimum version. |
Using It in Practice
The workflow is simple: before relying on a newer CSS feature in production, look it up on Can I Use, check the global usage percentage and whether any browsers your analytics show real traffic from are missing support, and decide whether you need a fallback.
/* Example: you looked up "aspect-ratio" on Can I Use and saw
it's supported by all Baseline-widely-available browsers,
so you can rely on it directly */
.thumbnail {
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* Example: you looked up a newer feature with partial support
and decided to guard it with a feature query instead */
.card {
display: flex; /* solid fallback for everyone */
}
@supports (container-type: inline-size) {
.card {
container-type: inline-size;
}
}The key decision point is always: does the percentage of unsupported browsers in your actual audience matter for this project? A portfolio site aimed at developers can often ship the newest CSS fearlessly; an e-commerce checkout flow serving a broad, global audience needs a more conservative read of the same data.