Adaptez votre interface utilisateur aux capacités de fréquence d'actualisation de l'écran.
Les requêtes média CSS sont un outil puissant qui vous permet de contrôler l'apparence de votre site Web ou application Web en fonction de l'appareil sur lequel elle s'affiche. Les requêtes média vous permettent de créer différentes mises en page en fonction de la taille d'écran, de l'orientation et d'autres facteurs.
La requête média update vous permet d'adapter l'UI à la fréquence d'actualisation d'un appareil. Cette fonctionnalité peut signaler une valeur fast, slow ou none qui est liée aux fonctionnalités de différents appareils.
Appareils et fréquence d'actualisation
La plupart des appareils pour lesquels vous concevez sont susceptibles d'avoir une fréquence d'actualisation rapide. 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 styliser en conséquence tout en continuant à fournir une seule feuille de style.
@media (update: fast) {
/* computer screens, totally cool to animate */
}
Les lecteurs de livres numériques et les appareils tels que les systèmes de paiement à faible consommation d'énergie peuvent présenter une fréquence d'actualisation 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 les mises à jour de vue erronées.
@media (update: slow) {
/* e-book readers or severely underpowered devices */
}
Enfin, certains scénarios, comme le papier imprimé ou les écrans à encre électronique, peuvent ne proposer qu'une seule passe de rendu. Ce type de résultat ne peut pas être actualisé et est appelé none. Elle peut être interrogée comme ceci:
@media (update: none) {
/* one time render like printed paper */
}
Dans le CodePen suivant, observez une animation de survol progressivement améliorée à l'aide de cette nouvelle requête média de mise à jour: