Créer des interfaces adaptatives avec les requêtes média de préférence

1. Avant de commencer

De nos jours, les utilisateurs indiquent de nombreuses préférences sur leurs appareils. Ils veulent que le système d'exploitation et les applications leur ressemblent. Les interfaces adaptatives sont celles qui sont prêtes à utiliser ces préférences pour améliorer l'expérience utilisateur, pour que l'utilisateur se sente chez lui, pour qu'il ait l'impression que l'interface lui appartient. Si l'opération est effectuée correctement, l'utilisateur peut ne jamais se rendre compte que l'expérience utilisateur s'adapte ou s'est adaptée.

Préférences utilisateur

Le choix du matériel de l'appareil est une préférence, le système d'exploitation est un choix, les couleurs de l'application et du système d'exploitation sont des préférences, et les langues des documents de l'application et du système d'exploitation sont des préférences. Le nombre de préférences d'un utilisateur ne semble faire qu'augmenter. Une page Web ne peut pas accéder à tout, et pour de bonnes raisons.

Voici quelques exemples de préférences utilisateur pouvant être utilisées par les CSS :

• Taille de la fenêtre d'affichage de l'appareil
• Orientation de l'appareil (portrait | paysage)
• Taille de police
• En ligne/Hors connexion
• Qualité du réseau
• Jeu de couleurs (clair | sombre)
• Animations de l'interface (activées | réduites)
• Qualité de la saisie (souris | écran tactile | stylet)
• Direction du document et mode d'écriture (de gauche à droite, de haut en bas, etc.)
• Mode d'affichage (fullscreen | standalone | minimal UI | browser)

Voici quelques exemples de préférences utilisateur qui seront bientôt disponibles dans CSS :

• Mode Données réduites/Mode simplifié
• Gamme de couleurs
• Contraste (moins | plus | réduire)
• Couleurs (force l'utilisation des couleurs de l'utilisateur sur la page)
• Transparence (activée | réduite)

Requêtes média

Le CSS et le Web permettent l'adaptation et la responsivité grâce aux requêtes média, une condition déclarative qui contient un ensemble de styles si cette condition est vraie. La plus courante est une condition sur la taille de la fenêtre d'affichage de l'appareil : si la taille est inférieure à 800 pixels, voici des styles plus adaptés à ce cas.

Adaptation à l'utilisateur

Une interface non adaptative ne change rien lorsqu'un utilisateur la consulte. Elle offre essentiellement une expérience unique à tous, sans possibilité d'ajustement. Une interface adaptative peut avoir cinq apparences et styles différents pour cinq utilisateurs différents. La fonctionnalité est la même, mais l'esthétique est perçue comme meilleure et l'interface est plus facile à utiliser pour les utilisateurs qui peuvent l'ajuster.

Prérequis

• Connaissances en HTML et CSS
• Connaissance des outils pour les développeurs, tels que les outils pour les développeurs Google Chrome

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez créer un formulaire qui s'adapte aux éléments suivants :

• La préférence de jeu de couleurs du système en proposant un jeu de couleurs clair et sombre pour les commandes de formulaire et les éléments d'interface utilisateur environnants
• Les préférences de mouvement du système en proposant plusieurs types d'animations
• Fenêtres d'affichage pour petits et grands appareils afin de proposer des expériences mobiles et pour ordinateur
• Différents types d'entrées, comme le clavier, le lecteur d'écran, l'écran tactile et la souris
• Toutes les langues et mode lecture/écriture

Points abordés

Dans cet atelier de programmation, vous allez découvrir des fonctionnalités Web modernes qui vous aideront à créer un formulaire qui s'adapte à l'utilisateur. Vous allez apprendre à :

• Créer des thèmes clair et sombre
• Créer des formulaires animés et accessibles
• Mettre en page des formulaires responsifs
• Utilisez des unités relatives et des propriétés logiques.

Cet atelier de programmation est consacré aux interfaces adaptatives pour l'utilisateur. Les concepts et les blocs de codes non pertinents ne sont pas abordés, et vous sont fournis afin que vous puissiez simplement les copier et les coller.

Prérequis

• Google Chrome 89 ou version ultérieure, ou votre navigateur préféré

2. Configuration

Obtenir le code

