Intent to Ship: Media element pseudo-classes

[Chromestatus]

Contact emails

foo...@chromium.org

Specification

https://html.spec.whatwg.org/multipage/semantics-other.html#pseudo-classes

Summary

The :playing, :paused, :seeking, :buffering, :stalled, :muted, and :volume-locked CSS pseudo-classes match <audio> and <video> elements based on their state. This is one of the focus areas in https://wpt.fyi/interop-2026.

Blink component

Blink>Media

Web Feature ID

media-pseudos

Motivation

Allows styling of media elements or custom media controls based on the state of the media element. For example, a large play button overlaying a video could be hidden while playing. There is no expectation that custom media controls can be implemented entirely with CSS, as there is still a lot of state not exposed to CSS.

Initial public proposal

No information provided

TAG review

No information provided

TAG review status

Not applicable

Goals for experimentation

None

Risks

Interoperability and Compatibility

No information provided

Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=1707584)

WebKit: Shipped/Shipping (https://bugs.webkit.org/show_bug.cgi?id=229431)

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No information provided

Debuggability

No information provided

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/?q=feature%3Amedia-pseudos The remaining failure in sound-state.html depends on a change to how the muted content attribute should work in HTML: https://crbug.com/509570175 https://crrev.com/c/7831199

Flag name on about://flags

No information provided

Finch feature name

CSSMediaElementPseudos

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://crbug.com/40246121

Measurement

https://chromestatus.com/metrics/webfeature/timeline/popularity/436

Estimated milestones

Shipping on desktop	150
Shipping on Android	150
Shipping on WebView	150

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No information provided

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5068277495758848?gate=4768460324339712

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/691af1b8.050a0220.b6611.0871.GAE%40google.com

This intent message was generated by Chrome Platform Status.

[Philip Jägenstedt]

Please also consider this a PSA for the minor change to how the muted attribute works, required to pass all of the tests: https://crrev.com/c/7831199

There is a small risk in that change, in particular any JS code that calls element.setAttribute('muted', '') expecting that nothing would happen would instead get a muted video. However, setting the muted content attribute post-creation has been a no-op previously, so this would only be my mistake. It's also easy to fix. Still, I'll put it behind a separate flag and enable is in the same CL that flips the flag for media element pseudos.

[Chris Harrelson]

LGTM1

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAARdPYfNyu-a0DGY8-y1aYpW8Vtqv3dXH58ern0YS8x%3Dn1BLPA%40mail.gmail.com.

[Mike Taylor]

LGTM2

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw-%3DhXwY2znQ%3Dp-8Nb%2BjJ8iNTtva9NW6mHGY-ieFuc-KDQ%40mail.gmail.com.