Re: [selectors4] Adding User Action Pseudo-classes for touch

On Sat, Nov 17, 2012 at 9:14 AM, Wes Johnston <wjohnston@mozilla.com> wrote:
> It would be nice when interacting with web pages in touch or pen based
> environments if there were easy ways to style objects based on whether they
> are currently being touched or perhaps if they were touched in the last
> touch session on the screen. I'd like to propose two potential selectors for
> these situations:
>
> 1.) :touching for when an element is actively being touched on the screen.
> Unlike targets in the touchevents spec, this should actively change as the
> user moves their finger on the screen. As soon as a user lifts their finger
> from the screen these selectors would no longer match. One potential use
> case for this is something like an onscreen keyboard where you want the keys
> to light up as the user drags their finger on the keyboard. This could also
> be helpful as a means of providing quick feedback about what is being
> touched on screen (i.e. tap highlights).
>
> 2.) :touched to match the elements that are actively being touched, or
> elements that were being touched the last time a finger was on the screen.
> The use case I want to address here are things like drop down menus, where
> you would likely want them to remain visible on screen even after the users
> finger has been lifted, but to disappear if the user touches outside the
> menu. The selector should be removed as soon as another touch starts, ends
> or moves on the document (i.e. if two fingers are on the screen and one is
> lifted,  the selector should match until the second finger moves or another
> finger touches the document).
>
> In both cases, the selectors should stop matching if the system starts
> performing any system actions on the page (such as scrolling).
>
> Apologies if I'm doing something incorrectly here. Its my first email to a
> working group.

Hey, Wes!  Don't worry, you did good here.  The important part was
presenting some problems, which you did, so that we can evaluate your
proposed solutions and see if something better might work too.

In this case, both of your problems already have solutions, and those
solutions are multi-modal, rather then being focused on touch.

In particular, your :touching pseudoclass can instead be done with
:active.  I'm pretty sure browsers already handle it this way, so that
the currently-touched element matches :active.

Similarly, your :touched pseudoclass can be done with :focus.  You
just have to make your element focusable with the tabindex attribute.
(Remember that tabindex can either be an explicit integer denoting its
order in the page's tab list, or 0 to mean "put it in the default
position for its place in the document", or -1 for "let this be
focusable, but don't put it in the tab list".  For the use-cases you
present, like a menu, you shouldn't use -1, as keyboard users would
probably like to use your menu as well.)

So, for example, to make a hover menu with a selector like "ul >
li:hover > ul { display: block; }", just instead do "ul > li:hover >
ul, ul > li:focus > ul { display: block; }", and put tabindex on your
<li> elements.

~TJ

Received on Tuesday, 27 November 2012 23:11:13 UTC