Tout ce dont vous aurez besoin pour ce projet se trouve dans un dépôt GitHub. Pour commencer, vous devez récupérer le code et l'ouvrir dans l'environnement de développement de votre choix. Vous pouvez également dupliquer ce Codepen et travailler à partir de là.

Recommandé : Utilisez Codepen

1. Ouvrez un nouvel onglet du navigateur.
2. Accédez à https://codepen.io/argyleink/pen/abBMeeq.
3. Si vous n'avez pas de compte, créez-en un pour enregistrer votre travail.
4. Cliquez sur Fork (Dupliquer).

Alternative : travailler localement

Si vous souhaitez télécharger le code et travailler en local, vous devez disposer de Node.js version 12 ou ultérieure, ainsi que d'un éditeur de code configuré et prêt à l'emploi.

Utiliser Git

1. Accédez à la page https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces.
2. Clonez le dépôt dans un dossier.
3. Notez que la branche par défaut est beginning.

Utiliser des fichiers

Télécharger le code source

1. Décompressez le fichier ZIP téléchargé dans un dossier.

Exécuter le projet

Utilisez le répertoire de projet établi lors de l'une des étapes ci-dessus, puis :

1. Exécutez npm install pour installer les dépendances nécessaires à l'exécution du serveur.
2. Exécutez npm start pour démarrer le serveur sur le port 3000.
3. Ouvrez un nouvel onglet du navigateur.
4. Accédez à http://localhost:3000.

À propos du code HTML

Cette leçon abordera les aspects du code HTML utilisé pour prendre en charge l'interactivité adaptative. Cet atelier est spécifiquement axé sur le CSS. Si vous débutez dans la création de formulaires ou de sites Web, nous vous conseillons de consulter le code HTML fourni. Le choix des éléments HTML peut être crucial pour l'accessibilité et la mise en page.

Lorsque vous serez prêt à commencer, voici le squelette que vous transformerez en une expérience utilisateur dynamique et adaptative.

3. Interactions adaptatives

Branche Git : beginning

À la fin de cette section, votre formulaire de paramètres s'adaptera aux éléments suivants :

• Manette de jeu et clavier
• Souris + tactile
• Lecteur d'écran ou technologie d'assistance similaire

Attributs pour le code HTML

Le code HTML fourni dans le code source est un excellent point de départ, car les éléments sémantiques permettant de regrouper, d'ordonner et d'étiqueter les entrées de votre formulaire ont déjà été choisis.

Les formulaires sont souvent un point d'interaction clé pour une entreprise. Il est donc important qu'ils puissent s'adapter aux nombreux types de saisie que le Web peut faciliter. Par exemple, il est probablement important de disposer d'un formulaire utilisable sur mobile avec l'écran tactile. Dans cette section, avant de vous intéresser à la mise en page et au style, vous allez vous assurer de l'utilisabilité de la saisie adaptative.

Entrées de regroupement

L'élément <fieldset> dans le code HTML permet de regrouper des entrées et des commandes similaires. Dans votre formulaire, vous avez deux groupes : un pour le volume et un pour les notifications. Ceci est important pour l'expérience utilisateur, car cela permet d'ignorer des sections entières.

Organiser des éléments

L'ordre des éléments est fourni dans un ordre logique. Ceci est important pour l'expérience utilisateur, car l'ordre de l'expérience visuelle est identique ou similaire pour les technologies de manette de jeu, de clavier ou de lecteur d'écran.

Interaction au clavier

Les internautes ont pris l'habitude de naviguer dans les formulaires à l'aide de la touche de tabulation. Heureusement, le navigateur s'en charge si vous fournissez les éléments HTML attendus. Les éléments tels que <button>, <input>, <h2> et <label> deviennent automatiquement des destinations pour le clavier ou le lecteur d'écran.

La vidéo ci-dessus montre comment utiliser la touche de tabulation et les flèches pour naviguer dans l'interface et effectuer des modifications. Le contour bleu est toutefois très serré autour des éléments d'entrée. Ajoutez les styles suivants pour que cette interaction ait un peu d'espace.

style.css

input {
  outline-offset: 5px;
}

À essayer

1. Examinez les éléments HTML utilisés dans index.html.
2. Cliquez sur la page de démonstration dans votre navigateur.
3. Appuyez sur les touches tab et shift+tab pour déplacer le curseur dans le formulaire.
4. Utilisez le clavier pour modifier les valeurs des curseurs et des cases à cocher.
5. Connectez une manette de jeu Bluetooth et déplacez le curseur sur les éléments du formulaire.

