Menu
:-moz-system-metric(touch-enabled) looks like a really useful CSS selector for working on mobile sites.
Unfortunately Webkit is dominant on mobile touch devices so does anyone know if there is a Webkit equivalent?
(Ideally it'd be good if this was managed by CSS3 media queries)
Edit: Looks like it is supported in Gecko as a media query
316
There's no way to accomplish this without resorting to Javascript, at present.
As @easwee said, Modernizr is a well-regarded JS library that focuses on feature detection. You can use its touch test for your use case.
If you don't need all of Modernizr's bells and whistles, you can do the following:
A) Load the following JS as early in your <body> tag as you can:
<script type="text/javascript">
if( !!window.TouchEvent ) body.className += " touch-enabled ";
</script>
B) Write your CSS. Since Gecko uses a media query to inform you of touch availability, you'll have to dupe the touch-specific CSS, like so:
BODY.touch-enabled DIV.foo
{
/* touch-specific CSS */
}
@media screen and (-moz-touch-enabled)
{
DIV.foo
{
/* touch-specific CSS */
}
}
If the per-selector code is identical in both circumstances, GZIP ought to optimize away some of the duplication. (You are using compression, I hope.)
194
In Ian Wessman's answer the test !!window.TouchEvent works incorrectly. In current desktop Chrome (23.0.1271.52, Linux) window.TouchEvent is a function, so Ian's code considers the browser touch-enabled.
If you want short code, it's probably best to copy-paste the relevant code from Modernizr.
32
Chrome is another browser that tried to implement a similar selector but unfortunately it was removed out for now.
Modernizr could be and interesting detection tool since it can detect touch events too.
http://www.modernizr.com/docs/#touch
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
