The annual Interop initiative — a collaboration between Apple, Google, Microsoft, and Mozilla — has significantly reduced cross-browser divergence; in 2026, major features like CSS anchor positioning, scroll-driven animations, and container style queries achieved cross-browser support. Rendering engines still differ (Chrome/Edge use Blink, Firefox uses Gecko, Safari uses WebKit), and subtle inconsistencies remain in newer APIs. The key is strategic testing and progressive enhancement: feature detection, polyfills where needed, and targeting the stable Baseline support level for production-ready decisions. Think of compatibility work as an investment in reach — a broader browser matrix means a larger accessible audience, but each additional target multiplies testing complexity.
What This Cheat Sheet Covers
This topic spans 10 focused tables and 86 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Feature Detection Techniques
The golden rule of cross-browser work is to test for a capability, not for a browser — ask whether grid is supported, not whether the user is on Chrome. These techniques span CSS (@supports) and JavaScript (CSS.supports(), the 'X' in window check, matchMedia), with libraries like Modernizr automating dozens of tests at once. The legacy user-agent sniffing entries are included mainly as a warning: they're unreliable and easily spoofed, so prefer feature detection or the modern Client Hints every time.
| Technique | Example | Description |
|---|---|---|
.container { display: grid; }} | • Native CSS feature query that conditionally applies styles only if the browser supports a specific property or value • prevents broken layouts from unsupported features. | |
if ('IntersectionObserver' in window) { new IntersectionObserver(cb);} | • Check for API existence before use • avoids runtime errors in older browsers by testing for constructors, methods, or properties on the relevant object. | |
if (CSS.supports('grid-template-columns', 'subgrid')) { // use subgrid} | • JavaScript programmatic equivalent of @supports • lets you branch logic at runtime based on CSS property/value support without touching stylesheets. | |
if (window.matchMedia('(prefers-color-scheme: dark)').matches) { applyDarkTheme();} | • Test for media query support at runtime • useful for detecting color scheme preferences, reduced motion, viewport breakpoints, and other media features in JavaScript. |