What’s !necessary #17: Customized Spotlight API, CSS Navigation Matching, Fixing text-stroke, and Extra

Plus, model skeleton UIs, allow diagonal scrolling, how pictures can overflow themselves, and but, nonetheless extra. Mainly, do a number of actually cool (CSS) stuff.

How you can use the CSS Customized Spotlight API

Sunkanmi Fafowora demonstrated use the CSS Customized Spotlight API, which is now supported by all main net browsers. Regardless of “CSS” being within the title (the styling is dealt with by the ::spotlight() pseudo-element perform), it’s truly JavaScript that makes the wheels go spherical for this one.

Each syntaxes are fairly enjoyable to work with, although.

CodePen Embed Fallback

Should you’re curious as to how ::spotlight() works alongside different spotlight pseudo-elements (there are literally fairly a couple of of them), I wrote one thing up not too way back.

How pictures can overflow themselves

Temani Afif defined how pictures can type of overflow themselves, as a result of the ingredient is sort of a container that the ‘changed content material’ (the picture useful resource) can overflow.

I suppose that explains why we will swap the src utilizing CSS, like this:

img {
  content material: url(new-image.avif) / "New alt textual content";
}

And even this:

img {
  content material: image-set(
    url("https://css-tricks.com/whats-important-17/picture.avif") 1x,
    url("image-2x.avif") 2x,
    url("image-3x.avif") 3x
  );
}

Temani additionally confirmed us what we will do with this info:

CodePen Embed Fallback

How you can repair `text-stroke`

Tyler Sticka reminded us (effectively, I’m studying about it for the primary time…) repair text-stroke with paint-order. For many who don’t know, text-strokes are center-aligned, so half of the stroke seems on the surface whereas the opposite half seems on the within, and the within half typically seems to be horrible.

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. — Supply: Tyler Sticka.

The paint-order property doesn’t repair the alignment, nevertheless it does be sure that the textual content fill is painted over the within half of the stroke.

Additionally, the prefixed model of text-stroke (-webkit-text-stroke) continues to be needed for all browser distributors. General, an improve for text-stroke is lengthy overdue, and hopefully we see that quickly.

How you can model skeleton UIs

Lea Verou contemplated model skeleton UIs utilizing solely CSS, and the fantastic CSS neighborhood chimed in with various superior options too. It was so good to see box-decoration-break: clone in there (steered by Agustin Capeletto), though totally different components want totally different options, it appears.

Till it dawned on me: thick text-decoration + colour: clear + masks!
Demo: codepen.io/leaverou/pen…

However I am unable to for the lifetime of me work out spherical the sides (with out HTML modifications or fragility like hardcoding textual content measurement/size).
Any takers?

[image or embed]

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

Other ways to make use of the `lh` unit

Ahmad Shadeed showcased other ways to make use of the lh unit, which, because it seems, has a variety of makes use of. Should you’re not acquainted, 1lh is the same as 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. — Supply: Ahmad Shadeed.

Bramus defined how the brand new scroll-axis-lock property facilitates diagonal scrolling (the default conduct solely permits for scrolling one axis at a time).

An introduction to CSS navigation matching

Bramus additionally unveiled CSS navigation matching, which principally allows us to model components primarily based on the place the person is navigating to or from.

It’s sort of mind-blowing, to be sincere. Bramus truly revealed this proper after I wrote What’s !necessary #16 (the final situation), however I simply couldn’t let this one fly below the radar…

Since neither Chrome, Safari, nor Firefox has shipped a brand new secure model since What’s !necessary #16 (and since it’s Friday), let’s wrap this one up early. As an alternative, I’ll depart you with an fascinating query — what’s the worst HTML ingredient?