Browser Compatibility
Definition
Chrome, Edge, Safari and Firefox follow the same standards but ship features at different times, and Safari on an iPhone is tied to the version of the operating system on that phone. A feature can be missing in three ways: a CSS property is ignored, a JavaScript method is undefined and throws when called, or an HTML element renders as an ordinary box. CSS failures are quiet — an unknown declaration is dropped and the rest of the rule still applies — while a missing JavaScript method takes the whole script down with it. Caniuse.com gives per-feature support tables with real usage percentages, and Baseline is the newer label for a feature that has been in all four engines long enough to be safe to use without thinking.
Why It Matters
Testing only in the browser you write in is how a page ships broken for a quarter of the people who visit. Safari is the one that bites, because it is the only engine allowed on iOS, so every browser on an iPhone is Safari underneath and a feature Chrome shipped last year may not be there yet. The cost is rarely subtle: a layout leaning on a property Safari lacks can leave text stacked on top of itself rather than merely looking plain. Your analytics tell you which browsers deserve the effort, and if nobody arrives on a ten-year-old version, nothing you do for it is worth an hour.
How It Works
Browsers ignore what they do not understand, and most compatibility work is built on that. An unrecognised CSS declaration is discarded while earlier declarations in the same rule stand, so writing the plain value first and the modern one after gives you a fallback for free. The @supports rule makes the same thing explicit: @supports (display: grid) applies a block only where the feature exists. In JavaScript you test before you call — if ('IntersectionObserver' in window) — and offer a polyfill or a simpler path where the test fails. For anything compiled, a browserslist setting decides how far back the output is transpiled, and aiming too far back makes the bundle bigger for everybody.
Real-World Example
A conference agenda at summit-2026.99helpers.site displays correctly everywhere except older iPads, where the schedule collapses into one long column. The cause is a CSS grid feature Safari added later than Chrome. Wrapping the grid rules in @supports and leaving a stacked layout as the base means the old device gets something readable instead of something wrong, and the page is still a single file uploaded to 99helpers.
Common Mistakes
- ✕Testing in desktop Safari and calling iOS done — the phone version can lag behind, and a page saved to the home screen runs in an older shell again
- ✕Chasing browsers with no traffic — supporting a version nobody uses costs real hours and makes the code worse for the people who are there
- ✕Writing the modern value first and the fallback after — the last valid declaration wins, so the order has to be plain first, modern second
Related Terms
Polyfill
A polyfill is a piece of JavaScript that implements a feature a browser is missing, so code written for the modern feature runs there anyway. It fills the gap rather than routing around it.
Graceful Degradation
Graceful degradation means a page built for modern browsers still does its job in an older one, with the clever parts simply absent rather than broken. Less capable, not unusable.
Progressive Enhancement
Progressive enhancement means building a page that works with HTML alone, then adding CSS and JavaScript on top. Each layer improves it; none of them is needed for the content to be readable.
CSS Grid
CSS Grid is the layout mode for arranging items in two dimensions at once — rows and columns together. You turn it on with display: grid on the parent and define the tracks with grid-template-columns and grid-template-rows.
Web Analytics
Measuring who visits a site and what they look at. The two methods — a script running in the visitor's browser, or counting each request as it is served — produce different numbers, and neither of them is wrong.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →