Thursday, September 16th, 2010

Simulating :hover and Double Clicks With Pure CSS on Mobile Devices

Category: CSS

>When creating mobile web apps on devices like the iPhone, iPad, and Android you lose the beloved CSS :hover property which can make things so much easier to create. Chris Coyier has been exploring how to respond to single and double clicks still using pure CSS even when we don’t have :hover.

For single clicks, Chris has found that you can use tabindex as a trick to simulate :hover.

Chris creates a sample where he has an image expand when ‘hovered’ over:

Chris has the following HTML markup using HTML5 (notice the tabindex property):

  1. <section class="image-gallery">
  2.  
  3.    <figure tabindex="1">
  4.       <img src="images/img-1.jpg" alt="jump, matey" />
  5.       <figcaption ">Jump!</figcaption>
  6.    </figure>
  7.  
  8. </section>

Each image/figure is given a tabindex one higher than the last one.

The image/figure can then be hooked onto using the :focus property, which will work on mobile devices when a user presses their finger onto the element. When this fires some CSS will cause the outline to disappear; the image to rotate and scale larger; and a box shadow to appear:

  1. figure:focus {
  2.   outline: none;
  3.   -webkit-transform: rotate(-3deg) scale(2.5);
  4.   -moz-transform: rotate(-3deg) scale(2.5);
  5.   -webkit-box-shadow: 0 3px 10px #666;
  6.   -moz-box-shadow: 0 3px 10px #666;
  7.   z-index: 9999;
  8. }

Once he had single-click under his belt, Chris moves on to trying to get a CSS solution for double-click for mobile devices. He mentions that for this its a bit more CSS nerdery since JavaScript is pretty straightforward in this case:

For anyone interested, “dblclick” is a native JavaScript event. If you wanted to, for example, force links to be double clicked instead of single clicked, you could bind a simple { return false; } function to the click event. Then also bind a function to dblclick that would change the window.location to the links href attribute.

This article isn’t about that, it’s about hardcore CSS nerdery and seeing if we can also do it without using JavaScript.

See Chris’ demo and blog post for more details on the double-click CSS solution.

Related Content:

Posted by Brad Neuberg at 7:00 am
3 Comments

+++--
3.3 rating from 6 votes

3 Comments »

Comments feed TrackBack URI

Is the purpose of adding the tabindex atrribute ensuring some sort of cross-browser compatibility? In Firefox, for sure, :focus works without tabindex. Ostensibly, the only purpose of tabindex is to specify and order of elements selected when the Tab key is pressed on the keyboard, which has no correlation with anything in the mobile world.

Comment by chrisdpratt — September 16, 2010

I agree with chrisdpratt, the tabindex is not aimed to that sort of things. It’s designed to enable tabulation on non tabulable elements. I don’t think that that’s a good accessibility practice. Furthermore to enable tabulation without altering the tabulation order I think that you have to use tabindex=”0″. See http://dev.opera.com/articles/view/introduction-to-wai-aria/ & http://webaim.org/techniques/keyboard/tabindex for more informations.

Comment by yannmadeleine — September 16, 2010

yup, it’s definitely tabindex=0. Using a numbered tabindex will definitely break the natural tabbing order of the page and thus breaking accessibility even more.

Comment by gonchuki — September 17, 2010

Leave a comment

You must be logged in to post a comment.