update CSS-Media-Feature
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2023 browserübergreifend verfügbar.
Die update CSS Media-Feature kann verwendet werden, um zu testen, wie oft (wenn überhaupt) das Ausgabegerät in der Lage ist, das Erscheinungsbild von Inhalten nach dem Rendern zu ändern.
Syntax
none-
Sobald es gerendert wurde, kann das Layout nicht mehr aktualisiert werden. Beispiel: auf Papier gedruckte Dokumente.
slow-
Das Layout kann sich gemäß den üblichen Regeln von CSS dynamisch ändern, aber das Ausgabegerät ist nicht in der Lage, Änderungen schnell genug zu rendern oder anzuzeigen, um als flüssige Animation wahrgenommen zu werden. Beispiele: E-Book-Reader oder extrem leistungsschwache Geräte.
fast-
Das Layout kann sich gemäß den üblichen Regeln von CSS dynamisch ändern, und das Ausgabegerät ist in der Geschwindigkeit nicht ungewöhnlich eingeschränkt, sodass regelmäßig aktualisierende Dinge wie CSS-Animationen verwendet werden können. Beispiel: Computermonitore.
Beispiele
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;
}
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Media Queries Level 4 # update |