Interop 2024

I’ve been slightly behind the curve this year in terms of Interop, but I’ve finally caught up and I’m quite optimistic. If you don’t know what Interop is, I’d strongly recommend you give this a read from the 2022 edition.

There’s 12 focus areas this year, of which I’m only really bothered about a handful for the work I do. Let’s take a look at them in more detail.

text-wrap: balancepermalink

Ever since this came around, I was excited. I come from a very traditional design background, so typographic widows and orphans have always given me the ick. Mainly because I can still hear my old creative director barking about them in our design work, back in the day.

There’s also text-wrap: pretty, which is more for blocks of text like paragraphs, whereas text-wrap: balance is more for short text like headings. Steph Stimac wrote a really handy article about the differences, that I think you should read.

Getting this property working across all the browsers will be great, even though I’m still quite happy to treat it as a progressive enhancement.

Custom Propertiespermalink

The ol’ --color-dark: #252525 setup of Custom Properties — AKA CSS variables — is already hugely supported across the board. I would comfortably say that their introduction has been the most impactful addition to CSS since Flexbox.

The best part of Custom Properties for me is they are affected by the cascade, giving them super powers — enabling powerful interaction and state changes, while maintaining the right level of control. I would love to see const-like, unchangeable custom properties for design tokens, though to assist with that.

This isn’t the focus of Interop 2024 though. The focus on Custom Properties is the @property rule, just like this example from WebKit’s Interop summary:

@property --size {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

Looks pretty boring right? It’s not though because these unlock capabilities like more powerful animations and animating the previously un-animatable like gradients. Check out Una Kravet’s great run-down.

Relative colour syntaxpermalink

I’ll be honest, the new colour stuff in CSS makes my brain turn into porridge and leak out of my ears. I am simply not smart enough to get it. But, relative colour syntax is right up my street: especially as someone who spent a lot of time with Sass’s useful colour functions, once-upon a time.

.my-slightly-opaque-element {
	background: rgb(from var(--color-primary) r g b / 40%);
}

Need I say anymore? This use-case alone: making a design token slightly opaque is enough to get me excited. This is already available in Chromium and WebKit.

The focus of Interop 2024 seems to be on using currentColor in this context, however. I’m not sure what Firefox’s plans are for support, but let’s hope it comes soon.

Font size adjustpermalink

This is gonna be a killer feature for mixing web fonts. Webkit summarise it well:

Font size adjust provides a simple way to conform all the fonts used in a string of text to be the same visual size — so every character in 1.4rem-sized text, for example, has the same x-height — or cap height, ch width, ic width, or ic height. The two value syntax allows you to choose which measurement to conform.

The code looks like this:

body {
	font-family: Georgia, serif;
	font-size: 1em;
	font-size-adjust: from-font;
}

code {
	font-family: monospace;
}

This highlights a useful use case: monospace fonts in prose content. I spend way too long adjusting code sample sizes in prose content. This little font-size-adjust rule prevents the need for that because the x-height is matched. Lovely stuff.

Nesting? Nah, not for mepermalink

I dunno, I think I should write a post about nesting and my lack of excitement for it. Let me know. I get it unlocks stuff in the future, but it feels like too much of a strong focus on developer experience to me. There’s stuff I’d prefer to see being focused on, but y’know, I don’t run browsers lol.

Either way, it’s not something I focus any energy on because I have been burned — bad — with nesting in Sass codebases, so my brain won’t let me get excited about it. I can see it being useful for hover states etc though.

Wrapping uppermalink

Overall I feel good about this year’s Interop. It’s a fantastic scheme that keeps all the browsers focused on certain stuff, which we can certainly credit for the sheer speed that stuff arrives these days.

The question is: what are you excited about? Let me know.