Hi Product Hunt 👋

I kept re-learning the same things about CSS units. Why 100vh still
breaks on iOS, what ch actually measures, when cqi beats vw,
whether 1in is ever an inch. The answers exist — scattered across
spec prose, MDN pages and blog posts from 2016.

So I wrote the book: CSS Units, a reference on every one of the 63 units
in the language.

What's in it:
- 11 chapters, in reading order: absolute, font-relative, percentage,
viewport (all 24 variants, including small/large/dynamic), container
query, fr, and the ones that aren't lengths at all — angles,
durations, resolutions.
- 25 interactive demos. Drag a container and watch cqi respond;
toggle mobile toolbars and watch svh/lvh/dvh diverge; put a real
ruler on your screen and see what 1cm is worth.
- A decision tree — describe the task, get the unit and the reason.
- A cheatsheet with every formula, a glossary, and a chapter on how
units behave inside calc(), clamp(), round() and trigonometry.
- ⌘K search that deep-links to the exact heading for any unit or math
function.

Browser support is written as dated facts, not adjectives: "all engines
since Nov 2022", not "modern browsers", each verified against compat
data and stamped with a review date.

What it deliberately doesn't do: no progress bars, no completion badges,
no "continue reading", no accounts, no ads, no analytics. A reference
book is dipped into, not completed. It's a static site — Astro, no
framework, no client-side router — and it reads fine with JavaScript off.

Would love to hear which unit tripped you up most — I'll take that as a
list of chapters to expand.

CSS Units

A complete interactive reference to every CSS unit

A complete interactive reference to every CSS unit