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

1. Avant de commencer

Les utilisateurs ont indiqué de nombreuses préférences sur leurs appareils ces derniers temps. Ils souhaitent 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 qu'il se sente plus à l'aise, pour qu'il ait l'impression que c'est son interface. Si l'adaptation est bien faite, l'utilisateur ne se rendra peut-être jamais compte que l'expérience utilisateur s'adapte ou s'est adaptée.

Préférences de l'utilisateur

Le choix du matériel de l'appareil est une préférence, le choix du système d'exploitation est un choix, les couleurs des applications et des systèmes d'exploitation sont des préférences, et les langues des documents des applications et des systèmes d'exploitation sont des préférences. Le nombre de préférences d'un utilisateur ne semble que croître. Une page Web ne peut pas accéder à tout, et pour une bonne raison.

Voici quelques exemples de préférences utilisateur que les CSS peuvent utiliser :

• 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 | tactile | stylet)
• Sens de lecture et mode d'écriture du document (de gauche à droite, de haut en bas, etc.)
• Mode d'affichage (plein écran | autonome | UI minimaliste | navigateur)

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

• 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 réactivité 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 étant une condition sur la taille de la fenêtre d'affichage de l'appareil : si la taille est inférieure à 800 pixels, voici quelques styles plus adaptés à ce cas.

Adaptatif

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 adaptatif qui s'adapte aux éléments suivants :

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

Points abordés

Dans cet atelier de programmation, vous allez découvrir les fonctionnalités Web modernes qui vous aideront à créer un formulaire adaptatif. Vous allez apprendre à :

• Créer des thèmes clair et sombre
• Créer des formulaires animés et accessibles
• Formulaires responsifs Mise en page
• Utiliser des unités relatives et des propriétés logiques

Cet atelier de programmation porte sur les interfaces adaptatives pour les utilisateurs. 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

Tous les éléments dont vous avez besoin pour ce projet se trouvent 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 forker ce Codepen et travailler à partir de là.

Recommandation : utiliser 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).

Solution alternative : travailler en local

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 à 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 aborde les aspects du code HTML utilisés pour prendre en charge l'interactivité adaptative à l'utilisateur. Cet atelier est spécifiquement axé sur le langage CSS. Il est utile d'examiner le code HTML fourni si vous débutez dans la création de formulaires ou de sites Web. Le choix des éléments HTML peut être essentiel en termes d'accessibilité et de mise en page.

Lorsque vous êtes prêt à commencer, voici le squelette que vous allez transformer 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 + 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 des é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 d'avoir un formulaire utilisable sur mobile avec l'écran tactile. Dans cette section, avant la mise en page et le style, vous assurez l'utilisabilité de la saisie adaptative.

Regrouper les entrées

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

Organiser les éléments

L'ordre des éléments est logique. C'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 avec le clavier

Les utilisateurs du Web se sont habitués à parcourir les formulaires avec 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 parcourir l'interface et apporter des modifications. Toutefois, le contour bleu est très serré autour des éléments d'entrée. Ajoutez les styles suivants pour donner un peu de marge à cette interaction.

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 la sélection d'un élément à l'autre 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 la sélection d'élément dans le formulaire.

Interaction avec la souris

Les utilisateurs du Web sont habitués à 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 avez remarqué que vous bénéficiez de deux fonctionnalités d'expérience utilisateur pour associer vos libellés et leurs entrées ?

La première fonctionnalité consiste à proposer des options avec lesquelles interagir. Le libellé est beaucoup plus facile à cibler avec une souris qu'un petit carré.

La deuxième fonctionnalité consiste à savoir exactement à quelle entrée un libellé est associé. Sans CSS, il est assez difficile de déterminer à quelle case à cocher correspond chaque libellé, sauf si vous fournissez des attributs.

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

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

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

Associé : 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 tous les libellés. Si vous ne connaissez pas ce concept, il vaut la peine de l'étudier plus en détail.

À essayer

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

Interaction avec le lecteur d'écran

Les technologies d'assistance peuvent interagir avec ce formulaire et, grâce à quelques attributs HTML, rendre l'expérience utilisateur plus fluide.

Pour les utilisateurs qui parcourent le formulaire actuel avec un lecteur d'écran dans Chrome, il existe 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'un handicap visuel. Il n'est donc pas utile de s'arrêter sur une image. Vous pouvez masquer des éléments aux 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". Il s'agit d'une instruction spéciale que le lecteur d'écran doit utiliser pour améliorer l'expérience utilisateur.

À essayer

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

4. Mises en page adaptatives

Branche Git  : layouts

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

