RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconGit IconSpeaking IconTools Icon
H1 shown using the vmin sizing, with a dropdown element for choosing a different unit.
A series of images of an avatar doing a bunch of skateboard tricks.

New CSS Relative Units

Updated 2 min read

CSS has had an explosion of new length units, how many of them do you know? Test your skills in this Codepen, or just explore and see what's changed since you last looked.

What're these good for? #

This site uses the line height lh unit for the drop cap at the beginning of the article! Go ahead and inspect it, but I'll also paste a snippet of it here:

::first-letter {
  font-size: 7ex;
  font-size: 2lh;
  float: start;

I get to set the font-size to the exact amount of text lines I want the drop cap to span. Pretty rad. Then, since I placed it after a more stable unit, it'll only use this newer unit if the browser understands. Thanks Cascade.

A note on the cap unit #

Maybe you're already using a cap (capital letter) unit? Or maybe you knew this has been in Firefox for over a year 👀

h1 {
  font-size: 5cap;

Chrome doesn't support cap yet.

I also asked about rcap, which seems like a logical friend for the relative unit to have a root relative counterpart.

54 units, oh my! #

This brings us to a total of 54 CSS length units. And I don't think we're done yet!

Mentions #

Join the conversation on

  • Aurelie Touchard 💻 🖍 📒
  • Wolfgang Wiese
  • Kai Eichinger
  • Craig Webb
  • Jyn Xio
  • Alena Nikolaeva
  • Juk
  • Asim Dahal
  • Darío Ureña
  • John Miller
  • Luis Crespo
  • Евгений Стрикунов
  • Bro Lov Sis
  • Daniel Matejka
  • David
  • Hyukho Song (Hugo)
  • David Leininger
  • siriwatknp
  • Punk Adelic
  • Alfapapa
  • rettoSea
  • Call me Hitch
  • WebPerformance Report
  • Paul Kinlan
  • Guillem
  • Dailos R. DÍAZ LARA
  • Marian Villa 🇨🇴
  • TotheMoon
  • imekachi
  • chrislutw
  • fg

Crawl the CSS Webring?

previous sitenext site
a random site