The ex unit is a thing that exists

Today Andy Bell tweeted about creating a hero component and mentioned the ex unit. I hadn’t heard of it and thought it was one of the newfangled additions to CSS. I was so surprised that the first result was a Stack Overflow from 11 years ago.

I love how back in the day this component would have been a right pain in the arse, but modern CSS makes it an absolute doddle, thanks to aspect-ratio, flexbox and ex units pic.twitter.com/IzFOYY0Soz

— Andy Bell (@hankchizljaw) May 26, 2022

The ex unit on MDN:

Represents the x-height of the element's font. On fonts with the "x" letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts.

MDN

Thankfully, he also shared a gist with some CSS for me to kick the tires on very quickly.

.cutout-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  position: relative;
  aspect-ratio: 1920/839;
}

.cutout-hero :is(img, picture, video) {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.cutout-hero__heading {
  font-size: var(--size-mega);
  width: min-content;
  line-height: 1;
  transform: translateY(0.8ex);
}

As I do, I made a CodePen right away. I’d recommend playing with it in full screen view.

See the Pen Untitled by Dan Denney (@dandenney) on CodePen.

I'll definitely try playing with this more. I've done this with `em` and `px` before, but I dig this more. Funnily, I probably have come across it before when I read Every Layout, but ¯\_(ツ)_/¯