v152 · CSS

Compatibility Lab

Probes browser support for all 7 media element pseudo-classes using CSS.supports() and live DOM injection. Shows a CSS-only playing/paused indicator, and provides a JavaScript event-listener fallback pattern for browsers that don't support the pseudo-classes yet.

CSS.supports() probes

live demo — CSS-only state indicator

Play, pause, or mute the audio element below. Indicators are driven purely by CSS — no JS reads any property.

:paused

JavaScript fallback pattern

/* Fallback when :playing / :paused are not supported */ @supports not selector(audio:playing) { /* Use JS-added class instead */ audio.is-playing { outline: 3px solid green; } audio.is-paused { outline: 2px solid orange; } } // JavaScript fallback (event listeners) function applyMediaFallback(el) { if (CSS.supports('selector(audio:playing)')) return; // native supported el.addEventListener('play', () => { el.classList.add('is-playing'); el.classList.remove('is-paused'); }); el.addEventListener('pause', () => { el.classList.add('is-paused'); el.classList.remove('is-playing'); }); el.addEventListener('volumechange', () => { el.classList.toggle('is-muted', el.muted || el.volume === 0); }); } document.querySelectorAll('audio, video').forEach(applyMediaFallback);

see also