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

Adaptez votre interface utilisateur aux fonctionnalité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 application sur l'appareil sur lequel elle est consultée. Avec les requêtes média, vous pouvez créer des mises en page différentes pour différentes tailles d'écran, orientations et d'autres facteurs.

La update une requête média vous permet d'adapter l'interface utilisateur à la fréquence d'actualisation d'un appareil. La la caractéristique peut signaler une valeur fast, slow ou none qui correspond à les capacités des 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. Ce comprend les ordinateurs de bureau et la plupart des appareils mobiles.

Vous pouvez interroger l'appareil et voir s'il a une fréquence d'actualisation rapide pour l'affichage contenu et style en conséquence tout en envoyant 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 la fréquence d'actualisation. Savoir que l'appareil ne peut pas gérer les animations ou vous réduisez l'utilisation de la batterie ou les mises à jour d'affichage défectueuses.

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

Enfin, certains scénarios tels que les écrans papier imprimés ou e-Ink une seule passe de rendu. Un tel résultat ne peut pas du tout être actualisé et appelé none. Elle peut être interrogée comme suit:

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

Dans le CodePen suivant, une animation de survol progressivement amélioré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