Passe deine Benutzeroberfläche an die Aktualisierungsrate des Bildschirms an.
CSS-Medienabfragen sind ein leistungsstarkes Tool, mit dem Sie die Darstellung Ihrer Website oder Web-App je nach Gerät steuern können, auf dem sie angezeigt wird. Mit Medienabfragen können Sie verschiedene Layouts für unterschiedliche Bildschirmgrößen, Ausrichtungen und andere Faktoren erstellen.
Mit der Medienabfrage update können Sie die UI an die Aktualisierungsrate eines Geräts anpassen. Die Funktion kann den Wert fast, slow oder none melden, der sich auf die Funktionen verschiedener Geräte bezieht.
Geräte und Aktualisierungsrate
Die meisten Geräte, für die Sie Designs entwickeln, weisen wahrscheinlich eine hohe Aktualisierungsrate auf. Dazu gehören Computer und die meisten Mobilgeräte.
Sie können das Gerät abfragen, um zu prüfen, ob es eine schnelle Aktualisierungsrate für das Rendering von Inhalten hat, und den Stil entsprechend zu gestalten, während Sie weiterhin ein einzelnes Stylesheet bereitstellen.
@media (update: fast) {
/* computer screens, totally cool to animate */
}
Bei E-Readern und Geräten wie z. B. leistungsschwächeren Zahlungssystemen kann die Aktualisierungsrate langsam sein. Wenn du weißt, dass das Gerät Animationen oder häufige Updates nicht verarbeiten kann, kannst du den Akkuverbrauch reduzieren oder fehlerhafte Updates anzeigen.
@media (update: slow) {
/* e-book readers or severely underpowered devices */
}
Schließlich gibt es Szenarien wie Printpapier oder E-Ink-Displays, bei denen möglicherweise nur ein einziger Rendering-Pass angeboten wird. Eine solche Ausgabe kann nicht aktualisiert werden und wird als none bezeichnet. Sie kann so abgefragt werden:
@media (update: none) {
/* one time render like printed paper */
}
Im folgenden CodePen sehen Sie eine schrittweise verbesserte Hover-Animation mit dieser neuen Update-Medienabfrage: