Support for touchscreen devices will be improved in CSS4 media queries

A draft of the Media Queries level 4 standard was published yesterday. The main innovations of the future standard - the pointer and hover properties - are aimed at improving support for finger-operated devices.

The hover property is 1 if the device has a pointer that you can hover over the element without clicking, and 0 if not. The behavior of a website that is familiar to desktop computers, when a drop-down menu or tooltip appears over a mouse pointer item, creates many problems for tablet and smartphone users. The hover property will allow you not to abandon it completely, but continue to use it where possible. Example:

@media (hover) {
.menu > li { display : inline- block ; }
.menu ul { display : none ; position : absolute ; }
.menu li : hover ul { display : block ; list-style : none ; padding : 0 ; }
}

The pointer property can be coarse - for touchscreens controlled by fingers, fine for mouse or stylus, and none . Example:

@media (pointer: coarse) {
input [ type = "checkbox" ] , input [ type = "radio" ] {
min-width : 30px ;
min-height : 40px ;
background : transparent ;
}
}

In addition to pointer and hover , another property appeared - script . It takes the value 1 if the device supports JavaScript and 0 if not, or JavaScript is currently disabled.
')
Code Highlight - highlight.hohli.com