Story 3 - The usage of CSS for detection of touch screen devices

Bojan Jankovic Bojan Janković

— more than 15 million pixels spent

CSS is a technology which is progressing day by day, but it still needs many more improvements. One of those improvements, which could make developers happy, is CSS Media Queries Level 4, that brings us 2 new features: hover and pointer.

Hover feature:

Hover is in charge for testing users abilities to ,,hover'' over elements on page, with primary pointing device.

Based on W3C Standards, hover feature can have 2 different values:

-If primary pointing device can hover over elements with ease, we use hover:

@media (hover:hover) {
/* code */
}

- If primary pointing device can't hover over elements with ease
(for example: on touch screen devices there is a need for a longer pressure on element to hover, which is not considered ,,using with ease''), we use none:

@media (hover:none) {
/* code */
}

Pointer feature

Pointer feature is used for examination of presence and precision of pointing devices, like for example, a mouse. W3C standard allows 3 different values for this feature:

-If a pointing device, with limitied precision, is used as primary pointing device, than we use coarse:

@media (pointer: coarse) {
/* code */
}

-If a precise pointing device is used as primary pointing device, we use fine:

@media (pointer: fine) {
/* code */
}

-If there is no pointing device, we use none:

@media (pointer: none) {
/* code */
}

Targeting specific devices:

The usage of different combinations of this features and their values, allows us to target specific devices:

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
/* code */
}

/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
/* code */
}

/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
/* code */
}

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
/* code */
}

The conclusion:

These are very useful CSS features, which currently have one big problem, that actually makes them inconvinient for wider usage.
The problem is, of course, like with all new CSS technologies, browser support. While writting this article, that support is pretty small, and that's why these features are still not recommended for usage.