Contrôler la mise en page macro et micro dans une nouvelle ère du responsive web design.
Le responsive design aujourd'hui
Aujourd'hui, lorsque vous utilisez le terme "responsive design", vous pensez probablement à l'utilisation de requêtes média pour modifier la mise en page lors du redimensionnement d'une conception pour passer de la taille d'un mobile à la taille d'une tablette, en passant par la taille d'un ordinateur.
Mais bientôt, cette perception du responsive design peut être considérée comme obsolète que l'utilisation de tableaux pour la mise en page.
Les requêtes média basées sur la fenêtre d'affichage vous offrent des outils puissants, mais manquent de précision. Ils ne sont pas en mesure de répondre aux besoins des utilisateurs ni d'injecter des styles responsifs dans les composants eux-mêmes.
Vous pouvez utiliser les informations de fenêtre d'affichage globales pour appliquer un style à vos composants, mais ils ne sont toujours pas propriétaires de leur style. Cela ne fonctionne pas lorsque nos systèmes de conception sont basés sur des composants et non sur des pages.
La bonne nouvelle, c'est que l'écosystème évolue et évolue assez rapidement. Le CSS évolue et une nouvelle ère du responsive design se profile à l'horizon.
Cela se produit environ tous les 10 ans. Il y a 10 ans, entre 2010 et 2012, nous avons assisté à un énorme changement avec le mobile et le responsive design, et l'émergence du CSS3.
Là encore, il s'avère que l'écosystème est prêt à intégrer d'importants changements au niveau du CSS. Les ingénieurs de Chrome et de l'ensemble de la plate-forme Web procèdent au prototypage, à la spécification des spécifications et au lancement de la mise en œuvre pour la prochaine ère du responsive design.
Ces mises à jour incluent des fonctionnalités multimédias basées sur les préférences de l'utilisateur, des requêtes de conteneur et des requêtes média pour les nouveaux types d'écrans, tels que les écrans pliables.
Réactivité à l'utilisateur
Les nouvelles fonctionnalités multimédias de préférences utilisateur vous permettent d'adapter le style des expériences Web aux préférences et besoins spécifiques de l'utilisateur. Cela signifie que les fonctionnalités multimédias de préférences vous permettent d'adapter vos expériences utilisateur à celles de vos utilisateurs.
Ces fonctionnalités multimédias de préférences utilisateur incluent:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- Et plus encore
Les fonctionnalités de préférences récupèrent les préférences définies par l'utilisateur dans son système d'exploitation et permettent de créer une expérience Web plus robuste et personnalisée, en particulier pour les utilisateurs ayant des besoins d'accessibilité.
prefers-reduced-motion
Les utilisateurs qui ont défini des préférences de système d'exploitation pour la réduction du mouvement demandent moins d'animations lorsqu'ils utilisent leur ordinateur en général. Par conséquent, il est probable qu'ils n'apprécieraient pas un écran d'introduction tape-à-l'œil, une animation de retournement de carte, un chargeur complexe ou d'autres animations tape-à-l'œil sur le Web.
Avec prefers-reduced-motion, vous pouvez concevoir vos pages en réduisant les mouvements et créer une expérience optimisée pour les personnes qui n'ont pas défini cette préférence.
Cette carte contient des informations de chaque côté. L'expérience à mouvement réduit de référence est un fondu enchaîné qui affiche ces informations, tandis que l'expérience améliorée en cas de mouvement est un retournement de carte.
Préfère un mouvement réduit ne doit pas signifier "aucun mouvement", car les mouvements sont essentiels pour transmettre des informations en ligne. Fournissez plutôt une expérience de base solide qui guide vos utilisateurs sans mouvements inutiles, et améliorez progressivement cette expérience pour vos utilisateurs sans ces besoins ou préférences d'accessibilité.
prefers-color-scheme
prefers-color-scheme est une autre fonctionnalité multimédia de préférence. Cette fonctionnalité vous aide à personnaliser votre interface utilisateur en fonction du thème préféré de votre utilisateur. Dans leur système d'exploitation (sur ordinateur ou sur mobile), les utilisateurs peuvent définir leur préférence pour le thème clair, sombre ou automatique, qui varie en fonction de l'heure de la journée.
Si vous configurez votre page à l'aide des propriétés CSS personnalisées, l'échange des valeurs de couleur est simplifié. Vous pouvez rapidement mettre à jour les valeurs de votre thème de couleurs, telles que backgroundColor et textOnPrimary, pour vous adapter de manière dynamique au nouveau thème dans la requête média.
Pour faciliter le test de certaines de ces requêtes de préférence, vous pouvez utiliser DevTools pour l'émulation au lieu d'ouvrir vos préférences système à chaque fois.
Concevoir pour le thème sombre
Lorsque vous concevez une application pour un thème sombre, il ne s'agit pas seulement d'inverser les couleurs de l'arrière-plan et du texte, ou de barres de défilement sombres. Il y a quelques considérations que vous ne réalisez peut-être pas. Par exemple, vous devrez peut-être désaturer les couleurs sur un arrière-plan sombre pour réduire les vibrations visuelles.
Au lieu d'utiliser des ombres pour créer de la profondeur et dessiner un élément vers l'avant, vous pouvez utiliser de la lumière dans la couleur d'arrière-plan de l'élément pour le faire avancer. En effet, les ombres ne seront pas aussi efficaces sur un arrière-plan sombre.
Les thèmes sombres offrent non seulement une expérience utilisateur plus personnalisée, mais ils peuvent également améliorer considérablement l'autonomie de la batterie sur les écrans AMOLED. Ce sont les écrans des téléphones haut de gamme les plus récents, qui sont de plus en plus populaires sur les appareils mobiles.
Une étude Android de 2018 sur les thèmes sombres a montré qu'elle permet d'économiser jusqu'à 60 % sur la consommation d'énergie, en fonction de la luminosité de l'écran et de l'interface utilisateur globale. La statistique de 60% provient de la comparaison de l'écran de lecture YouTube avec une vidéo mise en pause avec une luminosité de 100% en utilisant le thème sombre pour l'interface utilisateur de l'application et un thème clair.
Dans la mesure du possible, vous devez toujours proposer un thème sombre à vos utilisateurs.
S'adapte au conteneur
Les requêtes de conteneur, également fréquemment appelées requêtes d'élément, font partie des domaines émergents les plus intéressants du code CSS. Il est difficile de sous-estimer ce que le passage du responsive design basé sur les pages au responsive design basé sur des conteneurs permettra de faire pour faire évoluer l'écosystème de conception.
Voici un exemple des fonctionnalités puissantes offertes par les requêtes de conteneur. Vous pouvez manipuler n'importe quel style de l'élément de la carte, y compris la liste des liens, les tailles de police et la mise en page globale, en fonction de son conteneur parent:
Cet exemple montre deux composants identiques avec deux tailles de conteneur différentes, qui occupent tous deux de la place dans une mise en page créée à l'aide de la grille CSS. Chaque composant s'adapte à son espace d'attribution unique et s'adapte à lui-même en conséquence.
Ce niveau de flexibilité est quelque chose qui n'est pas possible avec les requêtes média seules.
Les requêtes de conteneur offrent une approche beaucoup plus dynamique du responsive design. Cela signifie que si vous placez ce composant de carte dans une barre latérale, une section principale ou une grille du corps principal d'une page, le composant lui-même possède ses informations responsives et ses tailles en fonction du conteneur, et non de la fenêtre d'affichage.
Cela nécessite la règle at @container. Elle fonctionne de la même manière qu'une requête média avec @media, mais @container interroge le conteneur parent pour obtenir des informations plutôt que la fenêtre d'affichage et l'user-agent.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
Tout d'abord, définissez le confinement sur l'élément parent. Rédigez ensuite une requête @container pour appliquer un style à n'importe quel élément du conteneur en fonction de sa taille, à l'aide de min-width ou de max-width.
Le code ci-dessus utilise max-width et définit les liens sur display:none, et réduit la taille de la police temporelle lorsque la largeur du conteneur est inférieure à 850px.
Fiches de requêtes de conteneur
Sur le site Web de cette usine de démonstration, chacune des fiches produit, y compris celle de l'image héros, de la barre latérale des articles récemment consultés et de la grille de produits, est exactement le même composant, avec le même balisage.
Il n'existe aucune requête média utilisée pour créer l'ensemble de cette mise en page, uniquement des requêtes de conteneur. Cela permet à chaque fiche de produit de passer à la mise en page appropriée pour remplir son espace. La grille, par exemple, utilise une mise en page en colonnes minmax pour laisser les éléments s'insérer dans leur espace et remet en page la grille lorsque cet espace est trop compressé (ce qui signifie qu'il a atteint la taille minimale).
.product {
container-type: inline-size;
}
@container (min-width: 350px) {
.card-container {
padding: 0.5rem 0 0;
display: flex;
}
.card-container button {
/* ... */
}
}
Lorsqu'il y a au moins 350px d'espace dans la grille, la mise en page de la carte est horizontale en étant définie sur display: flex, dont la direction flexible par défaut est "ligne".
Avec moins d'espace, les fiches produit s'empilent. Chaque fiche produit se définit automatiquement, ce qui serait impossible avec des styles globaux seuls.
Combiner des requêtes de conteneur avec des requêtes médias
Les requêtes de conteneur ont de nombreux cas d'utilisation, l'un d'entre eux étant un composant d'agenda. Vous pouvez utiliser des requêtes de conteneur pour remettre en page les événements d'agenda et d'autres segments en fonction de la largeur disponible de leur parent.
Ce conteneur de démonstration permet de modifier la mise en page et le style de la date et du jour de la semaine de l'agenda, ainsi que d'ajuster les marges et la taille de la police des événements planifiés pour les aider à mieux s'adapter à l'espace.
Ensuite, utilisez une requête média pour déplacer toute la mise en page pour les écrans de plus petite taille. Cet exemple montre à quel point il est efficace de combine des requêtes média (ajuster les styles globaux ou macro) avec des requêtes de conteneur (ajuster les enfants du conteneur et leurs microstyles).
Nous pouvons désormais envisager des mises en page Macro et Micro dans le même composant d'interface utilisateur afin de prendre des décisions de conception très nuancées.
Utiliser les requêtes de conteneurs aujourd'hui
Vous pouvez désormais utiliser ces démos derrière un drapeau dans Chrome Canary. Accédez à about://flags dans Canary et activez l'option #enable-container-queries.
Cela permettra la prise en charge des valeurs @container, inline-size et block-size pour la propriété contain, ainsi que l'implémentation de la grille LayoutNG.
Cet indicateur active également les fonctionnalités correspondantes des outils pour les développeurs Chrome. Découvrez comment inspecter et déboguer des requêtes de conteneur dans les outils de développement.
Styles associés à la portée
Pour s'appuyer sur des requêtes de conteneur, le groupe de travail CSS discute également activement des styles de champ d'application pour l'aider à définir l'espace de noms approprié et à éviter les collisions pour les composants.
Les styles cloisonnés permettent un style passthrough et spécifique au composant pour éviter les conflits de noms, ce que de nombreux frameworks et plug-ins, tels que les modules CSS, nous permettent déjà de faire dans les frameworks. Cette spécification nous permet désormais d'écrire des styles encapsulés de manière native pour nos composants avec du code CSS lisible sans avoir à ajuster le balisage.
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
Le champ d'application nous permettrait de créer des sélecteurs en forme de beignet, dans lesquels nous pouvons spécifier où conserver un style encapsulé et où sortir de ce style restreint pour revenir à un style plus global.
Il peut s'agir, par exemple, d'un panneau d'onglets, où les onglets obtiendraient le style de champ d'application, et le panneau des onglets d'un style parent.
Adaptation au facteur de forme
Le prochain sujet de notre conversation sur la nouvelle ère du responsive design est le changement des facteurs de forme et les possibilités croissantes de conception pour une communauté Web (comme le changement de forme d'écran ou la réalité virtuelle).
Les écrans pliables ou flexibles, ainsi que la conception pour s'étendre sur un écran, sont un exemple d'un changement de facteur de forme que l'on observe aujourd'hui. L'étendue d'écran est une autre spécification en cours de développement pour couvrir ces nouveaux facteurs de forme et ces nouveaux besoins.
Une requête média expérimentale pour l'étendue de l'écran pourrait nous aider. Il se comporte actuellement comme suit: @media
(spanning: <type of fold>). La démonstration configure une mise en page en grille avec deux colonnes : l'une a une largeur de --sidebar-width, qui est de 5rem par défaut, et l'autre est 1fr. Lorsque la mise en page est affichée sur un double écran avec un seul pli vertical, la valeur de --sidebar-width est mise à jour avec la valeur d'environnement du pli de gauche.
:root {
--sidebar-width: 5rem;
}
@media (spanning: single-fold-vertical) {
--sidebar-width: env(fold-left);
}
main {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}
Cela permet une mise en page où la barre latérale (la navigation dans ce cas) remplit l'espace de l'un des plis, où l'interface utilisateur de l'application remplit l'autre. Cela permet d'éviter une "pliure" dans l'interface utilisateur.
Vous pouvez tester les écrans pliables dans l'émulateur d'outils pour les développeurs Chrome afin de faciliter le débogage et le prototype d'écran qui s'affiche directement dans le navigateur.
Conclusion
L'exploration de la conception d'interface utilisateur au-delà d'un écran plat est une autre raison pour laquelle les requêtes de conteneur et les styles restreints sont si importants. Ils vous permettent de cloisonner les styles de composants de la mise en page, des styles globaux et des styles utilisateur, ce qui permet une conception responsive plus résiliente. Cela signifie que vous pouvez désormais concevoir des mises en page macro à l'aide de requêtes média basées sur les pages, y compris des nuances couvrant l'écran. En parallèle, utilisez des micromises en page avec des requêtes de conteneur sur les composants, et ajoutez des requêtes média basées sur les préférences de l'utilisateur pour personnaliser l'expérience utilisateur en fonction de ses préférences et besoins uniques.
Il s'agit du nouveau format responsif.
Il combine une mise en page macro et une micro-mise en page, et en plus de tout cela, il tient compte de la personnalisation de l'utilisateur et du facteur de forme.
Chacun de ces changements constituerait un changement considérable dans la conception de notre site Web. Mais une fois combinés, ils changent radicalement la façon dont nous concevons le responsive design. Il est temps d'envisager le responsive design au-delà de la taille de la fenêtre d'affichage, et de commencer à envisager tous ces nouveaux axes pour de meilleures expériences personnalisées basées sur des composants.
La prochaine ère du responsive design est arrivée, et vous pouvez déjà commencer à l'explorer par vous-même.
web.dev/learnCSS
Pour le moment, si vous souhaitez améliorer votre jeu CSS et revoir certains principes de base, mon équipe lance un tout nouveau cours CSS entièrement sans frais, disponible sur web.dev. Vous pouvez y accéder via web.dev/learnCSS.
J'espère que vous avez apprécié cette présentation de la prochaine ère du responsive design, ainsi que certaines des primitives qui l'accompagneront. J'espère également que vous êtes aussi enthousiaste que moi quant à ce que cela signifie pour l'avenir de la conception Web.
En tant que communauté d'UI, cela représente une excellente occasion d'adopter des styles basés sur des composants, de nouveaux facteurs de forme et de créer des expériences réactives à l'utilisateur.