Adaptation aux préférences de mouvement et de thème de l'utilisateur avec CSS et JavaScript

Écrit par Oscar Jite-Orimiono✏️

Internet regorge de couleurs, d'animations et d'effets graphiques qui peuvent rendre les sites Web à la fois captivants et surstimulants. En tant que passionnés et professionnels du frontend, nous devons équilibrer des visuels éclatants avec des options accessibles et centrées sur l'utilisateur pour ceux qui préfèrent une expérience plus sobre.

Dans cet article, nous allons faire plus avec moins en jetant un œil aux éléments ci-dessous :

• Apprenez à utiliser les requêtes multimédias telles que préfère le mouvement réduit et préfère le schéma de couleurs pour gérer les animations et les thèmes
• Suivez la syntaxe correcte dans les règles @media pour appliquer les préférences utilisateur
• Affichez des options telles que les préférences-réductions-données qui minimiseront l'utilisation des données pour les utilisateurs ayant une connectivité limitée

Préférences de mouvement

Pour de nombreux utilisateurs, les animations peuvent améliorer leur expérience sur un site Web, mais elles peuvent en gêner d'autres. Trop de mouvements peuvent causer de l’inconfort ou constituer une distraction, ainsi que des problèmes de performances.

La requête multimédia préfère-réduire le mouvement vérifie si un utilisateur a activé les paramètres sur son ordinateur pour limiter les animations du site Web. Vous pouvez modifier ou désactiver complètement les animations pour les utilisateurs qui préfèrent un mouvement réduit.

Pour commencer, créons une page Web avec une animation. Que diriez-vous d’un fond rayé animé ?

Voici le code HTML de la page :

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

Voici à quoi ça ressemble avec les rayures animées :

La syntaxe sans préférence est destinée aux utilisateurs sans paramètres de préférence, tandis que la réduction est destinée à ceux qui en ont. Vous pouvez complètement désactiver ou modifier les animations pour les utilisateurs qui préfèrent un mouvement réduit. Voici comment désactiver l’arrière-plan mobile à l’aide de la requête multimédia préfère-réduire le mouvement :

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

Remarque : sur les appareils qui exécutent Windows 11, vous pouvez désactiver les animations en accédant à Paramètres, en sélectionnant Accessibilité, puis Effets visuels et en désactivant Effets d'animation. Le processus est similaire pour presque tous les types d’appareils/systèmes d’exploitation.

Voici un CodePen :

Vous pouvez choisir de changer le type d'animation au lieu de les désactiver. Par exemple, au lieu d'une animation de transformation coulissante, vous utilisez une animation de fondu entrant pour les utilisateurs qui préfèrent un mouvement réduit.

Si vous utilisez des animations de défilement avec des éléments glissant d'un côté de la page, vous pouvez passer à un effet plus simple, comme un fondu entrant.

Voici CSS pour une animation de défilement simple :

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

Dans cet exemple, les éléments de la boîte apparaîtront en fondu depuis le côté droit de la page Web et se déplaceront vers la gauche. Ce mouvement est contrôlé par la propriété transform, vous pouvez donc simplement le supprimer pour les utilisateurs qui préfèrent un mouvement réduit :

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

Les utilisateurs sans préférence verront ceci lorsqu'ils feront défiler :

Et voici ce que verront les utilisateurs avec réduire :

Avec la requête multimédia de préférence à mouvement réduit, vous pouvez atténuer/ralentir des animations complexes ou les désactiver entièrement en fonction de ce que souhaite l'utilisateur.

Voici un CodePen avec lequel interagir et où vous pouvez désactiver les animations sur votre appareil pour voir la différence :

Les utilisateurs souffrant de troubles vestibulaires comme le mal des transports et les vertiges peuvent devenir désorientés ou étourdis lorsqu'ils regardent des animations. Les animations peuvent également distraire les utilisateurs qui préfèrent disposer d’une interface utilisateur simple.

La possibilité de réduire les mouvements rendra les sites Web beaucoup plus confortables à utiliser pour les utilisateurs sensibles au mouvement.

Préférences de thème

Il est désormais courant pour les sites Web et les applications d’avoir la possibilité de passer d’un thème clair à un thème plus sombre. Certains sites Web vous offrent une option supplémentaire basée sur les préférences système.

La requête multimédia préfère-couleur-schéma détecte si un utilisateur préfère les thèmes sombres ou clairs. Les utilisateurs peuvent obtenir un thème par défaut en fonction des paramètres de leur appareil.

Voici une page Web avec des couleurs claires :

C'est ce que les utilisateurs verront si leur thème par défaut est clair. Vous pouvez ensuite utiliser le schéma de couleurs préférées pour créer le thème sombre :

