New CSS Relative Units · January 6, 2023

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.

See the Pen <a href="https://codepen.io/argyleink/embed/preview/oNxbNzy"> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>) on <a href="https://codepen.io">CodePen</a>.

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!

41 comments #

215likes

$\\ uto-usui //$

35reposts

Join the conversation on

CSSの単位ってめっちゃあるんや nerdy.dev/new-relative-u…

ユイト

Once support picks up, some of these will be absolute musts.

Daniel Yuschick

単位めっちゃ増えたよねって話してたけどまさか44とは…！まさにexplosion 🤯

hisako135

waiting for yalu unit. Yet Another Length Unit

Loksly

CSS é gigante

Cu & Código

😅

desenvolvweb

Have you tested the drop-cap in browsers other than Chromia? It does’t fit well in Firefox.

Gunnar Bittersmann

When I had to struggle with drop-caps, I came up with a combination of margin and line-height to make it look good in Firefox, Safari and Chromia (magic numbers, depending on used font). codepen.io/gunnarbittersm…

Gunnar Bittersmann

Safari has implemented `-webkit-initial-letter` codepen.io/gunnarbittersm…

Gunnar Bittersmann

We need a css unit based on the amount of css units

🍩 Pablopang.svelte

Well that seems too many.

Jez McKean 🟠

We're going to need a website just to pick CSS units. 🧐

Florens Verschelde

Firefox doesn't apply line-height to ::first-letter. Partly because it's an under-specified thing. Though a fix landed in Nightly recently that should make it behave closer to Chromium.

Florens Verschelde

Thanks for the note. This means I need to check my solution (or should I say “hack”?) once the fix lands in the released version. Or better, a little earlier. 😉

Gunnar Bittersmann

Should be in Firefox 110, though I'm not sure if it's behind a pref that will make it Nightly-only for a while or if it will "ride the trains" to Fx 110 beta and stable. See for details: bugzilla.mozilla.org/show_bug.cgi?i…

Florens Verschelde

Just noticed you're missing `rlh` in the CodePen example. Thought I'd throw that out there, assuming no one has already noticed. Amazing article! 💜

@css@tech.lgbt 🌍🌹🕊️🌈🖖

New CSS Relative Units · 2023年1月6日 nerdy.dev/new-relative-u…

✨✋😇🤚✨

Yep with all interactive examples

Kaartik Shukla

I might be alone in this but im of the belief that less is more, and i Think the browsers and w3c has an important task in cleaning up the languages, so fx after flexbox and grid we dont need float, and i Think that should be deprecated from the spec. Same with some of the units

Nomis.cph

TIL: There are 44 CSS length units 🤯

Peter Mekhaeil

These are great but I really still want basic unit rounding much more than new units.

Mike Hemberger

You missed vmin/vmax with s*, d* and l* prefixes. So 50 in total: github.com/csstree/csstre… (However, % is more general "unit", not a length only, so I prefer to say 49 length units in total)