Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webkit equivalent of :-moz-system-metric(touch-enabled)

:-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

like image 316
edeverett Avatar asked Jul 30 '10 15:07

edeverett


3 Answers

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.)

like image 194
Ian Wessman Avatar answered Sep 19 '22 07:09

Ian Wessman


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.

like image 32
Samuli Pahaoja Avatar answered Sep 20 '22 07:09

Samuli Pahaoja


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

like image 37
easwee Avatar answered Sep 20 '22 07:09

easwee