Au-delà des points d'arrêt : exploiter les requêtes multimédias des préférences utilisateur en CSS

Si vous créez des sites Web ou des applications, il est probable que vous travailliez avec des requêtes multimédias. Ces outils CSS pratiques vous permettent d'ajuster votre mise en page en fonction de la taille de l'appareil. Ils sont un élément clé du design réactif.

Vous pouvez effectuer une requête en fonction de la largeur de l'appareil, de son rapport hauteur/largeur, de son orientation, etc. Tout cela vous permet d'affiner votre mise en page pour l'appareil utilisé.

Vous ne savez peut-être pas qu'il existe d'autres requêtes multimédias disponibles qui vous permettent de personnaliser votre site ou votre application en fonction des préférences de l'utilisateur plutôt que de la taille et de l'orientation de son appareil.

Requêtes multimédias de préférence de l'utilisateur

Il existe plusieurs requêtes multimédias qui traitent des préférences des utilisateurs. Vous pouvez les utiliser pour affiner l'expérience de votre application pour l'utilisateur.

Mode sombre automatique avec schéma de couleurs préféré

Le mode sombre est partout ces jours-ci. Il semble que chaque site dispose désormais du bouton bascule soleil/lune pour basculer entre le mode clair et le mode sombre. Vous pouvez aller plus loin et utiliser la requête multimédia préfère-couleur-schéma pour déterminer automatiquement si l'appareil de l'utilisateur utilise un mode de couleur claire ou foncée.

Voici comment cela fonctionne : définissez vos styles CSS pour le mode clair comme vous le feriez normalement. Ajoutez ensuite la requête multimédia préfère-color-scheme: dark. Là-dedans, ajoutez des règles CSS remplaçant les couleurs de votre mode d'éclairage :

.content {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .content {
    background-color: black;
    color: white;
  }
}

Astuce : créez des thèmes avec des variables CSS

Pour vous faciliter un peu la vie, vous pouvez définir toutes vos couleurs dans un thème, un ensemble de variables CSS. Ensuite, dans votre bloc prefers-color-scheme: dark, il vous suffit de redéfinir les variables au lieu de ré-ajouter vos sélecteurs et règles CSS :

--main-background: white;
--text-color: black;

.content {
  background-color: var(--main-background);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  --main-background: black;
  --text-color: white;
}

Atténuez les animations avec des mouvements préférentiels réduits

Les animations peuvent améliorer l'expérience de votre application, mais elles peuvent être difficiles pour les utilisateurs ayant des problèmes de vision ou vestibulaires. Pour aider ces utilisateurs, certains appareils et systèmes d'exploitation disposent d'une option dans les préférences utilisateur permettant de réduire les mouvements.

Vous pouvez utiliser la requête multimédia préfère-réduire le mouvement pour détecter quand une telle option est activée pour l'appareil de l'utilisateur. Vous pouvez ensuite utiliser des animations alternatives moins intenses (ou les désactiver complètement).

Voici un exemple d'utilisation du mouvement préféré-réduit pour désactiver une animation.

.content {
  animation: my-awesome-animation 250ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .content {
    animation: none;
  }
}

Une chose à noter : si vous désactivez des animations comme celle-ci, assurez-vous que vous n'avez pas de code qui repose sur un événement animationend. Lorsque vous définissez l'animation sur aucune, comme indiqué ci-dessus, cet événement ne sera jamais déclenché.

Gardez à l'esprit que vous n'êtes pas obligé de désactiver les animations lorsque vous préférez un mouvement réduit : réduisez les correspondances ! Supposons que vous ayez une animation de révélation sophistiquée dans laquelle l'élément rebondit. Lorsque l'utilisateur souhaite réduire le mouvement, vous pouvez modifier cela pour qu'il s'agisse d'une simple animation en fondu.

Contraste adaptatif avec contraste préféré

Certains utilisateurs ayant des difficultés de vision peuvent avoir activé le contraste accru sur leur appareil. Vous pouvez gérer de telles situations avec la requête multimédia préfère-contraste.

Si cette requête multimédia correspond, vous pouvez ajuster votre contraste pour rendre les choses plus faciles à voir pour ces utilisateurs.

.content {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .content {
    background-color: black;
    color: white;
  }
}

Vérification des requêtes multimédias avec JavaScript

Supposons que vous animez avec JavaScript. Par exemple, vous utilisez peut-être l'API Web Animations. Étant donné que ces animations ne sont pas définies dans le CSS, vous ne pouvez pas les désactiver avec la requête multimédia préfère-réduire le mouvement.

Ou pouvez-vous ?

Oui ! Vous pouvez utiliser la méthode window.matchMedia pour évaluer une requête multimédia à partir de JavaScript. La requête multimédia est passée en argument et la méthode renvoie quelque chose appelé MediaQueryList.

Cet objet a une propriété matches, qui est un booléen indiquant si cette requête multimédia correspond actuellement ou non. En fonction de la valeur, vous pouvez décider d'animer ou non.

Voici un exemple simple montrant comment window.matchMedia peut être utilisé pour appeler conditionnellement une animation sur un élément DOM :

--main-background: white;
--text-color: black;

.content {
  background-color: var(--main-background);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  --main-background: black;
  --text-color: white;
}

Réagir aux changements

Une MediaQueryList a même un événement de changement qui se déclenche si les conditions changent et que la requête multimédia ne s'applique plus.

Supposons que vous ayez du code JavaScript que vous souhaitez exécuter uniquement pour les grands écrans. Si la taille de l'écran de l'utilisateur est petite, vous souhaitez ignorer ce code. Vous pouvez le faire en appelant window.matchMedia en utilisant une requête de largeur maximale ou quelque chose de similaire.

Supposons que plus tard, l'utilisateur redimensionne la fenêtre et que vous souhaitiez maintenant exécuter le code JavaScript spécifique au grand écran. Écoutez simplement l'événement change de MediaQueryList et vous pourrez vérifier la propriété matches de l'événement pour voir quelle est la nouvelle valeur.

Résumé

Ces requêtes multimédias peuvent vous aider à mieux personnaliser l'expérience de votre utilisateur au sein de votre site Web ou de votre application. Vous pouvez appliquer automatiquement une palette de couleurs sombres et même affiner vos animations et votre contraste en fonction des préférences de l'utilisateur. Ils contribuent également à l’accessibilité, ce qui est toujours une victoire.

C'est encore au stade expérimental, mais vous pouvez également garder un œil sur la requête de données préférentielles réduites qui indiquera si l'appareil de l'utilisateur a une exigence qui utilise moins de données. Cela peut être utilisé pour fournir un contenu alternatif utilisant moins de données. Par exemple, vous pouvez ignorer les images non essentielles (ou utiliser des versions à résolution inférieure).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!