.box {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
  transform: translateX(0);
  opacity: 1;
}
@keyframes reveal {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

Écrire les règles CSS comme celle-ci pour les modes clair et sombre peut représenter trop de travail, surtout lorsque plusieurs propriétés partagent les mêmes valeurs. L'utilisation de variables pour cartographier les schémas de couleurs vous aidera à éviter les répétitions :

@media (prefers-reduced-motion: reduce) {
  .box {
    transform: translateX(0);
  }
}

Voici une capture d'écran de la même page que précédemment mais avec le mode sombre activé :

Voici un CodePen avec lequel vous pouvez interagir :

Le schéma de couleurs préférées ne se limite pas aux couleurs uniquement ; vous pouvez l'utiliser pour échanger des images :

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

Voici une capture d'écran de la page Web en mode clair :

Photo de fond par Plufow Le Studio sur Unsplash.

Et voici la page en mode sombre :

[légende>
Photo de fond par Plufow Le Studio sur Unsplash.

Meilleures pratiques

Assurez-vous de tester les contrastes de couleurs avant de les utiliser pour garantir une meilleure lisibilité. Il existe plusieurs outils disponibles qui peuvent vous aider à choisir les couleurs à utiliser.

Considérez tous les éléments possibles qui doivent être mis à jour lors du changement de thème, pas seulement l'arrière-plan et le texte. C'est pourquoi stocker les thèmes à l'aide de variables CSS est une bonne idée, vous devrez peut-être fournir des alternatives pour les boutons, les ombres, les bordures, les liens, etc.

Mise en œuvre

Le moyen le plus simple d'implémenter les préférences utilisateur consiste à utiliser la règle @media. Vous devez spécifier la préférence pour le mouvement ou les thèmes, sinon les règles CSS contenues dans la requête multimédia remplaceront toutes les autres règles ou paramètres de l'appareil.

Cela signifie que pour les préférences de mouvement, vous devez préciser si c'est réduit ou sans préférence, et pour les thèmes, c'est clair ou sombre :

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

Cela peut être utile lors du test de votre code, mais assurez-vous de spécifier la préférence exacte avant l'implémentation.

Implémentation des préférences utilisateur avec JavaScript

Les préférences utilisateur peuvent également être implémentées avec JavaScript. Vous pouvez ajouter une nouvelle classe à des éléments spécifiques en fonction des préférences de l'utilisateur.

En utilisant notre premier exemple avec les rayures animées, voici comment vérifier les préférences de l'utilisateur avec JavaScript :

.box {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
  transform: translateX(0);
  opacity: 1;
}
@keyframes reveal {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

Voici le CSS :

@media (prefers-reduced-motion: reduce) {
  .box {
    transform: translateX(0);
  }
}

Notez que les pseudo-éléments ne font pas partie du DOM et ne peuvent pas être directement sélectionnés en JavaScript, d'où cette approche.

Implémentation des préférences utilisateur avec des attributs de données

Les attributs de données HTML personnalisés et JavaScript vous permettent d'implémenter les préférences utilisateur. Les attributs de données vous permettent de stocker des informations sur des éléments HTML sans affecter la structure du document. Ils utilisent le préfixe data et peuvent être facilement manipulés à l'aide de JavaScript :

@media (prefers-color-scheme: dark) {
    #main {
    background-image: repeating-linear-gradient(
      45deg,
      #553c9a,
    #553c9a 50px,
    #3a1e4f 50px,
    #3a1e4f 100px,
    #301934 100px,
    #301934 150px
    );
  }
  nav{
    background: rgba(0, 0, 0, 0.5);
  }
  .logo a,
  nav ul li a{
    color: #b393d3;
  }
  .content {
    background: rgba(0, 0, 0, 0.5);
  }
  .content h1 {
    color: #b393d3;
  }
  .content p{
    color: #b393d3;
  }
}

Voici le CSS :

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

Utilisation réduite des données

Bien qu'encore expérimentale, préfère-réduire les données est une requête multimédia proposée qui permet aux sites Web de détecter si les utilisateurs préfèrent enregistrer des données.

Il utilise la même syntaxe que la requête multimédia préfère-réduire le mouvement, qui est réduite pour les utilisateurs qui préfèrent un contenu léger et sans préférence pour les utilisateurs sans préférence de données.

Certaines de ses applications potentielles incluent la réduction des images haute résolution, le chargement de polices alternatives, la désactivation des vidéos en lecture automatique et le chargement paresseux de contenu non critique. Cette requête multimédia pourrait contribuer à améliorer les temps de chargement pour les utilisateurs disposant de forfaits de données limités ou coûteux, ou dont les connexions Internet ne sont pas fiables.

Derniers mots

Le respect des préférences des utilisateurs est crucial pour améliorer l'expérience de chaque utilisateur. Dans ce didacticiel, vous avez appris à utiliser la requête multimédia préfère le mouvement réduit et préfère le schéma de couleurs pour détecter les paramètres de mouvement et de thème d'un utilisateur. Il existe également des règles @media pour les préférences de contraste et de transparence.

En tant que développeur Web, vous êtes l'architecte ayant le pouvoir de rendre chaque site Web confortable, accessible et efficace pour chaque type d'utilisateur.

---

Votre interface monopolise-t-elle le processeur de vos utilisateurs ?

À mesure que les interfaces Web deviennent de plus en plus complexes, les fonctionnalités gourmandes en ressources exigent de plus en plus du navigateur. Si vous souhaitez surveiller et suivre l'utilisation du processeur côté client, l'utilisation de la mémoire et bien plus encore pour tous vos utilisateurs en production, essayez LogRocket.

LogRocket est comme un DVR pour les applications Web et mobiles, enregistrant tout ce qui se passe dans votre application Web, votre application mobile ou votre site Web. Au lieu de deviner pourquoi les problèmes surviennent, vous pouvez regrouper et créer des rapports sur les principales mesures de performances du front-end, relire les sessions utilisateur avec l'état de l'application, enregistrer les requêtes réseau et faire apparaître automatiquement toutes les erreurs.

Modernisez la façon dont vous déboguez les applications Web et mobiles : démarrez la surveillance gratuitement.

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!