cssoverview.comThe whole cascade

How it works

It opens the page in a real browser, watches what loads, and reports what the browser actually painted — computed styles, not the CSS as written.

A real render, not a parse

The page is loaded in a real Chromium instance. It scrolls to trigger anything that loads lazily, then reads the computed font-family, colors, sizes and borders off the elements as they ended up on screen. Reading computed styles rather than parsing the source matters: a stylesheet can declare a hundred things the browser never applies, and the numbers here are the ones that survived the cascade.

Real fonts, captured off the wire

As the page loads, every stylesheet and font file it requests is captured from the network. That is the point of difference from most tools: the font specimens in the report are set in the site’s actual font files, embedded into the report, rather than an approximation from whatever you happen to have installed. Each family is matched back to its @font-face rule, and the delivery host is classified — self-hosted, Google Fonts, Adobe Fonts or a third-party CDN.

When a site turns the browser away

Some sites refuse a headless browser and answer with a block page. When that happens, the page is rendered a second time in a full browser with a real window — which gets a report out of sites that a headless render cannot. It costs about ten extra seconds, so it only runs for pages that were already failing, and the tool names the site holding things up while it retries.

See what it reports, or that it needs no DevTools and no laptop. Ready to try? Analyze a page.