[selectors] Time-dimensional pseudo-classes and multiple timelines?

The examples given for the time-dimensional pseudo-classes (:current,
:past, :future) mention speech rendering of a document, which could
potentially apply to either built-in functionality of a page or to
third-party assistance software.  Other CSS specifications/drafts (such
as css2/2.1's aural stylesheets, or css3-speech) define CSS properties
that apply specifically to speech, and mention both accessibility
software and several other applications.

In the case of those speech-related properties, typically one property
value would make sense for a given element; for instance, the CSS
associated with an audiobook could associate a given voice with a
particular character's lines.

However, in the case of the time-dimensional pseudo-classes, it could
make sense to have multiple orthogonal users of these classes.  For
instance, one set of rules using these pseudo-classes might make sense
for use with assistive software, while another would make sense when
using those classes for a slide presentation.

Given that flexibility, would it make sense to add a cross-reference to
CSS media types ("@media speech", "@media projection") as one possible
mechanism to apply different time-dimensional rules for different use
cases?  Something like this (with "CSS media types" as a link to
http://www.w3.org/TR/CSS21/media.html):

"""
Multiple timelines may apply to a given document; for instance, a
document presented via speech rendering may define a timeline based on
the current position in that rendering, while a document presented as a
series of projected slides may define a timeline based on the currently
projected slide and the presenter's current position in that slide.
Authors may wish to use CSS media types (e.g. "@media speech", "@media
projection") to apply different rules using time-dimensional
pseudo-classes to different types of timelines.
"""

Also, an additional example using several of these pseudo-classes to
style slides using incrementally revealed points, as well as
illustrating the concept of :current matching ancestors of the current
element:

"""
@media projection {
  .slide:matches(:past, :future) { display: none; }
  .slide:current { display: block; background-color: white; }
  .slide:current li:current { color: red; }
  .slide:current :future { opacity: 0.3; }
}

This hides all slides except the current slide, highlights the current
point in red, and fades out future material.
"""

(I added "background-color: white;" to .slide to avoid having the
example contradict http://www.w3.org/QA/Tips/color .)

Finally, I think it would make sense to elaborate a bit further on the
behavior of :current, :past, and :future with respect to ancestor
elements: :current applies to all ancestors of a :current element (all
the way to :root), but :future and :past do not, precisely because
:current does.  Any given element must match at most one of :current,
:past, or :future.

- Josh Triplett

Received on Monday, 8 December 2014 17:56:22 UTC