update

Baseline 2023

Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die update CSS Medienfunktion kann verwendet werden, um zu prüfen, wie häufig (wenn überhaupt) das Ausgabegerät das Aussehen von Inhalten nach der Wiedergabe ändern kann.

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

Syntax

Die update-Eigenschaft wird als ein einzelner Schlüsselwortwert angegeben, der aus der folgenden Liste ausgewählt wird.

none

Nach der Wiedergabe kann das Layout nicht mehr aktualisiert werden. Beispiel: auf Papier gedruckte Dokumente.

slow

Das Layout kann sich dynamisch gemäß den üblichen CSS-Regeln ändern, aber das Ausgabegerät kann die Änderungen nicht schnell genug rendern oder anzeigen, um sie als flüssige Animation wahrzunehmen. Beispiele: E-Book-Reader oder extrem leistungsschwache Geräte.

fast

Das Layout kann sich dynamisch gemäß den üblichen CSS-Regeln ändern, und das Ausgabegerät ist nicht ungewöhnlich in der Geschwindigkeit eingeschränkt, sodass regelmäßig aktualisierte Dinge wie CSS-Animationen verwendet werden können. Beispiel: Computerbildschirme.

Beispiele

HTML

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

CSS

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

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

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

Ergebnis

Spezifikationen

Specification
Media Queries Level 4
# update

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch