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!
