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

Read moreDrupal 8.8.0 is available

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

Read moreBe a Drupal ambassador!

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 src="image.avif" alt="Alt text">
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 words Bleh and Neat written in blue stylized fonts with white outlines against a salmon background, demonstrating the text-stroke CSS property without and then with paint-order.
Source: Tyler Sticka.

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?

[image or embed]

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

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.

A screenshot of an interactive web demo showing an image floated to the left of some text. The ‘use lh [units]’ checkbox is selected, causing the image’s height to be equal to that of 6 lines of text.
Source: Ahmad Shadeed.

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!

Similar Posts