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):
- <section class="image-gallery">
- <figure tabindex="1">
- <img src="images/img-1.jpg" alt="jump, matey" />
- <figcaption ">Jump!</figcaption>
- </figure>
- </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:
- figure:focus {
- outline: none;
- -webkit-transform: rotate(-3deg) scale(2.5);
- -moz-transform: rotate(-3deg) scale(2.5);
- -webkit-box-shadow: 0 3px 10px #666;
- -moz-box-shadow: 0 3px 10px #666;
- z-index: 9999;
- }
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.
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.
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.
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.