Blader door elke CSS-eenheid — absoluut (px, cm, pt), lettertype-relatief (em, rem, ch), viewport (vw, dvh), container-query, grid (fr), hoek, tijd en resolutie — in een doorzoekbaar, op type filterbaar naslagwerk met een beschrijving, een "wanneer te gebruiken"-notitie en kopieerklare tokens. In je browser, gratis.

Elke CSS-eenheid, uitgelegd. Alles draait in je browser vanuit een ingebouwd naslagwerk — er wordt niets naar de server gestuurd.

Geen eenheid komt overeen met je zoekopdracht.
Probeer een andere eenheid of categorie — bijvoorbeeld rem, dvh, fr of hoek.

Over CSS-eenheden-naslagwerk

De CSS Units Reference documenteert elke eenheid die de taal biedt — 45 in totaal — georganiseerd per type: absolute eenheden zoals px, cm en pt; lettertype-relatieve eenheden zoals em, rem, ch en lh; viewporteenheden van vw en vh tot de nieuwere svh, lvh en dvh; container-query-eenheden zoals cqw en cqi; de grid-eenheid fr; plus hoek, tijd, resolutie en percentage.

Elke kaart geeft je meer dan een definitie: het eenheidstoken in kopieerbare monospace, de volledige naam, de categorie, een omschrijving in gewone taal van hoe hij wordt berekend, en een praktische “wanneer te gebruiken”-opmerking die aangeeft waar de eenheid zijn plek verdient — en waar een andere beter past.

Zoeken matcht tokens, namen en betekenissen, zodat rem, viewport width en root allemaal hun eenheden vinden, en typechips filteren het grid naar één familie. Alles werkt in je browser vanuit een ingebouwde referentie, zonder dat iets naar een server wordt gestuurd.

Hoe gebruik je CSS-eenheden-naslagwerk

  1. Zoek een eenheid op token, naam of betekenis — bijvoorbeeld rem, viewport width of angle.
  2. Gebruik de typechips om het grid te filteren op absolute, lettertype-relatieve, viewport-, container-, grid-, hoek-, tijd-, resolutie- of percentage-eenheden.
  3. Lees de omschrijving en de “wanneer te gebruiken”-opmerking van elke eenheid om de juiste te kiezen.
  4. Klik op de kopieerknop om het eenheidstoken voor je stylesheet te grijpen.

Veelgestelde vragen

Gebruik rem voor lettergroottes en alles wat moet meeschalen met de voorkeurstekstgrootte van de gebruiker — rem volgt de root-lettergrootte, waardoor toegankelijkheidsinstellingen van de browser werken. Gebruik px voor dingen die optisch constant moeten blijven, zoals haarlijnranden.

em is relatief aan de eigen lettergrootte van het huidige element, waardoor geneste elementen de waarde opstapelen; rem is altijd relatief aan het rootelement, wat voorspelbare resultaten geeft. Daarom is rem de standaardkeuze geworden voor afstanden en typografieschalen.

Mobiele browsers tonen en verbergen hun werkbalken, wat de zichtbare hoogte verandert, terwijl vh vastzit aan de grotere lay-outgrootte. De dynamische eenheid dvh volgt de daadwerkelijk zichtbare hoogte terwijl werkbalken bewegen, en svh/lvh houden zich vast aan de kleinste en grootste toestand.

fr verdeelt de vrije ruimte van een gridcontainer per fractie: grid-template-columns: 2fr 1fr geeft de eerste kolom tweemaal de overgebleven breedte van de tweede, nadat vaste tracks en gaps zijn afgetrokken. Hij bestaat alleen binnen grid-track-definities.

Ze bepalen de grootte van elementen relatief aan hun dichtstbijzijnde query-container in plaats van de viewport: cqw is 1% van de breedte van de container, cqi 1% van zijn inline-grootte. Zo kan een component schalen naar de box waarin het leeft, onafhankelijk van de schermgrootte.

Ja. Alle 45 eenheden zijn gratis gedocumenteerd op een pagina die volledig in je browser werkt — geen aanmelding, geen verzoeken naar de server.

Hulp nodig?
Een probleem met deze tool gevonden? Laat het ons weten.
Een probleem melden

Voeg deze gratis tool toe aan je eigen website — kopieer en plak de onderstaande code.