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?

Since that would require detecting if it's touch enabled, try this thread; http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript — MrMarlow, Nov 05 '14 at 16:31
how can :focus be used for that purpose? MrMarlow, I wanted to avoid using jQuery for that. — Pejs, Nov 05 '14 at 16:41
`a:focus + .button-info {}` or `a:focus ~ .button-info {}`, depends on where your button is — Morpheus, Nov 05 '14 at 16:43

score 3 · Answer 1 · answered Nov 05 '14 at 16:38

3

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.

answered Nov 05 '14 at 16:38

Antoine Combes

1,444
8
13

Your answer __maybe__ will be useful in the future, but I don't see a point posting it right now. – Morpheus Nov 05 '14 at 16:45
3

OP's asking if there's a native, non-hacky CSS way to detect touchscreens, and i'm answering. – Antoine Combes Nov 05 '14 at 16:46
Would you accept your own answer if it doesn't solve the problem at the moment? – Morpheus Nov 05 '14 at 16:48
3

I would if i already had a solution but was hoping for a better one. – Antoine Combes Nov 05 '14 at 16:50
3

Actually I think that answer stating that there is no such solution because it is being developed is actually very useful, as it can save time on further googling. – Pejs Nov 05 '14 at 17:20
Works in 2018! Thanks – Cory Kleiser Sep 10 '18 at 18:09

score 1 · Answer 2 · edited May 23 '17 at 12:20

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.

CSS - Show elements on touchscreen devices only

2 Answers2