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

Les requêtes média 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 média vous permettent de créer différentes mises en page pour différentes tailles d'écran, orientations et d'autres facteurs.

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

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 présente une fréquence d'actualisation rapide pour l'affichage du contenu et appliquer un style en conséquence tout en envoyant une seule feuille de style.

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

La fréquence d'actualisation des lecteurs de livres numériques et des appareils tels que les systèmes de paiement à faible consommation peut être lente. Sachant que l'appareil ne peut pas gérer les animations ni les mises à jour fréquentes, vous pouvez économiser l'utilisation de la batterie ou provoquer des mises à jour erronées sur l'affichage.

@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 le CodePen suivant, une animation de pointage progressivement améliorée est affichée à l'aide de cette nouvelle requête média de mise à jour:

Autres ressources

• Requêtes Media CSS niveau 4
• Mettre à jour la requête média sur MDN