W3C home > Mailing lists > Public > www-style@w3.org > August 2013

[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>

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

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:30 UTC