Plus, how to style skeleton UIs, how to enable diagonal scrolling, how images can overflow themselves, and yet, still more. Basically, how to do a lot of really cool (CSS) stuff.

How to use the CSS Custom Highlight API

Sunkanmi Fafowora demonstrated how to use the CSS Custom Highlight API, which is now supported by all major web browsers. Despite “CSS” being in the name (the styling is handled by the ::highlight() pseudo-element function), it’s actually JavaScript that makes the wheels go round for this one.

Both syntaxes are quite fun to work with, though.

If you’re curious as to how ::highlight() works alongside other highlight pseudo-elements (there are actually quite a few of them), I wrote something up not too long ago.

How images can overflow themselves

Temani Afif explained how images can sort of overflow themselves, because the <img> element is like a container that the ‘replaced content’ (the image resource) can overflow.

I suppose that explains why we can swap the src using CSS, like this:

`` img { content: url(new-image.avif) / "New alt text"; }
Or even this:

img { content: image-set( url("image.avif") 1x, url("image-2x.avif") 2x, url("image-3x.avif") 3x ); }
Temani also showed us what we can do with this information:

How to fix text-stroke

Tyler Sticka reminded us (well, I’m learning about it for the first time…) how to fix text-stroke with paint-order. For those who don’t know, text-strokes are center-aligned, so half of the stroke appears on the outside while the other half appears on the inside, and the inside half often looks terrible.

The paint-order property doesn’t fix the alignment, but it does ensure that the text fill is painted over the inside half of the stroke.

Also, the prefixed version of text-stroke (-webkit-text-stroke) is still necessary for all browser vendors. Overall, an upgrade for text-stroke is long overdue, and hopefully we see that soon.

How to style skeleton UIs

Lea Verou contemplated how to style skeleton UIs using only CSS, and the wonderful CSS community chimed in with more than a few awesome solutions too. It was so nice to see box-decoration-break: clone in there (suggested by Agustin Capeletto), although different elements need different solutions, it seems.

Until it dawned on me: thick text-decoration + color: transparent + masks! Demo: codepen.io/leaverou/pen… But I can't for the life of me figure out how to round the edges (without HTML changes or fragility like hardcoding text size/length). Any takers?

— Lea Verou, PhD (@lea.verou.me) 17:39 · Aug 1, 2026

[image or embed]

Different ways to use the lh unit

Ahmad Shadeed showcased different ways to use the lh unit, which, as it turns out, has a range of uses. If you’re not familiar, 1lh is equal to the computed line-height.

How to enable diagonal scrolling

Bramus explained how the new scroll-axis-lock property facilitates diagonal scrolling (the default behavior only allows for scrolling one axis at a time).

An introduction to CSS navigation matching

Bramus also unveiled CSS navigation matching, which basically enables us to style elements based on where the user is navigating to or from.

It’s kind of mind-blowing, to be honest. Bramus actually published this right after I wrote What’s !important #16 (the last issue), but I just couldn’t let this one fly under the radar.

…

Since neither Chrome, Safari, nor Firefox has shipped a new stable version since What’s !important #16 (and because it’s Friday), let’s wrap this one up early. Instead, I’ll leave you with an interesting question — what’s the worst HTML element?

what is the worst html element? right answers only

— Zach Leatherman (@zachleat.com) 16:46 · Aug 13, 2026

See ya in a couple of weeks!