The CSS Custom Highlight API, Explained

Sunkanmi Fafowora has a detailed walkthrough of the CSS Custom Highlight API, which is now supported across all major browsers. The styling side relies on the ::highlight() pseudo-element function, but the real logic lives in JavaScript. For more context on how ::highlight() interacts with other highlight pseudo-elements—and there are quite a few of them—check out this earlier piece on styling search text and related pseudo-elements.

When Images Overflow Themselves

Temani Afif has a useful explanation of a quirk where an <img> element acts like a container, and the replaced content (the actual image resource) can overflow that container. That behavior explains why you can swap the src entirely from CSS:

<img src="image.avif" alt="Alt text">
img {
  content: url(new-image.avif) / "New alt text";
}

You can even do this:

img {
  content: image-set(
    url("image.avif") 1x,
    url("image-2x.avif") 2x,
    url("image-3x.avif") 3x
  );
}

Improving text-stroke with paint-order

Tyler Sticka has a tip for handling the less-pleasant side of text-stroke. Because strokes are center-aligned, half of the stroke bleeds outside the glyph while the other half sits inside, and that interior half often ruins the look.

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 cannot change the stroke alignment, but it does let the text fill paint over the inside half of the stroke. One catch: you still need the prefixed -webkit-text-stroke for all browser vendors. A proper upgrade to text-stroke is long overdue.

A CSS-Only Approach to Skeleton UIs

Lea Verou posed a question about styling skeleton UIs with pure CSS, and the community responded with a variety of approaches. One notable suggestion from Agustin Capeletto was box-decoration-break: clone, though it seems that different elements call for different solutions.

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

Getting More Out of the lh Unit

Ahmad Shadeed has put together a roundup of ways to use the lh unit, which turns out to be fairly versatile. If you are 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.

New CSS for Diagonal Scrolling and Navigation

Bramus has been busy on two fronts. First, he explains how the new scroll-axis-lock property enables diagonal scrolling—by default, browsers let you scroll along one axis at a time only.

He also introduced CSS navigation matching, which lets you style elements based on where a user is navigating to or from. There is an early look at this feature available as well. It is a genuinely intriguing capability, and neither Chrome, Safari, nor Firefox has shipped a new stable version since the last issue, so there is no rush to cover more—although it was worth not letting this one slip under the radar.