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

в 12:12, , рубрики: css, css4, hover, media queries, веб-дизайн, Мобильный веб, метки: , ,

В CSS4 media queries улучшится поддержка устройств с тачскриномВчера был опубликован черновик стандарта 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


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js