Riff

Riff / Built on the open web / Styling

:has()

Styles a parent from a child's state, without the script toggling classes.

A post with its tracks listed, and the player bar along the bottom of the screen
The three equalizer bars on the playing row, following the live signal.

How Riff uses it

The seek control is an invisible range input over the seek line, so its keyboard focus ring is drawn on the parent bar instead. When the script has a live audio reading it sets data-live on the player, and the equalizer bars on the playing row drop their fallback keyframes so only the live movement shows. In the Listen app, a record card draws its focus ring around the whole card when the link inside it is focused.

Why

Each case would otherwise mean the script toggling classes on every focus change and every analyser start and stop.

Without it

The seek bar has no visible keyboard focus ring, and the equalizer bars run their keyframes over the live reading.

Where

Links open the source at the commit this page was published from.

Reference: :has() on MDN.