Interaction avec la souris

Les internautes ont pris l'habitude d'interagir avec les formulaires à l'aide de leur souris. Essayez d'utiliser votre souris sur le formulaire. Les curseurs et les cases à cocher fonctionnent, mais vous pouvez faire mieux. Ces cases à cocher sont assez petites pour être cliquées avec une souris.

Vous voyez comment vous obtenez deux fonctionnalités d'expérience utilisateur pour connecter vos libellés et leurs entrées ?

La première fonctionnalité est d'avoir des options avec lesquelles interagir, et le libellé est beaucoup plus facile à cibler avec une souris qu'un petit carré.

La deuxième fonctionnalité consiste à savoir exactement à quelle entrée correspond une étiquette. Sans CSS, il est actuellement assez difficile de déterminer quel libellé correspond à quelle case à cocher, à moins de fournir certains attributs.

Cette connexion explicite améliore également l'expérience des lecteurs d'écran, qui sont abordés dans la section suivante.

Non associé : aucun attribut ne relie les éléments.

<input type="checkbox">
<label>...</label>

Associés : attributs reliant les éléments

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

Le code HTML fourni a déjà attribué toutes les entrées et étiquettes. Si ce concept est nouveau pour vous, il mérite d'être approfondi.

À essayer

1. Pointez sur un libellé avec votre souris et notez que la case à cocher est mise en surbrillance.
2. Examinez un élément d'étiquette avec les outils pour les développeurs Chrome afin de visualiser la surface cliquable qui permet de sélectionner la case à cocher.

Interaction avec le lecteur d'écran

La technologie d'assistance peut interagir avec ce formulaire et, grâce à quelques attributs HTML, améliorer l'expérience utilisateur.

Pour les utilisateurs qui parcourent le formulaire actuel avec un lecteur d'écran dans Chrome, il y a un arrêt inutile au niveau de l'élément <picture> (non spécifique à Chrome). Un utilisateur qui utilise un lecteur d'écran le fait probablement en raison d'une déficience visuelle. S'arrêter sur une image n'est donc pas utile. Vous pouvez masquer des éléments pour les lecteurs d'écran à l'aide d'un attribut.

index.html

<picture aria-hidden="true">

Les lecteurs d'écran ignorent désormais l'élément purement visuel.

L'élément de curseur input[type="range"] comporte un attribut ARIA spécial : aria-labelledby="media-volume". Cela fournit des instructions spéciales que le lecteur d'écran peut utiliser pour améliorer l'expérience utilisateur.

À essayer

1. Utilisez la technologie de lecteur d'écran de votre système d'exploitation pour déplacer la sélection dans le formulaire.
2. Téléchargez et essayez un logiciel de lecture d'écran sur le formulaire.

4. Mises en page adaptatives

Branche Git : layouts

À la fin de cette section, la page des paramètres :

• Créer un système d'espacement avec des propriétés personnalisées et des unités relatives de l'utilisateur
• Écrire du code CSS Grid pour un alignement et un espacement flexibles et responsifs
• Utilisez des propriétés logiques pour les mises en page adaptées à l'international.
• Écrire des requêtes média pour adapter les mises en page compactes et spacieuses

Espacement

Pour obtenir une mise en page agréable, il est essentiel de limiter le nombre d'options d'espacement. Cela permet au contenu de trouver des alignements et des harmonies naturels.

Propriétés personnalisées

Cet atelier s'appuie sur un ensemble de sept tailles de propriétés personnalisées.

• Placez-les en haut de style.css :

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

Le nom est proche du vocabulaire que les gens utiliseraient entre eux pour décrire l'espace. Vous utilisez également exclusivement des unités rem pour un dimensionnement lisible de l'unité entière qui s'adapte et tient compte des préférences de l'utilisateur.

Styles de page

Ensuite, vous devez définir des styles de document, supprimer les marges des éléments et définir une police Sans Serif agréable.

• Ajoutez le code suivant à style.css :

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

Voilà, vous avez utilisé les propriétés personnalisées d'espacement pour la première fois ! Votre voyage dans l'espace commence.

Typographie

La police de cette mise en page est adaptative. Le mot clé system-ui utilise la police d'interface optimale définie par le système d'exploitation de l'utilisateur.

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

