CSS-Update – Medienabfrage

Passen Sie die Benutzeroberfläche an die Aktualisierungsrate des Displays an.

Adam Argyle

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 Mediaabfrage update können Sie die Benutzeroberfläche an die Bildwiederholrate eines Geräts anpassen. Die Funktion kann den Wert fast, slow oder none zurückgeben, 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 entwerfen, haben wahrscheinlich eine hohe Bildwiederholrate. Dazu gehören Computer und die meisten Mobilgeräte.

Sie können das Gerät abfragen, um festzustellen, ob es eine schnelle Aktualisierungsrate für das Rendern von Inhalten hat, und entsprechend stylen, während Sie weiterhin ein einzelnes Stylesheet ausliefern.

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

E-Reader und Geräte wie kostengünstige Zahlungssysteme haben möglicherweise eine niedrige Bildwiederholrate. 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 */
}

Schließlich gibt es Szenarien wie bedrucktes Papier oder E-Ink-Displays, die möglicherweise nur einen einzigen Rendering-Pass bieten. Eine solche Ausgabe kann nicht aktualisiert werden und wird als none bezeichnet. Sie können so abgefragt werden:

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

Im folgenden CodePen-Beispiel sehen Sie eine fortlaufend verbesserte Hover-Animation mit dieser neuen Update-Mediaabfrage:

Weitere Ressourcen