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

• From: Edward O'Connor <eoconnor@apple.com>
• Date: Tue, 13 Aug 2013 11:14:56 -0700
• To: www-style@w3.org
• Message-id: <m2k3jpihjz.fsf@eoconnor.apple.com>

Hi,

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);
  }


Thanks,
Ted

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