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 <[email protected]> > To: [email protected] > Subject: [whatwg] Dynamic pseudo-classes on video/audio element to > allow styling of controls > Message-ID: <[email protected]> > 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 <[email protected]> > To: [email protected] > Subject: Re: [whatwg] Dynamic pseudo-classes on video/audio element to > allow styling of controls > Message-ID: <[email protected]> > Content-Type: text/plain; charset=utf-8; format=flowed; delsp=yes > > On Sat, 23 Apr 2011 05:25:20 +0200, Dimitri Glazkov > <[email protected]> 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 <[email protected]> > To: Philip J?genstedt <[email protected]> > Cc: WHATWG <[email protected]> > Subject: Re: [whatwg] Dynamic pseudo-classes on video/audio element to > allow styling of controls > Message-ID: <[email protected]> > Content-Type: text/plain; charset=ISO-8859-1 > > On Sat, Apr 23, 2011 at 2:57 AM, Philip J?genstedt <[email protected]> > wrote: > > On Sat, 23 Apr 2011 05:25:20 +0200, Dimitri Glazkov < > [email protected]> > > 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 <[email protected]> > To: [email protected] > Subject: Re: [whatwg] Dynamic pseudo-classes on video/audio element to > allow styling of controls > Message-ID: <[email protected]> > Content-Type: text/plain; charset=utf-8; format=flowed; delsp=yes > > On Sat, 23 Apr 2011 17:02:56 +0200, Dimitri Glazkov > <[email protected]> wrote: > > > On Sat, Apr 23, 2011 at 2:57 AM, Philip J?genstedt <[email protected]> > > wrote: > >> On Sat, 23 Apr 2011 05:25:20 +0200, Dimitri Glazkov > >> <[email protected]> > >> 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 > > > ------------------------------ >
