Hover effect on touch devices with Modernizr

Here is the tip about how to check if a browser has touch capabilities and do something about it.

In our web application we have certain html divs that are hidden unless the mouse is over it (on:hover).

This is our initial css

.actions {
display:none;
}

.actions:hover {
display:inline-block;
}

In touch devices, the behaviour of the hover is that the first touch will act as a hover, and then the user can take the action. This is not very useable, so we have decided that in touch devices everything has to be shown. Yeah it looks worse but it is more useable.

So we looked for a solution and found Modernizr, and good guides on how to configure it such as this one: http://html5doctor.com/using-modernizr-to-detect-html5-features-and-provide-fallbacks/

When the device accepts touch events, Modernizr will add a class .touch to the html. So then you can make use of it. We added this css code:

.touch .actions {
display: block;
}

By the way, if you would like to make a quick test to see if Modernizr is detecting the touch/no-touch feature, try out this code:

if (Modernizr.touch) {
alert('Touch Screen');
} else {
alert('No Touch Screen');
}

Another tip: I compiled a modernizr.js with just the feature detection that we need. this is:

Misc. > touch events

But, very important, do also add this other feature so that the class addition will work:

Extra > CSS Classes

This is the download page for Modernizr: http://modernizr.com/download/#-touch-cssclasses-teststyles-prefixes

And if you want to test the page features for touch devices from your Mac you can use the iOS simulator. Just follow this guide, you will have to install xCode: https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/GettingStartedwithiOSStimulator/GettingStartedwithiOSStimulator.html

*** UPDATE ***
As Patrick adds on the comment below, you have to be aware that Modernizr does not detect if the device is touch enabled, but rather if the browser has touch capabilities. Nowadays some browsers report touch capabilities even if the underlying hardware cannot actually make use of them.

Advertisements

2 thoughts on “Hover effect on touch devices with Modernizr

  1. Hey there!
    This isn’t entirely correct. `Modernizr.touch` actually checks for touch _events_, not touch screens. For example, if you open up your chrome devtools and set it to simulate a touch screen, the test will pass, even on an 15 year old XP machine with a crt! A more realistic issue you may hit is some of the new windows laptops and tablets have touchscreens as well as keyboard/touchpads. Keying off this information can lead to a lot of usability issues if not done 100% correctly.

    @stucox, one of the other maintainers of Modernizr blogged about this issue last year (http://www.stucox.com/blog/you-cant-detect-a-touchscreen/), and there was a larger discussion on the github issue tracker (https://github.com/Modernizr/Modernizr/issues/548)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s