Conditional CSS for touch screen devices?

[gwenzez]

I’m new-ish to all this so please forgive me if I am not describing this well…
I have “mailto:” links in my site, that have both a regular, and a hover image. All works well on the desktop, but when it gets to an ipad or smart phone, it gets funky.
One touch highlights, two touches zoom in, etc…
Is there a way to write conditional CSS code that recognizes when there is a touch screen, and get rid of the hover state image, so the user can just touch once and launch the mail program?
Or maybe so other work around?
Thanks!

[gwenzez]

I don’t know much javascript yet, so was hoping to do it with media queries, but not sure how to target touch specific devices…
Or maybe I just have to go by max-width and hope for the best?

[Senff]

Media queries can only detect screen/device size and pixel density, as far as I know. Not whether or not a screen is touch-based. Modernizr used to be able to detect touch screens and add classes based on that, but not anymore.

Apparently, there’s a good reason for not doing this anymore. This article addresses that: http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

The key paragraph is this one:

Touchscreens (currently) can’t convey hover states, so it’d be nice to adjust our UI for touchscreens so that they can still get around. Of course a keyboard can’t hover either. It’s probably just best to avoid relying on hover states in the first place – use them for embellishments.

I tend to agree, really.

However I hate to say “you’re doing it wrong and you need to find another way“, so I guess I’ll just have to point you to the same article, there are some Javascript solutions in there. Not sure if they work though!

Or maybe I just have to go by max-width and hope for the best?

Well…. what’s your max-width then? There are touch screen devices that are 1280 pixels wide, so it’s far from safe. If you’re in the “hope for the best” field and you’re not aiming for a perfect solution, then maybe you should indeed get rid of the hover state altogether?

[Alan C]

You can’t really use hover effects on mobile. They just don’t work.

However if you really need touch specific styles you can use this jQuery snippet to apply them
function isTouchDevice() {return !!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator);};

[pears22]

“Touchscreens (currently) can’t convey hover states, so it’d be nice to adjust our UI for touchscreens so that they can still get around. Of course a keyboard can’t hover either. It’s probably just best to avoid relying on hover states in the first place – use them for embellishments.”

I couldn’t disagree more.

The desired user experience should dictate the technology, not the other way around.

Touch, mouse, keyboard, voice, holograms, whatever the interface may be, if you design your app to work with only the common denominator between the interfaces in mind, some great things would have to be sacrificed. It’s a fine way to start, but it shouldn’t end there.

As a user, there are some details that I don’t care to see until my attention is turned towards them. Relying on :hover is perfect for keeping these from cluttering the page until they actually matter.

[xguntis]

Alan, what does 'msmaxtouchpoints' in window.navigator in your function?

[Alan C]

xguntis, that is a prefixed property that lets the browser know how many touch points are supported on the device. So if it is more than 0 then it is a touch device and far more likely to be a mobile device. However as of IE11 you no longer need to prefix, so its just maxTouchPoints

[xguntis]

does that mean that ‘ontouchstart’ does not work on IE?

[clayRay]

According to this article…
https://css-tricks.com/touch-devices-not-judged-size/
… we can now use the @media (hover: ... attribute.
Unfortunately it’s still not supported on all browsers (but luckily most)…
https://caniuse.com/#feat=css-media-interaction
But the last answer to this question…
https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover
… offers a very simple solution that allows for hover styling and non-hover-fallback styling.
With this bit of JS…
const canHover = !(matchMedia('(hover: none)').matches);
if(canHover) {
document.body.classList.add('can-hover');
}

And then this bit of CSS…

.myElement {
background: blue;
}
.can-hover .myElement:hover {
background: red;
}


[Author]

Posts