CSS-Update – Medienabfrage

Passen Sie Ihre Benutzeroberfläche an die Aktualisierungsrate des Bildschirms an.

Adam Argyle
Adam Argyle
X GitHub

Mit CSS-Mediaabfragen können Sie das Erscheinungsbild Ihrer Website oder Webanwendung je nach Gerät steuern, auf dem sie angezeigt wird. Mit Medienabfragen können Sie unterschiedliche Layouts für verschiedene Bildschirmgrößen, -ausrichtungen und andere Faktoren erstellen.

Mit der Medienabfrage update können Sie die UI an die Aktualisierungsrate eines Geräts anpassen. Das Feature kann den Wert fast, slow oder none melden, der sich auf die Funktionen verschiedener Geräte bezieht.

Unterstützte Browser

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102
  • Safari: 17.

Quelle

Geräte und Aktualisierungsrate

Die meisten Geräte, für die Sie Designs entwickeln, haben wahrscheinlich eine schnelle Aktualisierungsrate. 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 Rendern von Inhalten hat, und den Stil entsprechend 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 Zahlungssystemen mit geringer Stromversorgung kann die Aktualisierungsrate langsam sein. Wenn Sie wissen, dass das Gerät keine Animationen oder häufigen Updates verarbeiten kann, können Sie die Akkunutzung oder fehlerhafte Ansichtsaktualisierungen reduzieren.

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

Außerdem gibt es Szenarien wie Printpapier oder E-Ink-Displays, die möglicherweise nur einen einzigen Rendering-Pass anbieten. Eine solche Ausgabe kann nicht aktualisiert werden und wird als none bezeichnet. Dies kann wie folgt abgefragt werden:

@media (update: none) {
  /* one time render like printed paper */
}

Im folgenden CodePen sehen Sie mit dieser neuen Medienabfrage eine schrittweise verbesserte Hover-Animation:

Weitere Ressourcen