• Créez un système d'espacement avec des propriétés personnalisées et des unités relatives utilisateur.
• Écrivez du CSS Grid pour un alignement et un espacement flexibles et réactifs.
• Utiliser des propriétés logiques pour des mises en page adaptées à l'international
• Écrivez 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 la palette d'options d'espacement. Cela permet aux contenus 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 éléments suivants 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;
}

Les noms sont proches du langage que les utilisateurs emploient entre eux pour décrire l'espace. Vous utilisez également les unités rem exclusivement pour un dimensionnement lisible en unités entières 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 belle police sans serif.

• 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);
}

Vous avez utilisé pour la première fois les propriétés personnalisées d'espacement. Votre aventure spatiale commence.

Typographie

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

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 a besoin de l'élément line-height supplémentaire lorsque le texte est renvoyé à la ligne. Sinon, il sera trop tassé.

Propriétés logiques

Notez que le padding sur 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 une unité rem, elles s'adaptent à l'utilisateur. Cette mise en page peut être traduite dans une autre langue et définie sur le sens d'écriture et la direction du document auxquels 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 boîtes flexibles 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'écoule en fonction de la directionnalité du document.

Les propriétés logiques vous permettent de toucher plus d'utilisateurs en écrivant moins de styles.

Mises en page avec les grilles CSS

La propriété CSS grid est un outil de mise en page puissant doté de nombreuses fonctionnalités pour gérer les tâches complexes. Vous allez créer quelques mises en page de grille simples et une mise en page complexe. Vous travaillerez également de l'extérieur vers l'intérieur, des mises en page macro aux mises en page micro. Vos propriétés personnalisées d'espacement deviendront essentielles, non seulement pour les valeurs de marge intérieure ou extérieure, mais aussi pour les tailles de 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 à la fois :

1. Suivez le tutoriel 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 les éléments. Il présente également l'avantage supplémentaire d'utiliser gap. Vous avez défini margin: 0 sur tous les éléments avec le sélecteur *, ce qui est important maintenant que vous utilisez gap pour l'espacement. L'espace n'est pas seulement un endroit unique pour gérer l'espace dans un conteneur, mais il est également relatif au flux.

<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));
}

Il s'agit de la mise en page en grille la plus délicate, mais elle représente l'aspect responsive le plus intéressant :

• max-width fournit une valeur que l'algorithme de mise en page peut utiliser pour déterminer la taille maximale.
• gap utilise des propriétés personnalisées et transmet une valeur row-gap différente 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 simple : garder les colonnes 35ch de large, sans jamais descendre en dessous de 10ch, et mettre les éléments dans des colonnes s'il y a de la place, sinon les lignes conviennent.

2. Testez le redimensionnement du navigateur. Regardez le formulaire se réduire à des lignes dans une petite fenêtre d'affichage, mais s'étendre à 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ête 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 espacement très petit entre les éléments enfants.

<fieldset>

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

Cette mise en page est chargée de créer une apparence de type carte et de regrouper les entrées. Les éléments 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 responsable du centrage de l'icône et de 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é.

Cette mise en page montre le nombre de décisions de conception déjà prises dans les propriétés personnalisées. La marge intérieure, les espaces et une colonne ont tous été dimensionnés en harmonie avec le système en utilisant 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 d'icône, de la création d'une forme circulaire et du centrage d'une image à l'intérieur.

Alignement <picture> et [checkbox]

.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 utilitaire est destinée aux éléments de libellé de la case à cocher afin d'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 à l'aide des 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 les mises en page et en modifiant les paramètres.

Requêtes média

Le code 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 pour qu'ils soient optimaux en fonction du contexte de la fenêtre d'affichage.

Remarque : Le 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 main de marge intérieure à mesure que l'espace de la fenêtre d'affichage augmente. Cela signifie qu'il commence par une petite marge intérieure compacte, 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à sensible à la taille de la fenêtre d'affichage avec auto-fit, mais lors des tests sur un appareil mobile, la mise en mode paysage ne permet pas de placer 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 mesure au moins 640 pixels de large, forcez deux colonnes en remplaçant la propriété personnalisée --repeat par un nombre au lieu du mot clé auto-fit.

.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 plus 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. Développez et réduisez la taille de votre navigateur, et observez l'espace s'ajuster.
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 claires et sombres
• avoir un jeu de couleurs dérivé d'un code hexadécimal de marque ;
• Utiliser des couleurs accessibles

HSL

