CSS Solution For Styling Touch and Non Touch Devices

CSS Solution For Styling Touch and Non Touch Devices

An Informative Guide to Differentiate Touch & Non-Touch Devices For Styling

Hello Front-End developers, when developing responsive web applications, often we end up with requirement to style the application to target different devices. The devices include desktop, laptop, mobile devices, tablets, etc. With pure CSS without using external libraries, we have the media queries to solve this requirement with various options like width, height, orientation, resolution.

In cases, we might have requirements for style, handle and differentiate the behavior or user events between touch and non-touch devices, irrespective of the resolution of the devices.

Example case, a non-touch device should not invoke event handlers written for long press or tap events. Similarly, a touch device should not apply styles to elements targeted for hover.

This guide will aim to provide the best approach to target the touch and non-touch devices with help of media queries, that is the most suitable working solution for most devices.

The best practice to differentiate touch and non–touch devices are based on the following media-query features,

  • hover
  • pointer

The hover Feature (keyword: hover)

The hover media feature, denotes the ability of the system to use its devices to hover the elements of the application.

A touch screen device, where the primary pointer system is the finger and can't hover, will take the value of none.

@media (hover: none)  {
    // styles to target touch devices
}

A non-touch device where the primary input is a mouse and can easily hover parts of the page takes the value of hover.

@media (hover: hover) {
  // styles to target non-touch devices
}

The pointer Feature (keyword: pointer)

The pointer media feature denotes the accuracy of the pointing device used by the system for the accessing the application.

In Touch devices, A finger or a Kinect peripheral isn't available and takes the value of coarse

@media (pointer: coarse)  {
    // styles to target touch devices
}

In Non-Touch devices, A mouse or a drawing stylus is very accurate and defines the value of fine

@media (pointer: fine) {
  // styles to target non-touch devices
}

This article explains in depth about hover and pointer features in depth.

Problem

Individually the hover and pointer media features when used can identify specific devices, but may not work for all the devices. Hence these features when combined, gives a power to target the specific set of devices. The problem here is to identify the perfect combination that would target all the touch and non-touch devices respectively.

Solution

  • CSS to target touch devices only can be written using media query
@media (hover: none), (pointer: coarse)  {
  // styles to target touch devices
}
  • CSS to target non-touch devices can be written using media query
@media not all and (pointer: coarse) {
  // styles to target touch devices
}

Note: At many cases, we will be overriding the css written for non-touch devices to target the touch devices hence the css query written above for non-touch devices may not be required always.

The Question: Why not (hover: hover), (pointer: fine) for non-touch devices?

  • At many instances, the CSS for ‘hover’ event in non-touch devices are written inside hover media feature. But hover media feature is also recognized in few touch devices (iOS, One+ etc).
  • At occasions, when timing differs for events in touch devices like tap or long-press, it recognizes the CSS written inside (pointer: fine) which are intended for non-touch devices.
  • This creates ambiguity between touch and non-touch devices.

Browser and Device Support:

responsivestyles.png

From the above information, pointer: coarse feature is not recognized across non-touch device, hence writing a media query with a reverse ‘not’ of, pointer: coarse would achieve our intention of targeting CSS only for non-touch/desktop devices i.e.

@media not all and (pointer: coarse) {}

Bonus - The JavaScript approach:

There might also be requirements to differentiate the logic of event handlers or methods from JavaScript between touch and non-touch devices. In such cases, we can use the window.matchMedia(mediaQueryString) method that can used to determine if the document matches the media query list to return boolean result as shown below,

window.matchMedia("(hover: none),(pointer: coarse)").matches;