Обновление

Базовая версия 2023

Новое доступно

С сентября 2023 года эта функция работает на последних устройствах и версиях браузеров. Возможно, эта функция не будет работать на более старых устройствах или браузерах.

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

@media (update: < none | slow | fast >) {
  /* styles to apply if the update frequency of the output device is a match */
}

Синтаксис

Функция update задается как одно ключевое слово из списка ниже.

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;
  }
}

Результат

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

Спецификация
Уровни запросов к среде 4 # обновление

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`update`	113	113	102	99	17	113	102	76	17	23.0	113

См. также

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