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.
Das update CSS Medien-Feature kann verwendet werden, um zu testen, wie häufig (wenn überhaupt) das Ausgabegerät in der Lage ist, das Aussehen von Inhalten nach dem Rendern zu ändern.
Syntax
none-
Sobald es gerendert wurde, kann das Layout nicht mehr aktualisiert werden. Beispiel: Dokumente, die auf Papier gedruckt werden.
slow-
Das Layout kann sich dynamisch gemäß den üblichen Regeln von CSS ä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 stark leistungseingeschränkte Geräte.
fast-
Das Layout kann sich dynamisch gemäß den üblichen Regeln von CSS ä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
<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
| Specification |
|---|
| Media Queries Level 4 # update |
Browser-Kompatibilität
Loading…