Les styles pour h1, h2 et h3 sont mineurs et stylistiques. Toutefois, l'élément small nécessite l'élément line-height supplémentaire pour le retour automatique à la ligne du texte. Sinon, ils sont trop regroupés.

Propriétés logiques

Notez que la propriété padding de body utilise des propriétés logiques (block-start, block-end) pour spécifier le côté. Les propriétés logiques seront largement utilisées dans le reste de l'atelier de programmation. Comme les unités rem, ils s'adaptent à l'utilisateur. Cette mise en page peut être traduite dans une autre langue et définie selon le sens d'écriture et de lecture auquel l'utilisateur est habitué dans sa langue maternelle. Les propriétés logiques permettent de prendre en charge cette fonctionnalité avec une seule définition d'espace, de direction ou d'alignement.

Les grilles et les flexbox sont déjà relatives au flux, ce qui signifie que les styles écrits pour une langue seront contextuels et appliqués de manière appropriée pour les autres. Directionnalité adaptative : le contenu s'adapte à la directionnalité du document.

Les propriétés logiques vous permettent de toucher plus d'utilisateurs avec moins de styles à écrire.

Mises en page avec grille CSS

La propriété CSS grid est un outil de mise en page puissant doté de nombreuses fonctionnalités pour gérer des tâches complexes. Vous allez créer quelques mises en page en grille simples et une mise en page complexe. Vous travaillerez également de l'extérieur vers l'intérieur, des macro-mises en page aux micro-mises en page. Vos propriétés personnalisées d'espacement deviendront essentielles, car elles ne se limiteront pas aux valeurs de marge intérieure ou extérieure, mais incluront également la taille des colonnes, les rayons de bordure et plus encore.

Voici une capture d'écran des outils pour les développeurs Chrome superposant chaque mise en page de grille CSS en même temps :

1. Suivez la procédure en ajoutant chacun des styles suivants à style.css :

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

Par défaut, Grid place chaque élément enfant sur sa propre ligne, ce qui est idéal pour empiler des éléments. Il présente également l'avantage d'utiliser gap. Précédemment, vous avez défini margin: 0 sur tous les éléments avec le sélecteur *, ce qui est désormais important, car vous utilisez gap pour l'espacement. L'écart n'est pas seulement un emplacement unique pour gérer l'espace dans un conteneur, mais aussi son flux relatif.

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

C'est la mise en page de grille la plus complexe de la conception, mais elle représente l'aspect responsive le plus intéressant :

• max-width fournit une valeur que l'algorithme de mise en page doit utiliser pour déterminer la taille maximale de l'élément.
• gap utilise des propriétés personnalisées et transmet un row-gap différent de column-gap.
• align-items est défini sur flex-start pour ne pas étirer la hauteur des éléments.
• grid-template-columns a une syntaxe complexe, mais l'objectif est succinct : conserver les colonnes d'une largeur de 35ch et jamais inférieure à 10ch, et placer les éléments dans des colonnes s'il y a de la place, sinon les lignes sont correctes.

2. Essayez de redimensionner le navigateur. Regardez comment le formulaire se réduit en lignes dans une petite fenêtre d'affichage, mais s'écoule dans de nouvelles colonnes s'il y a de la place, en s'adaptant sans requêtes média. Cette stratégie de styles responsifs sans requêtes média est particulièrement utile pour les composants ou les mises en page axées sur le contenu.

<section>

section {
  display: grid;
  gap: var(--space-md);
}

Chaque section doit être une grille de lignes avec un espacement moyen entre les éléments enfants.

<header>

header {
  display: grid;
  gap: var(--space-xxs);
}

Chaque en-tête doit être une grille de lignes avec un très petit espace entre les éléments enfants.

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

Cette mise en page permet de créer une apparence de fiche et de regrouper les entrées. overflow: hidden et gap: 1px deviendront plus clairs lorsque vous ajouterez de la couleur dans la section suivante.

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

Cette mise en page est chargée de centrer l'icône et la case à cocher avec les libellés et les commandes associés. La première colonne du modèle de grille, var(--space-lg), crée une colonne plus large que l'icône, de sorte qu'un élément enfant puisse être centré à l'intérieur.

Cette mise en page montre combien de décisions de conception ont déjà été prises dans les propriétés personnalisées. Le remplissage, les espaces et une colonne ont tous été dimensionnés en harmonie avec le système à l'aide des valeurs que vous avez déjà définies.

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

