[selectors4][css-ui] Timed media state pseudoclasses


When Web authors build custom media controls, they have to build a bunch
of appearance-related stuff imperatively in JS that should be easy to do
in a declarative manner.

For example, it's common to have a play/pause button whose appearance
depends on whether or not the media is playing.

  :matches(video, audio) + .controls button.playpause {
    background-image: url(pause.png);

  :matches(video, audio):paused + .controls button.playpause {
    background-image: url(play.png);

Similarly, volume controls often have a special appearance when the
media is muted.

  :matches(video, audio) + .controls .volume {
    background-image: url(vol-normal.png);

  :matches(video, audio):muted + .controls .volume {
    background-image: url(vol-muted.png);


Received on Tuesday, 13 August 2013 18:15:18 UTC