Riff / Built on the open web / Behaviour

clip-path

Hides the Song and Video labels on a phone, but not from screen readers.

Now Playing on a wide screen: the Song and Video switch at the top, the cover on the left, the Up next list on the right, and the player bar along the bottom — The Song/Video switch reading as words; on a phone the same labels are clipped and icons show.

How Riff uses it

The Song and Video switch shows two icons on a phone. Its text labels stay in the markup for screen readers but are clipped to nothing with inset(50%). At 900px and up the clip is lifted, the labels show as words and the icons are hidden.

Why

Two icons on a phone and two words on a wide screen, from one set of markup, with an accessible name in both.

Without it

The 1px size and overflow: hidden in the same rule hide the text anyway.

Where

plugins/riff/assets/riff.css, line 870
```
clip-path: inset(50%);
```
plugins/riff/assets/riff.css, line 1284
```
clip-path: none;
```

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

Reference: clip-path on MDN.