Cette mise en page est responsable des paramètres, de la taille du cercle de l'icône, de la création d'une forme de cercle et du centrage d'une image dans celui-ci.

<picture> & [checkbox] alignment

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

Cette mise en page isole le centrage des éléments d'image et de case à cocher à l'aide du pseudo-sélecteur :is.

3. Remplacez le sélecteur picture > svg par .fieldset-item svg comme suit :

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

Cela définit la taille de l'icône SVG sur une valeur du système de taille.

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

Cette classe d'utilitaire est destinée aux éléments d'étiquette de case à cocher pour espacer le texte d'aide de la case à cocher.

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

Ces styles augmentent la taille d'une case à cocher en utilisant les valeurs de notre ensemble d'espacement.

À essayer

1. Ouvrez les outils pour les développeurs Chrome et recherchez les badges de grille dans le code HTML du panneau Éléments. Cliquez dessus pour activer les outils de débogage.
2. Ouvrez les outils pour les développeurs Chrome et pointez sur un espace dans le volet Styles.
3. Ouvrez les outils pour les développeurs Chrome, accédez au volet Styles, puis passez de Styles à Mises en page. Explorez cette zone en activant ses paramètres et les mises en page.

Requêtes média

Le CSS suivant adapte les styles en fonction de la taille et de l'orientation de la fenêtre d'affichage, dans le but d'ajuster l'espacement ou la disposition de manière optimale en fonction du contexte de la fenêtre d'affichage.

Remarque : Le code CSS de chaque section doit être ajouté après le sélecteur qu'il modifie dans style.css.

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

Ces deux requêtes média ajoutent une marge intérieure à main à mesure que l'espace de la fenêtre d'affichage augmente. Cela signifie qu'il commence par un petit espace compact, mais qu'il devient de plus en plus spacieux à mesure que de l'espace se libère.

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

Le formulaire était déjà responsive par rapport à la taille de la fenêtre d'affichage avec auto-fit, mais lors des tests sur un appareil mobile, le fait de passer en mode paysage ne place pas les deux groupes de formulaires côte à côte. Adaptez-vous à ce contexte de paysage avec une requête média orientation et une vérification de la largeur de la fenêtre d'affichage. Maintenant, si l'appareil est en mode paysage et fait au moins 640 pixels de large, forcez l'affichage sur deux colonnes en remplaçant le mot clé auto-fit par un nombre pour la propriété personnalisée --repeat.

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

Cette requête média est une autre extension d'espacement lorsque davantage d'espace de fenêtre d'affichage est disponible. Le modèle de grille développe la première colonne en utilisant une propriété personnalisée plus grande (var(--space-xxl)) dans le modèle. La marge intérieure est également augmentée pour les propriétés personnalisées plus grandes.

À essayer

1. Agrandissez et réduisez la fenêtre de votre navigateur, et observez comment l'espace s'ajuste.
2. Prévisualiser sur un appareil mobile
3. Prévisualiser sur un appareil mobile en mode paysage

5. Couleur adaptative

Branche Git : colors

À la fin de cette section, votre formulaire de paramètres :

• S'adapter aux préférences de couleurs sombres et claires
• Disposer d'un jeu de couleurs dérivé d'un code hexadécimal de marque
• Avoir des couleurs accessibles

HSL

Dans la section suivante, vous allez créer un système de couleurs avec TSL pour vous aider à créer un thème clair et un thème sombre. Il repose sur un concept fondamental du CSS : calc().

TSL signifie "teinte, saturation et luminosité". La teinte est un angle, comme un point sur une horloge, tandis que la saturation et la luminosité sont des pourcentages. calc() peut effectuer des opérations mathématiques sur des pourcentages et des angles. Vous pouvez effectuer des calculs de luminosité et de saturation sur ces pourcentages en CSS. Combinez les calculs de canaux de couleur avec des propriétés personnalisées, et vous obtiendrez un jeu de couleurs moderne et dynamique où les variantes sont calculées à partir d'une couleur de base, ce qui vous évitera de gérer des dizaines de couleurs dans le code.

Propriétés personnalisées

Dans cette section, vous allez créer un ensemble de propriétés personnalisées à utiliser dans le reste de vos styles. Comme pour l'ensemble d'espacements que vous avez créé précédemment dans la balise :root, vous allez ajouter des couleurs.

