[whatwg] Dynamic pseudo-classes on video/audio element to allow styling of controls (Philip J?genstedt)

[Ronny Orbach]

I think this would be a great addition to CSS. As for behavior, it could get
as simple as $(video:paused ~ .playpause').click(play);
Custom controls aren't everything. We can use the default and do things like
video:playing ~ .darkLayer {opacity: 0.8;}. Not having parent selectors
means we have to use sibling or adjacent selectors here, but the only other
option is to have the proposed pseudo-classes on the body tag, such as
body:playing.
This is useful, but semantically wrong and error-prone (two videos and audio
on the same page... Good luck with that).

  --
  Ronny Orbach
  Front End Developer
  Conduit

Of course progress bar is out of scope here. But for example having
audio:muted could be useful.


Message: 2
> Date: Fri, 22 Apr 2011 20:25:20 -0700
> From: Dimitri Glazkov <dglazkov at chromium.org>
> To: whatwg at whatwg.org
> Subject: [whatwg] Dynamic pseudo-classes on video/audio element to
>        allow   styling of controls
> Message-ID: <BANLkTi=T2NPhFnC+qt6-pRp1zqLOXTMDAA at mail.gmail.com>
> Content-Type: text/plain; charset=ISO-8859-1
>
> I wonder if it makes sense to introduce a set of pseudo-classes on the
> video/audio elements, each reflecting a state of the media on the
> controls (playing/paused/error/etc.)? Then, we could use just CSS to
> style media controls (whether native or custom), and not have to
> listen to DOM events just to tweak their appearance.
>
> :DG<
>
>
> ------------------------------
>
> Message: 3
> Date: Sat, 23 Apr 2011 11:57:10 +0200
> From: Philip J?genstedt <philipj at opera.com>
> To: whatwg at lists.whatwg.org
> Subject: Re: [whatwg] Dynamic pseudo-classes on video/audio element to
>        allow styling of controls
> Message-ID: <op.vudxxktcsr6mfa at localhost.localdomain>
> Content-Type: text/plain; charset=utf-8; format=flowed; delsp=yes
>
> On Sat, 23 Apr 2011 05:25:20 +0200, Dimitri Glazkov
> <dglazkov at chromium.org> wrote:
>
> > I wonder if it makes sense to introduce a set of pseudo-classes on the
> > video/audio elements, each reflecting a state of the media on the
> > controls (playing/paused/error/etc.)? Then, we could use just CSS to
> > style media controls (whether native or custom), and not have to
> > listen to DOM events just to tweak their appearance.
>
> With a sufficiently large set of pseudo-classes it might be possible to do
> *display* most of the interesting state, but how would you *change* the
> state without using scripts? Play/pause, seek, volume, etc...
>
> --
> Philip J?genstedt
> Core Developer
> Opera Software
>
>
> ------------------------------
>
> Message: 4
> Date: Sat, 23 Apr 2011 08:02:56 -0700
> From: Dimitri Glazkov <dglazkov at chromium.org>
> To: Philip J?genstedt <philipj at opera.com>
> Cc: WHATWG <whatwg at lists.whatwg.org>
> Subject: Re: [whatwg] Dynamic pseudo-classes on video/audio element to
>        allow styling of controls
> Message-ID: <BANLkTik+et71zjPW+aHQK8-jyEX_5dTs6w at mail.gmail.com>
> Content-Type: text/plain; charset=ISO-8859-1
>
> On Sat, Apr 23, 2011 at 2:57 AM, Philip J?genstedt <philipj at opera.com>
> wrote:
> > On Sat, 23 Apr 2011 05:25:20 +0200, Dimitri Glazkov <
> dglazkov at chromium.org>
> > wrote:
> >
> >> I wonder if it makes sense to introduce a set of pseudo-classes on the
> >> video/audio elements, each reflecting a state of the media on the
> >> controls (playing/paused/error/etc.)? Then, we could use just CSS to
> >> style media controls (whether native or custom), and not have to
> >> listen to DOM events just to tweak their appearance.
> >
> > With a sufficiently large set of pseudo-classes it might be possible to
> do
> > *display* most of the interesting state, but how would you *change* the
> > state without using scripts? Play/pause, seek, volume, etc...
>
> This is not the goal of using pseudo-classes: they just provide you
> with a uniform way to react to changes.
>
> >
> > --
> > Philip J?genstedt
> > Core Developer
> > Opera Software
> >
>
>
> ------------------------------
>
> Message: 5
> Date: Sat, 23 Apr 2011 20:37:55 +0200
> From: Philip J?genstedt <philipj at opera.com>
> To: whatwg at lists.whatwg.org
> Subject: Re: [whatwg] Dynamic pseudo-classes on video/audio element to
>        allow styling of controls
> Message-ID: <op.vuel1hrosr6mfa at localhost.localdomain>
> Content-Type: text/plain; charset=utf-8; format=flowed; delsp=yes
>
> On Sat, 23 Apr 2011 17:02:56 +0200, Dimitri Glazkov
> <dglazkov at chromium.org> wrote:
>
> > On Sat, Apr 23, 2011 at 2:57 AM, Philip J?genstedt <philipj at opera.com>
> > wrote:
> >> On Sat, 23 Apr 2011 05:25:20 +0200, Dimitri Glazkov
> >> <dglazkov at chromium.org>
> >> wrote:
> >>
> >>> I wonder if it makes sense to introduce a set of pseudo-classes on the
> >>> video/audio elements, each reflecting a state of the media on the
> >>> controls (playing/paused/error/etc.)? Then, we could use just CSS to
> >>> style media controls (whether native or custom), and not have to
> >>> listen to DOM events just to tweak their appearance.
> >>
> >> With a sufficiently large set of pseudo-classes it might be possible to
> >> do
> >> *display* most of the interesting state, but how would you *change* the
> >> state without using scripts? Play/pause, seek, volume, etc...
> >
> > This is not the goal of using pseudo-classes: they just provide you
> > with a uniform way to react to changes.
>
> In other words, one would still have to rely heavily on scripts to
> actually implement custom controls?
>
> Also, how would one style a progress bar using pseudo-classes? How about a
> displaying elapsed/remaining time on the form MM:SS?
>
> --
> Philip J?genstedt
> Core Developer
> Opera Software
>
>
> ------------------------------
>