Адаптируйте свой пользовательский интерфейс к возможностям частоты обновления экрана.
Медиа-запросы CSS — это мощный инструмент, который позволяет вам контролировать внешний вид вашего веб-сайта или веб-приложения в зависимости от устройства, на котором они просматриваются. С помощью медиа-запросов вы можете создавать разные макеты для разных размеров экрана, ориентации и других факторов.
Медиа-запрос update дает вам возможность адаптировать пользовательский интерфейс к частоте обновления устройства. Функция может сообщать значения fast , slow или none , которые относятся к возможностям различных устройств.
Устройства и частота обновления
Большинство устройств, для которых вы разрабатываете дизайн, скорее всего, будут иметь высокую частоту обновления. Сюда входят настольные компьютеры и большинство мобильных устройств.
Вы можете запросить устройство, посмотреть, имеет ли оно высокую частоту обновления для рендеринга контента, и соответствующим образом стилизовать его, сохраняя при этом единую таблицу стилей.
@media (update: fast) {
/* computer screens, totally cool to animate */
}
Электронные книги и такие устройства, как платежные системы с низким энергопотреблением, могут иметь низкую частоту обновления. Знание того, что устройство не поддерживает анимацию или частые обновления, означает, что вы можете сэкономить заряд батареи или избежать ошибочных обновлений.
@media (update: slow) {
/* e-book readers or severely underpowered devices */
}
Наконец, существуют такие сценарии, как печатная бумага или дисплеи с электронными чернилами, которые могут предлагать только один проход рендеринга. Подобный вывод вообще не может обновляться и называется none . Его можно запросить следующим образом:
@media (update: none) {
/* one time render like printed paper */
}
В следующем CodePen вы увидите прогрессивно улучшенную анимацию при наведении с использованием этого нового медиа-запроса обновления: