Pull to refresh

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

Reading time2 min
Views6.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

Tags:
Hubs:
+7
Comments14

Articles

Change theme settings