Как стать автором
Обновить

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

Время на прочтение2 мин
Количество просмотров6.5K
Вчера был опубликован черновик стандарта 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 в данный момент отключён.

Подсветка кода — highlight.hohli.com

Теги:
Хабы:
+7
Комментарии14

Публикации

Истории

Работа

Swift разработчик
30 вакансий
iOS разработчик
22 вакансии

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн