Requête média de la mise à jour CSS

Adaptez votre UI aux capacités de fréquence d'actualisation de l'écran.

Adam Argyle
Adam Argyle
X GitHub

Les requêtes multimédias CSS sont un outil puissant qui vous permet de contrôler l'apparence de votre site Web ou de votre application Web en fonction de l'appareil sur lequel il est consulté. Les requêtes multimédias vous permettent de créer différentes mises en page pour différentes tailles d'écran, orientations et autres facteurs.

La requête multimédia update vous permet d'adapter l'interface utilisateur à la fréquence d'actualisation d'un appareil. La fonctionnalité peut renvoyer une valeur de fast, slow ou none, qui correspond aux fonctionnalités de différents appareils.

Navigateurs pris en charge

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

Source

Appareils et fréquence d'actualisation

La plupart des appareils pour lesquels vous concevez des applications ont probablement une fréquence d'actualisation élevée. Cela inclut les ordinateurs de bureau et la plupart des appareils mobiles.

Vous pouvez interroger l'appareil, vérifier s'il dispose d'une fréquence d'actualisation rapide pour le rendu du contenu et appliquer un style en conséquence tout en fournissant une seule feuille de style.

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

Les liseuses et les appareils tels que les systèmes de paiement à faible consommation d'énergie peuvent avoir un taux de rafraîchissement lent. Sachant que l'appareil ne peut pas gérer l'animation ni les mises à jour fréquentes, vous pouvez économiser de la batterie ou des mises à jour de vue défectueuses.

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

Enfin, il existe des scénarios, comme le papier imprimé ou les écrans e-ink, qui ne peuvent proposer qu'une seule passe de rendu. Une sortie de ce type ne peut pas être actualisée du tout et est appelée none. Vous pouvez l'interroger comme suit:

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

Dans l'exemple CodePen suivant, découvrez une animation de survol progressivement améliorée à l'aide de cette nouvelle requête multimédia de mise à jour:

Autres ressources