Supposons que la couleur de la marque de votre application soit #0af. Votre première tâche consiste à convertir cette valeur de couleur hexadécimale en valeur de couleur TSL : hsl(200 100% 50%). Cette conversion révèle les canaux de couleur de votre marque en TSL, que vous pouvez utiliser sur calc() pour calculer différentes couleurs de marque secondaires.

Remarque : Cette application privilégie un jeu de couleurs sombres, puis s'adapte à un thème clair. C'est important, car le premier jeu de couleurs que vous allez créer sera un thème sombre.

Chacun des blocs de code suivants de cette section doit être ajouté au même sélecteur :root.

Chaînes de marque

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

Les trois canaux HSL ont été extraits et placés dans leurs propres propriétés personnalisées.

1. Utilisez les trois propriétés telles quelles et recréez la couleur de la marque.

Marque

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

Comme votre jeu de couleurs est sombre par défaut, il est recommandé de désaturer les couleurs pour les utiliser sur des surfaces sombres (sinon, elles peuvent vibrer à l'œil ou être inaccessibles). Pour désaturer la couleur de votre marque, vous utilisez la teinte et la luminosité telles quelles, mais vous divisez la saturation par deux : calc(var(--saturation) / 2). La couleur de votre marque est désormais correctement intégrée au thème, mais elle est désaturée pour être utilisée.

Texte

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

Pour le texte de lecture de notre thème sombre, vous utilisez la teinte de la marque comme base, mais vous créez des couleurs presque blanches à partir de celle-ci. De nombreux utilisateurs penseront que le texte est blanc, alors qu'il est en fait bleu très clair. Rester dans la même teinte est un moyen efficace de créer une harmonie visuelle. --text1 est blanc à 85 % et --text2 est blanc à 65 %, et les deux ont une saturation très faible.

2. Après avoir ajouté le code à votre projet, ouvrez les outils pour les développeurs Chrome et essayez de modifier ces valeurs de canal. Découvrez comment les canaux de l'espace de couleur TSL interagissent entre eux. Peut-être que vous préférez plus ou moins de saturation.

Surface

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

Le texte est très clair, car les surfaces sont sombres en mode sombre. Là où les couleurs de texte utilisaient des valeurs de luminosité élevées (85 % et plus), les surfaces utiliseront des valeurs plus faibles (30 % et moins). Un écart suffisant entre les plages de luminosité de la surface et du texte permet de garantir que les couleurs sont accessibles pour les utilisateurs.

3. Notez que les couleurs commencent par le gris le plus foncé avec une luminosité de 10 % et une saturation de 10 %, puis se désaturent à mesure qu'elles s'éclaircissent. Chaque nouvelle surface est 5 % plus légère que la précédente. La saturation est également légèrement réduite dans les surfaces plus claires. Essayez de régler toutes vos surfaces sur une saturation de 10 %. Vous l'aimez plus ou moins ?

Thème clair

Maintenant que vous disposez d'un ensemble de couleurs de texte et de surface pour le thème sombre, vous devez adapter les propriétés personnalisées de couleur dans une requête média prefers-color-scheme pour le thème clair.

Vous utiliserez la même technique consistant à maintenir une grande différence de luminosité entre les surfaces et les couleurs du texte pour conserver un bon contraste.

Marque

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

Commençons par la couleur de la marque. Il faut restaurer la saturation à son maximum.

Texte

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

De même que le thème sombre utilise des couleurs de texte bleu très clair, le thème clair utilise des couleurs de texte bleu très foncé. Les valeurs de luminosité de 10 % et 30 % pour la couleur TSL devraient vous indiquer que ces couleurs sont sombres.

Surface

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

Ces couleurs de surface sont les premières à rompre les motifs. Ce qui semblait assez raisonnable et linéaire jusqu'à présent est désormais rompu. L'avantage est que vous pouvez jouer avec les combinaisons de couleurs du thème clair HSL directement dans le code, et ajuster la luminosité et la saturation pour créer un jeu de couleurs clair agréable, qui ne soit pas trop froid ni trop bleu.

Utiliser le système de couleurs

Maintenant que les couleurs sont définies, il est temps de les utiliser. Vous disposez d'une couleur d'accentuation de marque éclatante, de deux couleurs de texte et de quatre couleurs de surface.

• Pour les sections de code suivantes, recherchez le sélecteur correspondant et ajoutez le code CSS de couleur au bloc de code existant.

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

Les couleurs principales de la page sont les premières couleurs de surface et de texte que vous avez créées, ce qui permet également d'obtenir un contraste maximal par défaut. Vous pouvez commencer à tester le passage du thème clair au thème sombre.

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

Il s'agit de l'élément de votre conception qui ressemble à une carte. La bordure de 1 pixel et l'espace de 1 pixel sont de la même couleur et représentent la surface derrière chaque .fieldset-item. Cela crée une belle harmonie visuelle et est facile à entretenir.

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

Chaque entrée de formulaire se trouve sur sa propre surface. Vous voyez maintenant comment ces éléments s'assemblent et comment les variations de luminosité se superposent.

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

Il s'agit d'un choix stylistique visant à mettre en valeur la forme circulaire entourant l'icône. Vous comprendrez pourquoi lorsque vous ajouterez des interactions dans la section suivante.

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

Les icônes du formulaire sont configurées pour utiliser le texte alternatif --text2. Les conceptions où les icônes pleines sont légèrement plus claires que le texte évitent de donner une impression de lourdeur.

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

Ce sélecteur correspond à l'élément de conteneur d'entrée lorsqu'une des entrées qu'il contient est utilisée, et cible le SVG pour le mettre en surbrillance avec la couleur d'accentuation de votre marque. Cela permet d'offrir une expérience utilisateur agréable dans le formulaire, où l'interaction avec les entrées met en évidence l'iconographie correspondante.

<small>

small {
  color: var(--text2);
}

Il s'agit d'un petit texte. Il doit être légèrement plus discret que les en-têtes et les paragraphes (contenu principal).

Éléments de contrôle des formulaires sombres

:root {
  color-scheme: dark light;
}

Cette touche finale indique au navigateur que cette page est compatible avec les thèmes sombre et clair. Le navigateur nous récompense avec des commandes de formulaire sombres.

6. Animation adaptative

Branche Git : animations

À la fin de cette section, la page des paramètres :

• S'adapter aux préférences de l'utilisateur en matière de mouvement
• Répondre aux interactions des utilisateurs

Mouvements réduits ou aucun mouvement

La préférence de l'utilisateur trouvée dans le système d'exploitation pour le mouvement n'offre pas de valeur "aucune animation". L'option "Réduire les animations". Les animations de fondu enchaîné, les transitions de couleur et d'autres éléments sont toujours souhaitables pour les utilisateurs qui préfèrent une animation réduite.

Sur cette page de paramètres, il n'y a pas beaucoup de mouvement sur l'écran. Le mouvement s'apparente davantage à un effet d'échelle, comme si l'élément se déplaçait vers l'utilisateur. Il est très simple d'ajuster votre code CSS pour tenir compte de la réduction des animations, de sorte que vous réduisez les transitions de mise à l'échelle.

Styles d'interaction

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

Lorsqu'un utilisateur interagit avec les entrées de l'un des éléments de type carte <fieldset>, un effet de soulèvement est ajouté. L'interface met en avant un élément, ce qui aide l'utilisateur à se concentrer lorsque le groupe de formulaires contextuels est présenté à l'utilisateur.

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

Lorsque l'utilisateur interagit avec une entrée, l'arrière-plan de la couche de l'élément spécifique prend une couleur de surface mise en surbrillance. Il s'agit d'une autre fonctionnalité d'interface utile pour attirer l'attention de l'utilisateur et signaler que l'entrée est en cours de réception. Dans la plupart des cas, il n'est pas nécessaire de réduire les transitions de couleur.

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

Voici une animation clip-path que vous n'utilisez que si l'utilisateur n'a pas de préférences concernant la réduction des animations. Le premier sélecteur et les styles réduisent le chemin de découpe du cercle de 10 % et définissent certains paramètres de transition. Le deuxième sélecteur et le deuxième style attendent que les utilisateurs interagissent avec une entrée, puis agrandissent le cercle de l'icône. Un effet subtil, mais agréable quand tout va bien.

7. Félicitations

Branche Git : complete

Félicitations, vous avez réussi à créer une interface qui s'adapte à l'utilisateur !

Vous connaissez désormais les principales étapes nécessaires pour créer des interfaces qui s'adaptent à différents scénarios et paramètres utilisateur.