{
  "$type": "site.standard.document",
  "description": "This brings us to a total of 54 CSS length units.",
  "path": "/new-relative-units-ric-rex-rlh-and-rch",
  "publishedAt": "2023-01-06T16:57:53.648Z",
  "site": "at://did:plc:jnj7wcwuvspxdsipmecmx7rs/site.standard.publication/self",
  "tags": [
    "blog",
    "css"
  ],
  "textContent": "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 by Adam Argyle ( @argyleink ) on CodePen . 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 : 7 ex ; 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!",
  "title": "New CSS Relative Units",
  "updatedAt": "2023-08-03T15:35:47.389Z"
}