Standardista

CSS3, JavaScript and HTML5 explained

Pseudo or not-so-pseudo Click Mobile Events

Posted By on March 19, 2013

When you ‘click’ with your finger there is no ‘right click’ event. Because of this, mobile devices react when you hold and click instead. Because there is no keyboard, mouse or right click, mobile browsers have some built in behaviors.

Tap Highlight Color

There is no such thing as hover on a touch device. Because of this, we have link tap highlight color which we can control with tap-highlight-color. You can style the highlight color to match your design. While the value transparent will get rid of the often-times unsightly effect, remember that removing the appearance of a tap effect negatively impacts accessibility.

#content a {
  -webkit-tap-highlight-color: #bada55;
}
#game a {
  -webkit-tap-highlight-color: transparent;
}

The above would make the background of any link #bada55 in our content, except for the links in the game board, which would show no effect on tap, other than the ones we controlled separately.

Kill the Selection Dialog

When you touch and hold on text copy, or touch and drag, you may have noticed the appearance of a selection diologue allowing you to copy or define the selected text. You can control this in WebKit browsers with:

-webkit-user-select: none;

When user-select is set to none on a DOM node, like a paragraph or even the <body>,  no copy/define selection dialog will appear.

The pointer-events: none; property / value pair is inappropriate in some settings, like games. While it prevents the user from getting the copy/define dialogue, it would also prevent any other touch events from occurring on the user-select targeted DOM node.

Kill the Images Dialog

Similarly to the selection dialog above, when a user touches and holds an image an image save / copy panel appears.

img {
  -webkit-touch-callout: none;
}

Adding touch-callout: none; to all images will ensure that no image dialog appears when images are touched.

For best user experience and accessibility, do not use the above CSS properties in content sites. The above should be reserved for games and other entertainment, productivity and tool applications.

Kill panning

Sometimes you don’t want your users to accidentally pop up an operating system menu. With CSS you are able to disable panning. You don’t want to completely disable panning all the time, but you can use touch-action: none; to prevent accidental panning if accidental panning is likely to occur.

.active #game {
  -ms-touch-action: none; /* disable panning */
}

You might be thinking “why not just use JavaScript’s preventDefault();. You could likely get that to work. However, using the four CSS properties above performs better than preventDefault(). CSS is almost always more performant than JavaScript. And, in this case, there is up to a 400ms lag in firing touch events, so it’s best to prevent the panning, dialoging, etc., before it ever happens.


About The Author

My name is Estelle Weyl. I am a consulting web developer, write for Community MX, speak about web development on occasion, and have a full time job as Senior Web Developer for a small startup. I’ve been coding CSS, XHTML, JavaScript and PHP since 1999, tableless CSS since 2003. If you have any recommendations on topics for me to hit, please let me know via comments.

Comments

One Response to “Pseudo or not-so-pseudo Click Mobile Events”

  1. Rebekah says:

    I came for the Death of a Thousand Cuts article, I’ll be back for articles like this one. Thanks for the tips!