Dans la section suivante, vous allez créer un système de couleurs avec HSL pour vous aider à créer un thème clair et un thème sombre. Il repose sur ce concept de base en 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 calculs sur des pourcentages et des angles. Vous pouvez effectuer des calculs de luminosité et de saturation sur ces pourcentages en CSS. Combinez les calculs des canaux de couleur avec des propriétés personnalisées pour obtenir un jeu de couleurs moderne et dynamique où les variantes sont calculées à partir d'une couleur de base. Vous n'aurez ainsi pas à 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 HSL : hsl(200 100% 50%). Cette conversion révèle les canaux de couleur de votre marque en HSL, que vous pouvez utiliser calc() pour calculer différentes couleurs de marque complémentaires.

Remarque : Cette application préfère 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 à utiliser sur les surfaces sombres (sinon, elles peuvent être trop vives ou 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 dans 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 excellent moyen de créer une harmonie visuelle. --text1 est blanc à 85 % et --text2 est blanc à 65 %. 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 HSL et ses canaux interagissent les uns avec les autres. Peut-être que vous préférez une saturation plus ou moins élevée.

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. Lorsque 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 sain entre les plages de luminosité de la surface et du texte permet de garantir des couleurs accessibles aux utilisateurs.

3. Notez que les couleurs commencent par le gris le plus foncé avec 10 % de luminosité et 10 % de saturation, 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 sur les surfaces plus claires. Essayez de régler la saturation de toutes vos surfaces sur 10 %. L'aimez-vous plus ou moins ?

Thème clair

Maintenant que vous disposez d'un ensemble sain de couleurs de texte et de surface spécifiant le thème sombre, il est temps de s'adapter à une préférence de thème clair en mettant à jour les propriétés personnalisées de couleur à l'intérieur d'une requête média prefers-color-scheme.

Vous utiliserez la même technique pour conserver un contraste élevé entre les couleurs de vos surfaces et de votre texte.

Marque

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

Commençons par la couleur de la marque. La saturation doit être rétablie à son niveau maximal.

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 utilisait des couleurs de texte bleu très clair, le thème clair utilise des couleurs de texte bleu très foncé. Si vous voyez 10 % et 30 % comme valeurs de luminosité pour la couleur HSL, cela signifie 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 à briser les motifs. Ce qui pouvait sembler assez raisonnable et linéaire jusqu'à présent est désormais cassé. L'avantage, c'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 claires agréable, ni 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 avez une belle couleur d'accentuation de la marque, deux couleurs de texte et 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 primaires de la page sont les premières couleurs de surface et de texte que vous avez créées, ce qui place également le contraste par défaut à son maximum. Vous pouvez commencer à tester l'activation/la désactivation du mode clair et du mode 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 et l'espace d'un 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. J'espère que vous commencez à comprendre 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 pour mettre en valeur la forme circulaire qui entoure 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 designs dans lesquels les icônes pleines sont légèrement plus claires que le texte permettent d'éviter une impression de surcharge.

.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'un des éléments d'entrée à l'intérieur est en cours d'interaction et cible le SVG pour le mettre en évidence avec l'accent de votre marque. Cela permet d'obtenir un bon retour d'expérience utilisateur du 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 atténué par rapport aux en-têtes et aux paragraphes (contenu principal).

Éléments de contrôle des formulaires sombres

:root {
  color-scheme: dark light;
}

Cette dernière touche indique au navigateur que cette page est compatible avec les thèmes clair et sombre. Le navigateur nous récompense avec des contrôles 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 mouvement de l'utilisateur
• Répondre à l'interaction de l'utilisateur

Mouvements réduits ou absence de mouvements

La préférence utilisateur trouvée dans le système d'exploitation pour le mouvement n'offre pas de valeur sans animation. L'option permet de réduire le mouvement. 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 les mouvements réduits.

Sur cette page de paramètres, il n'y a pas beaucoup de mouvement sur l'écran. Le mouvement est plutôt un effet de mise à l'échelle, comme si l'élément se déplaçait vers l'utilisateur. Il est si simple d'ajuster votre code CSS pour tenir compte de la réduction du mouvement 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 fait avancer un élément, ce qui aide l'utilisateur à se concentrer lorsque le groupe de formulaires contextuels est rapproché de lui.

.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 devient une couleur de surface mise en évidence. Il s'agit d'une autre fonctionnalité d'interface qui permet d'attirer l'attention de l'utilisateur et de signaler que l'entrée est reçue. 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 aucune préférence en matière de réduction des mouvements. Le premier sélecteur et les styles limitent le chemin de masque circulaire de 10 % et définissent certains paramètres de transition. Le deuxième sélecteur et style attendent que les utilisateurs interagissent avec une entrée, puis agrandissent le cercle de l'icône. Un effet subtil, mais soigné quand il est approprié.

7. Félicitations

Branche Git  : complete

Félicitations, vous avez créé une interface adaptative !

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