What’s !essential #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 plenty of actually cool (CSS) stuff.

How one can use the CSS Customized Spotlight API

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

Each syntaxes are fairly enjoyable to work with, although.

For those who’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 <img> component 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 src="https://css-tricks.com/whats-important-17/picture.avif" alt="Alt textual content">

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:

How one 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 usually appears to be like horrible.

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

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

How one can model skeleton UIs

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

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

However I can not for the lifetime of me determine spherical the sides (with out HTML adjustments 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 alternative ways to make use of the lh unit, which, because it seems, has a variety of makes use of. For those who’re not acquainted, 1lh is the same as the computed line-height.

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 mainly permits us to model components primarily based on the place the consumer is navigating to or from. (We now have an early have a look at it as effectively.)

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

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

what’s the worst html component? proper solutions solely

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

See ya in a few weeks!