CSS - Show elements on touchscreen devices only

Question

I've got layout in which 80% of buttons are icons with tooltip describing the function appearing on :hover

Is it possible using CSS and Media Queries only to show additional class (for example .button-info) if website is viewed on touchscreen device. Other than guessing by the resolution and orientation what sort of device user might be using?

Answer 1

What you are requesting is being developped by the W3C for CSS4: http://dev.w3.org/csswg/mediaqueries-4/#pointer

You'd use :

@media (pointer: coarse) and (hover: none) {
    /* your touchscreen specific rules */
}

But it is NOT available right now, so you'll have to use a workaround, with device widths and orientations.

NB: That is if you want to use a CSS only solution.

Answer 2

Similar to this question (Media query to detect if device is touchscreen)

This guy has some good points that you should consider.

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

He talks about the various ways of achieving what your trying to do, then explains what the pitfalls are. Ultimately concluding that if your trying to detect if it's a touch screen then your probably going about it the wrong way anyway.

Consider treating all users as touch screen users because not everyone looks around the screen with the mouse cursor.