В CSS4 media queries улучшится поддержка устройств с тачскрином

Вчера был опубликован черновик стандарта ^[1] Media Queries level 4. Главные нововведения будущего стандарта — свойства pointer и hover — направлены на улучшение поддержки устройств, управляемых пальцами.

Свойство hover равно 1, если у устройства есть указатель, который можно навести на элемент без нажатия, и 0, если нет. Привычное для десктопных компьютеров поведение веб-сайта, когда при зависании над элементом указателя мыши появляется выпадающее меню или подсказка, создаёт много проблем пользователям планшетов и смартфонов. Свойство hover позволит не отказываться от него полностью, а продолжать использовать там, где возможно. Пример:

/* Использовать меню, выпадающее при зависании указателя, только на устройствах с мышью. */
@media (hover) {
.menu > li {display:inline-block;}
.menu ul {display:none; position:absolute;}
.menu li:hover ul {display:block; list-style:none; padding:0;}
}

Свойство pointer может принимать значения coarse — для тачскринов, управляемых пальцами, fine для мыши или стилуса и none. Пример:

/* Сделать радиокнопки и чекбоксы больше на устройствах с тачскрином. */
@media (pointer:coarse) {
input[type="checkbox"], input[type="radio"] {
min-width:30px;
min-height:40px;
background:transparent;
}
}

Кроме pointer и hover появилось ещё одно свойство — script. Оно принимает значение 1, если устройство поддерживает JavaScript и 0, если нет или JavaScript в данный момент отключён.

Автор: ilya42