Медиафункция CSS `update`

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна в браузерах с сентября 2023 года.

update CSS медиафункцию можно использовать, чтобы проверить, как часто (если вообще) устройство вывода может изменять внешний вид содержимого после его отображения.

Синтаксис

none: После отображения макет больше не может обновляться. Пример: документы, напечатанные на бумаге.
slow: Макет может динамически изменяться в соответствии с обычными правилами CSS, но устройство вывода не может достаточно быстро отображать изменения, чтобы они воспринимались как плавная анимация. Примеры: электронные книги или устройства с очень низкой производительностью.
fast: Макет может динамически изменяться в соответствии с обычными правилами CSS, а скорость работы устройства вывода не имеет необычных ограничений, поэтому можно использовать регулярно обновляемые элементы, такие как анимации CSS. Пример: экраны компьютеров.

Примеры

HTML

<p>
  If this text animates for you, your browser supports `update` and you are
  using a fast-updating device.
</p>

CSS

@keyframes jiggle {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(25px);
  }
}

@media (update: fast) {
  p {
    animation: 1s jiggle linear alternate infinite;
  }
}

Результат

Спецификации

Спецификация
Media Queries Level 4 # update

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`update`	113	113	102	99	17	113	102	76	17	23.0	113	17

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/update