État du CSS 2022

Fonctionnalités de style Web d'aujourd'hui et de demain, comme celles présentées à Google IO 2022, ainsi que quelques extras.

Adam Argyle

L'année 2022 s'annonce comme l'une des plus importantes pour les CSS, tant en termes de fonctionnalités que de sorties de fonctionnalités de navigateur coopératives, avec un objectif de collaboration pour implémenter 14 fonctionnalités !

Présentation

Cet article est la version écrite de la conférence donnée lors de Google IO 2022. Il ne s'agit pas d'un guide détaillé sur chaque fonctionnalité, mais plutôt d'une introduction et d'un bref aperçu pour susciter votre intérêt, en vous offrant une vue d'ensemble plutôt qu'un approfondissement. Si vous êtes intéressé, consultez la fin d'une section pour accéder à des liens vers des ressources qui vous fourniront plus d'informations.

Sommaire

Utilisez la liste ci-dessous pour accéder aux thèmes qui vous intéressent :

Compatibilité du navigateur

La raison principale pour laquelle autant de fonctionnalités CSS sont définies pour une publication coopérative est liée aux efforts d'Interop 2022. Avant d'étudier les efforts d'Interop, il est important d'examiner ceux de Compat 2021.

Compat 2021

Les objectifs pour 2021, basés sur les commentaires des développeurs recueillis lors d'enquêtes, étaient de stabiliser les fonctionnalités actuelles, d'améliorer la suite de tests et d'augmenter les scores de réussite des navigateurs pour cinq fonctionnalités :

1. Positionnement sticky
2. aspect-ratio dimensionnement
3. Mise en page flex
4. Mise en page grid
5. Positionnement et animation transform

Les scores des tests ont été améliorés dans tous les domaines, ce qui témoigne d'une stabilité et d'une fiabilité accrues. Félicitations à toutes les équipes !

Interop 2022

Cette année, les navigateurs se sont réunis pour discuter des fonctionnalités et des priorités sur lesquelles ils prévoyaient de travailler, unissant ainsi leurs efforts. Ils prévoyaient de fournir les fonctionnalités Web suivantes pour les développeurs :

1. @layer
2. Espaces et fonctions de couleur
3. Confinement
4. <dialog>
5. Compatibilité des formulaires
6. Défilement
7. Sous-grille
8. Typographie
9. Unités de la fenêtre d'affichage
10. Compatibilité Web

C'est une liste passionnante et ambitieuse que j'ai hâte de découvrir.

Nouveautés pour 2022

Sans surprise, l'état du CSS en 2022 est fortement impacté par le travail d'Interop 2022.

Calques en cascade

Avant @layer, l'ordre de découverte des feuilles de style chargées était très important, car les styles chargés en dernier peuvent remplacer les styles chargés précédemment. Cela a conduit à des feuilles de style d'entrée méticuleusement gérées, où les développeurs devaient charger les styles les moins importants en premier et les styles les plus importants plus tard. Des méthodologies entières existent pour aider les développeurs à gérer cette importance, comme ITCSS.

Avec @layer, le fichier d'entrée peut prédéfinir les calques et leur ordre. Ensuite, à mesure que les styles sont chargés ou définis, ils peuvent être placés dans un calque, ce qui permet de préserver l'importance de la substitution de style, mais sans l'orchestration de chargement gérée de manière méticuleuse.

La vidéo montre comment les calques en cascade définis permettent un processus de création et de chargement plus libre et plus freestyle, tout en conservant la cascade si nécessaire.

Les outils pour les développeurs Chrome sont utiles pour visualiser les styles provenant de différentes couches :

Ressources

• Spécification CSS Cascade 5
• Explication des calques en cascade
• Couches en cascade sur MDN
• Una Kravets : Cascade Layers
• Ahmad Shadeed : Bonjour, les calques de cascade CSS

Sous-grille

Avant subgrid, une grille à l'intérieur d'une autre grille ne pouvait pas s'aligner sur ses cellules ou lignes de grille parentes. Chaque mise en page en grille était unique. De nombreux concepteurs placent une seule grille sur l'ensemble de leur conception et alignent constamment les éléments à l'intérieur, ce qui ne peut pas être fait en CSS.

Après subgrid, un enfant d'une grille peut adopter les colonnes ou les lignes de ses parents comme les siennes, et s'aligner ou aligner ses enfants sur celles-ci.

Dans la démo suivante, l'élément body crée une grille classique de trois colonnes : la colonne du milieu est appelée main, et les colonnes de gauche et de droite nomment leurs lignes fullbleed. Ensuite, chaque élément du corps, <nav> et <main>, adopte les lignes nommées du corps en définissant grid-template-columns: subgrid.

​​body {
  display: grid;
  grid-template-columns:
    [fullbleed-start]
    auto [main-start] min(90%, 60ch) [main-end] auto
    [fullbleed-end]
  ;
}

body > * {
  display: grid;
  grid-template-columns: subgrid;
}

Enfin, les enfants de <nav> ou <main> peuvent s'aligner ou se dimensionner à l'aide des colonnes et des lignes fullbleed et main.

.main-content {
  grid-column: main;
}

.fullbleed {
  grid-column: fullbleed;
}

Les outils de développement peuvent vous aider à visualiser les lignes et les sous-grilles (Firefox uniquement pour le moment). Dans l'image suivante, la grille parente et les sous-grilles ont été superposées. Il ressemble désormais à la façon dont les concepteurs envisageaient la mise en page.

Dans le panneau "Éléments" des outils de développement, vous pouvez voir quels éléments sont des grilles et des sous-grilles, ce qui est très utile pour déboguer ou valider la mise en page.

Ressources

• Spécification de la sous-grille
• Sous-grille sur MDN
• Bramus : Tutoriels vidéo pratiques sur les sous-grilles CSS

Requêtes de conteneur

Avant @container, les éléments d'une page Web ne pouvaient répondre qu'à la taille de l'ensemble de la fenêtre d'affichage. C'est idéal pour les mises en page macro, mais pour les mises en page micro, où leur conteneur externe n'est pas l'intégralité de la fenêtre d'affichage, il est impossible pour la mise en page de s'adapter en conséquence.

Après @container, les éléments peuvent répondre à la taille ou au style d'un conteneur parent. La seule mise en garde est que les conteneurs doivent se déclarer comme cibles de requêtes possibles, ce qui est une petite exigence pour un grand avantage.

/* establish a container */
.day {
  container-type: inline-size;
  container-name: calendar-day;
}

Ces styles permettent d'interroger les colonnes "Lun", "Mar", "Mer", "Jeu" et "Ven" dans la vidéo suivante à l'aide des éléments d'événement.

Voici le code CSS permettant d'interroger le conteneur calendar-day pour connaître sa taille, puis d'ajuster une mise en page et la taille des polices :

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }

  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}

Voici un autre exemple : un composant de livre s'adapte à l'espace disponible dans la colonne dans laquelle il est déplacé :

Una a raison de considérer la situation comme la nouvelle conception responsives. Vous devrez prendre de nombreuses décisions de conception intéressantes et importantes lorsque vous utiliserez @container.

Ressources

• Spécification des requêtes de conteneur
• Explication des requêtes de conteneur
• Requêtes de conteneur sur MDN
• Le nouveau responsive sur web.dev
• Démonstration de l'agenda par Una
• Awesome container queries collection
• Comment nous avons créé Designcember sur web.dev
• Ahmad Shadeed : Say Hello To CSS Container Queries

accent-color

Avant accent-color, lorsque vous souhaitiez créer un formulaire avec des couleurs correspondant à votre marque, vous pouviez vous retrouver avec des bibliothèques ou des solutions CSS complexes qui devenaient difficiles à gérer au fil du temps. Bien qu'ils vous aient donné toutes les options et, espérons-le, inclus l'accessibilité, le choix d'utiliser les composants intégrés ou d'adopter les vôtres devient fastidieux.

Après accent-color, une ligne de CSS apporte une couleur de marque aux composants intégrés. En plus d'une teinte, le navigateur choisit intelligemment les couleurs de contraste appropriées pour les parties auxiliaires du composant et s'adapte aux schémas de couleurs du système (clair ou sombre).

/* tint everything */
:root {
  accent-color: hotpink;
}

/* tint one element */
progress {
  accent-color: indigo;
}

Pour en savoir plus sur accent-color, consultez mon article sur web.dev, où j'explore de nombreux autres aspects de cette propriété CSS utile.

Ressources

• Spécification accent-color
• accent-color sur MDN
• accent-color sur web.dev
• Bramus : Teinter les contrôles de l'interface utilisateur avec la propriété CSS accent-color

Niveaux de couleur 4 et 5

Le Web a été dominé par sRGB au cours des dernières décennies, mais dans un monde numérique en expansion avec des écrans haute définition et des appareils mobiles pré-équipés d'écrans OLED ou QLED, sRGB ne suffit plus. De plus, les pages dynamiques qui s'adaptent aux préférences des utilisateurs sont attendues, et la gestion des couleurs est une préoccupation croissante pour les concepteurs, les systèmes de conception et les responsables de la maintenance du code.

Mais pas en 2022 : le CSS propose de nouvelles fonctions et espaces de couleur : - Des couleurs qui exploitent les capacités de couleur HD des écrans. - Espaces colorimétriques correspondant à une intention, comme l'uniformité perceptuelle. - Espaces colorimétriques pour les dégradés qui modifient considérablement les résultats de l'interpolation. - Des fonctions de couleur pour vous aider à mélanger et à contraster les couleurs, et à choisir l'espace dans lequel vous travaillez.

Avant toutes ces fonctionnalités de couleur, les systèmes de conception devaient précalculer les couleurs de contraste appropriées et s'assurer que les palettes étaient suffisamment vives, tandis que les préprocesseurs ou JavaScript faisaient le gros du travail.

Avec toutes ces fonctionnalités de couleur, le navigateur et le CSS peuvent faire tout le travail, de manière dynamique et juste à temps. Au lieu d'envoyer de nombreux Ko de CSS et de JavaScript aux utilisateurs pour leur permettre de choisir des couleurs de thème et de visualisation de données, CSS peut orchestrer et effectuer les calculs. Le CSS est également mieux équipé pour vérifier la compatibilité avant utilisation ou gérer les solutions de repli de manière fluide.

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

hwb()

HWB signifie teinte, blancheur et noirceur. Il s'agit d'une façon simple d'exprimer une couleur, car il s'agit simplement d'une teinte et d'une quantité de blanc ou de noir pour l'éclaircir ou l'assombrir. Les artistes qui mélangent des couleurs avec du blanc ou du noir apprécieront peut-être cette nouvelle syntaxe de couleur.

L'utilisation de cette fonction de couleur génère des couleurs de l'espace colorimétrique sRVB, comme HSL et RVB. En termes de nouveautés pour 2022, cela ne vous donne pas de nouvelles couleurs, mais cela peut faciliter certaines tâches pour les fans de la syntaxe et du modèle mental.

Ressources

• Spécification HWB
• HWB sur MDN
• Stefan Judis : hwb() – a color notation for humans?

Espaces colorimétriques

Les couleurs sont représentées à l'aide d'un espace colorimétrique. Chaque espace colorimétrique offre différentes fonctionnalités et différents compromis pour travailler avec les couleurs. Certains peuvent regrouper toutes les couleurs vives, tandis que d'autres peuvent les aligner d'abord en fonction de leur luminosité.

Le CSS de 2022 devrait proposer 10 nouveaux espaces colorimétriques, chacun avec des fonctionnalités uniques pour aider les concepteurs et les développeurs à afficher, sélectionner et mélanger les couleurs. Auparavant, sRVB était la seule option pour travailler avec les couleurs, mais désormais, CSS ouvre de nouvelles possibilités et un nouvel espace colorimétrique par défaut, LCH.

color-mix()

Avant color-mix(), les développeurs et les concepteurs avaient besoin de préprocesseurs comme Sass pour mélanger les couleurs avant que le navigateur ne les voie. La plupart des fonctions de mélange de couleurs ne permettaient pas non plus de spécifier l'espace colorimétrique dans lequel effectuer le mélange, ce qui entraînait parfois des résultats déroutants.

Après color-mix(), les développeurs et les concepteurs peuvent mélanger les couleurs dans le navigateur, en plus de tous leurs autres styles, sans exécuter de processus de compilation ni inclure de JavaScript. Ils peuvent également spécifier l'espace colorimétrique dans lequel effectuer le mélange ou utiliser l'espace colorimétrique de mélange par défaut LCH.

Souvent, une couleur de marque est utilisée comme base et des variantes sont créées à partir de celle-ci, comme des couleurs plus claires ou plus foncées pour les styles de survol. Voici à quoi cela ressemble avec color-mix() :

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

Si vous souhaitez mélanger ces couleurs dans un autre espace colorimétrique, comme srgb, modifiez-le :

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(in srgb, var(--brand) 25%, black);
  --lighter: color-mix(in srgb, var(--brand) 25%, white);
}

Voici une démonstration de la création de thèmes à l'aide de color-mix(). Essayez de modifier la couleur de la marque et regardez le thème se mettre à jour :

Profitez de la combinaison de couleurs dans différents espaces colorimétriques dans vos feuilles de style en 2022 !

Ressources

• Spécification color-mix()
• color-mix() sur MDN
• Démonstration de la création de thèmes
• Autre démonstration de thématisation
• Fabio Giolito : Créer un thème de couleurs avec ces futures fonctionnalités CSS

color-contrast()

Avant color-contrast(), les auteurs de feuilles de style devaient connaître à l'avance les couleurs accessibles. Souvent, une palette affiche du texte noir ou blanc sur un échantillon de couleur, pour indiquer à l'utilisateur du système de couleurs la couleur de texte nécessaire pour contraster correctement avec cet échantillon.

Après color-contrast(), les auteurs de feuilles de style peuvent entièrement décharger la tâche sur le navigateur. Non seulement vous pouvez utiliser le navigateur pour choisir automatiquement une couleur noire ou blanche, mais vous pouvez également lui fournir une liste de couleurs adaptées au système de conception et lui demander de choisir la première qui respecte le rapport de contraste souhaité.

Voici une capture d'écran d'une démonstration de l'ensemble de palettes de couleurs HWB où les couleurs du texte sont automatiquement choisies par le navigateur en fonction de la couleur de l'échantillon :

Voici les bases de la syntaxe, où le gris est transmis à la fonction et où le navigateur détermine si le noir ou le blanc offrent le plus de contraste :

color: color-contrast(gray);

La fonction peut également être personnalisée avec une liste de couleurs, à partir de laquelle elle choisira la couleur la plus contrastée de la sélection :

color: color-contrast(gray vs indigo, rebeccapurple, hotpink);

Enfin, si vous préférez ne pas choisir la couleur la plus contrastée de la liste, vous pouvez fournir un rapport de contraste cible. La première couleur qui le dépasse sera alors choisie :

color: color-contrast(
  var(--bg-blue-1)
  vs
  var(--text-lightest), var(--text-light), var(--text-subdued)
  to AA /* 4.5 could also be passed */
);

Cette fonction peut être utilisée pour plus que la couleur du texte, mais j'estime que ce sera son cas d'utilisation principal. Imaginez à quel point il sera plus facile de proposer des interfaces accessibles et lisibles une fois que le choix de couleurs contrastées appropriées sera intégré au langage CSS lui-même.

Ressources

• Spécification color-contrast()
• color-contrast() sur MDN
• Démo

Syntaxe des couleurs relatives

Avant la syntaxe de couleur relative, pour effectuer des calculs sur une couleur et l'ajuster, les canaux de couleur devaient être placés individuellement dans des propriétés personnalisées. Cette limitation a également fait de HSL la fonction de couleur principale pour manipuler les couleurs, car la teinte, la saturation ou la luminosité pouvaient toutes être ajustées de manière simple avec calc().

Après la syntaxe de couleur relative, n'importe quelle couleur dans n'importe quel espace peut être déconstruite, modifiée et renvoyée en tant que couleur, le tout en une seule ligne de CSS. Plus de limitations pour HSL : les manipulations peuvent être effectuées dans n'importe quel espace colorimétrique souhaité, et il est nécessaire de créer beaucoup moins de propriétés personnalisées pour faciliter cela.

Dans l'exemple de syntaxe suivant, une base hexadécimale est fournie et deux nouvelles couleurs sont créées par rapport à celle-ci. La première couleur --absolute-change crée une couleur LCH à partir de la couleur de base, puis remplace la luminosité de la couleur de base par 75%, tout en conservant la chroma (c) et la teinte (h). La deuxième couleur --relative-change crée une couleur LCH à partir de la couleur de base, mais cette fois, elle réduit la chroma (c) de 20 %.

.relative-color-syntax {
  --color: #0af;
  --absolute-change: lch(from var(--color) 75% c h);
  --relative-change: lch(from var(--color) l calc(c-20%) h);
}

Cela s'apparente à un mélange de couleurs, mais il s'agit davantage d'une modification que d'un mélange. Vous pouvez caster une couleur à partir d'une autre couleur, ce qui vous donne accès aux trois valeurs de canal telles que nommées par la fonction de couleur utilisée, avec la possibilité d'ajuster ces canaux. En résumé, il s'agit d'une syntaxe très intéressante et puissante pour les couleurs.

Dans la démo suivante, j'ai utilisé la syntaxe de couleur relative pour créer des variantes plus claires et plus foncées d'une couleur de base, et j'ai utilisé color-contrast() pour m'assurer que les libellés avaient un contraste approprié :

Cette fonction peut également être utilisée pour générer une palette de couleurs. Voici une démo où des palettes entières sont générées à partir d'une couleur de base fournie. Cet ensemble de CSS alimente toutes les palettes, chacune d'elles fournissant simplement une base différente. En prime, puisque j'ai utilisé LCH, regardez à quel point les palettes sont perceptuellement uniformes : grâce à cet espace colorimétrique, il n'y a pas de points chauds ni de points morts.

:root {
  --_color-base: #339af0;

  --color-0:  lch(from var(--_color-base) 98% 10 h);
  --color-1:  lch(from var(--_color-base) 93% 20 h);
  --color-2:  lch(from var(--_color-base) 85% 40 h);
  --color-3:  lch(from var(--_color-base) 75% 46 h);
  --color-4:  lch(from var(--_color-base) 66% 51 h);
  --color-5:  lch(from var(--_color-base) 61% 52 h);
  --color-6:  lch(from var(--_color-base) 55% 57 h);
  --color-7:  lch(from var(--_color-base) 49% 58 h);
  --color-8:  lch(from var(--_color-base) 43% 55 h);
  --color-9:  lch(from var(--_color-base) 39% 52 h);
  --color-10: lch(from var(--_color-base) 32% 48 h);
  --color-11: lch(from var(--_color-base) 25% 45 h);
  --color-12: lch(from var(--_color-base) 17% 40 h);
  --color-13: lch(from var(--_color-base) 10% 30 h);
  --color-14: lch(from var(--_color-base) 5% 20 h);
  --color-15: lch(from var(--_color-base) 1% 5 h);
}

Nous espérons que vous comprenez maintenant comment les espaces colorimétriques et les différentes fonctions de couleur peuvent tous être utilisés à des fins différentes, en fonction de leurs points forts et de leurs points faibles.

Ressources

• Spécification de la syntaxe des couleurs relatives
• Créer des palettes de couleurs avec la syntaxe de couleur relative
• Créer des variantes de couleur avec la syntaxe de couleur relative

Espaces colorimétriques de dégradé

Avant les espaces de couleur de dégradé, l'espace de couleur sRVB était utilisé par défaut. sRVB est généralement fiable, mais présente quelques faiblesses, comme la zone morte grise.

Après les espaces de couleur du dégradé, indiquez au navigateur l'espace de couleur à utiliser pour l'interpolation des couleurs. Les développeurs et les concepteurs peuvent ainsi choisir le dégradé de leur choix. L'espace colorimétrique par défaut passe également à LCH au lieu de sRVB.

L'ajout de syntaxe se fait après la direction du dégradé, utilise la nouvelle syntaxe in et est facultatif :

background-image: linear-gradient(
  to right in hsl,
  black, white
);

background-image: linear-gradient(
  to right in lch,
  black, white
);

Voici un dégradé de base et essentiel, du noir au blanc. Examinez la plage de résultats dans chaque espace colorimétrique. Certains atteignent le noir foncé plus tôt que d'autres, tandis que certains s'estompent trop tard.

Dans l'exemple suivant, le noir est remplacé par du bleu, car il s'agit d'un espace de problème connu pour les dégradés. La plupart des espaces colorimétriques se rapprochent du violet lors de l'interpolation des couleurs ou, comme je l'appelle, lorsque les couleurs se déplacent dans leur espace colorimétrique du point A au point B. Étant donné que le dégradé suivra une ligne droite du point A au point B, la forme de l'espace colorimétrique modifie radicalement les arrêts effectués par le chemin en cours de route.

Pour en savoir plus, obtenir des exemples et lire des commentaires, consultez ce thread Twitter.

Ressources

• Spécification de l'interpolation de dégradé
• Démonstration comparant les gradients dans les espaces
• Notebook Observable comparant les gradients

inert

Avant inert, il était recommandé de guider l'attention de l'utilisateur vers les zones de la page ou de l'application qui nécessitaient une attention immédiate. Cette stratégie de mise au point guidée est devenue connue sous le nom de "piège de mise au point" (focus trapping) parce que les développeurs plaçaient la mise au point dans un espace interactif, écoutaient les événements de changement de mise au point et, si la mise au point quittait l'espace interactif, elle était forcée d'y revenir. Les utilisateurs qui utilisent un clavier ou un lecteur d'écran sont redirigés vers l'espace interactif pour s'assurer que la tâche est terminée avant de passer à la suivante.

Après inert, aucun piège n'est nécessaire, car vous pouvez figer ou protéger des sections entières de la page ou de l'application. Les tentatives de clic et de changement de focus ne sont tout simplement pas disponibles lorsque ces parties d'un document sont inertes. On peut aussi considérer cela comme des gardes plutôt que comme un piège, où inert ne cherche pas à vous faire rester quelque part, mais plutôt à rendre d'autres endroits indisponibles.

Un bon exemple est la fonction JavaScript alert() :

Dans la vidéo précédente, vous avez pu constater que la page était accessible à la souris et au clavier jusqu'à ce qu'un alert() soit appelé. Une fois la boîte de dialogue d'alerte affichée, le reste de la page était figé ou inert. L'utilisateur est concentré sur la boîte de dialogue d'alerte et ne peut pas faire autre chose. Une fois qu'il a interagi et terminé la demande de fonction d'alerte, la page redevient interactive. inert permet aux développeurs d'obtenir facilement la même expérience de mise au point guidée.

Voici un petit exemple de code pour illustrer le fonctionnement :

<body>
  <div class="modal">
    <h2>Modal Title</h2>
    <p>...<p>
    <button>Save</button>
    <button>Discard</button>
  </div>
  <main inert>
    <!-- cannot be keyboard focused or clicked -->
  </main>
</body>

Les boîtes de dialogue sont un excellent exemple, mais inert est également utile pour des éléments tels que l'expérience utilisateur du menu latéral coulissant. Lorsqu'un utilisateur fait glisser le menu latéral, il n'est pas acceptable de laisser la souris ou le clavier interagir avec la page située derrière. C'est un peu délicat pour les utilisateurs. Au lieu de cela, lorsque le menu latéral s'affiche, rendez la page inerte. Les utilisateurs doivent désormais fermer ou parcourir ce menu latéral, et ne se perdront plus ailleurs sur la page avec un menu ouvert.

Ressources

• Spécification inerte
• Inert on MDN
• Chrome Developers : présentation de l'attribut "inert"

Polices COLRv1

Avant les polices COLRv1, le Web utilisait les polices OT-SVG, qui sont également un format ouvert pour les polices avec des dégradés, des couleurs et des effets intégrés. Cependant, ces bulles pouvaient devenir très grandes et, bien qu'elles permettent de modifier le texte, les possibilités de personnalisation étaient limitées.

Après les polices COLRv1, le Web propose des polices plus petites, vectorielles et redimensionnables, repositionnables, avec des dégradés et des modes de fusion, qui acceptent des paramètres pour personnaliser la police en fonction du cas d'utilisation ou pour l'adapter à une marque.

Voici un exemple tiré de l'article de blog Chrome Developer sur les emoji. Vous avez peut-être remarqué que si vous augmentez la taille de la police d'un emoji, il ne reste pas net. Il s'agit d'une image et non d'un dessin vectoriel. Souvent, dans les applications, lorsqu'un emoji est utilisé, il est remplacé par un élément de meilleure qualité. Avec les polices COLRv1, les emoji sont vectoriels et magnifiques :

Les polices d'icônes pourraient faire des choses étonnantes avec ce format, en proposant des palettes de couleurs bicolores personnalisées, et plus encore. Le chargement d'une police COLRv1 est identique à celui de tout autre fichier de police :

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

La personnalisation de la police COLRv1 s'effectue avec @font-palette-values, une règle CSS spéciale pour regrouper et nommer un ensemble d'options de personnalisation dans un bundle pour référence ultérieure. Notez que vous spécifiez un nom personnalisé comme une propriété personnalisée, en commençant par -- :

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

Avec --colorized comme alias pour les personnalisations, la dernière étape consiste à appliquer la palette à un élément qui utilise la famille de polices de couleur :

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

Avec la disponibilité croissante des polices variables et des polices en couleur, la typographie Web est en passe de devenir un outil de personnalisation riche et d'expression créative.

Ressources

• Spécification Colrv1 sur GitHub
• Développeurs Chrome : polices Colrv1
• Vidéo explicative pour les développeurs BlinkOn

Unités de la fenêtre d'affichage

Avant les nouvelles variantes de fenêtre d'affichage, le Web proposait des unités physiques pour aider à ajuster les fenêtres d'affichage. Il y en avait un pour la hauteur, la largeur, la plus petite taille (vmin) et le plus grand côté (vmax). Ces outils ont bien fonctionné pour de nombreuses choses, mais les navigateurs mobiles ont introduit une complexité.

Sur mobile, lors du chargement d'une page, la barre d'état avec l'URL s'affiche et consomme une partie de l'espace de la fenêtre d'affichage. Au bout de quelques secondes et après une certaine interactivité, la barre d'état peut disparaître pour offrir à l'utilisateur une expérience de fenêtre d'affichage plus grande. Mais lorsque cette barre se déploie, la hauteur de la fenêtre d'affichage change. Toutes les unités vh se déplacent et sont redimensionnées à mesure que leur taille cible change. Plus tard, l'unité vh a dû décider quelle taille de fenêtre d'affichage elle allait utiliser, car cela entraînait des problèmes de mise en page visuelle sur les appareils mobiles. Il a été déterminé que vh représenterait toujours la plus grande fenêtre d'affichage.

.original-viewport-units {
  height: 100vh;
  width: 100vw;
  --size: 100vmin;
  --size: 100vmax;
}

Après l'ajout des nouvelles variantes de fenêtre d'affichage (petites, grandes et dynamiques), des équivalents logiques aux unités physiques sont disponibles. L'idée est de permettre aux développeurs et aux concepteurs de choisir l'unité qu'ils souhaitent utiliser pour leur scénario. Il est peut-être acceptable d'avoir un petit décalage de mise en page lorsque la barre d'état disparaît. Dans ce cas, dvh (hauteur de fenêtre d'affichage dynamique) peut être utilisé sans problème.

Voici la liste complète des nouvelles options d'unités de fenêtre d'affichage disponibles avec les nouvelles variantes de fenêtre d'affichage :

​​.new-height-viewport-units {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  height: 100lvh;
  block-size: 100vb;
  block-size: 100dvb;
  block-size: 100svb;
  block-size: 100lvb;
}

.new-width-viewport-units {
  width: 100vw;
  width: 100dvw;
  width: 100svw;
  width: 100lvw;
  inline-size: 100vi;
  inline-size: 100dvi;
  inline-size: 100svi;
  inline-size: 100lvi;
}

.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}

.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

Nous espérons que ces valeurs donneront aux développeurs et aux concepteurs la flexibilité nécessaire pour créer des conceptions réactives pour la fenêtre d'affichage.

Ressources

• Spécification des unités relatives à la fenêtre d'affichage
• Bramus : The Large, Small, and Dynamic Viewports

:has()

Avant :has(), le sujet d'un sélecteur était toujours à la fin. Par exemple, l'objet de ce sélecteur est un élément de liste : ul > li. Les pseudo-sélecteurs peuvent modifier le sélecteur, mais pas le sujet : ul > li:hover ou ul > li:not(.selected).

Après :has(), un sujet plus haut dans l'arborescence des éléments peut rester le sujet tout en fournissant une requête sur les enfants : ul:has(> li). Il est facile de comprendre pourquoi :has() a reçu le nom commun de "sélecteur parent", car le sujet du sélecteur est désormais le parent dans ce cas.

Voici un exemple de syntaxe de base où la classe .parent reste le sujet, mais n'est sélectionnée que si un élément enfant possède la classe .child :

.parent:has(.child) {...}

Voici un exemple où un élément <section> est le sujet, mais le sélecteur ne correspond que si l'un des enfants a :focus-visible :

section:has(*:focus-visible) {...}

Le sélecteur :has() redevient un outil fantastique lorsque des cas d'utilisation plus pratiques deviennent évidents. Par exemple, il n'est actuellement pas possible de sélectionner les balises <a> lorsqu'elles entourent des images, ce qui rend difficile d'enseigner à la balise d'ancrage comment modifier ses styles dans ce cas d'utilisation. Toutefois, c'est possible avec :has() :

a:has(> img) {...}

Dans tous les exemples précédents, :has() ressemble à un sélecteur parent. Prenons l'exemple d'images à l'intérieur d'éléments <figure> et de l'ajustement des styles sur les images si la figure comporte un <figcaption>. Dans l'exemple suivant, les figures avec des légendes sont sélectionnées, puis les images dans ce contexte. :has() est utilisé et ne modifie pas le sujet, car le sujet que nous ciblons est les images et non les chiffres :

figure:has(figcaption) img {...}

Les combinaisons sont apparemment infinies. Combinez :has() avec des requêtes de quantité et ajustez les mises en page de grille CSS en fonction du nombre d'enfants. Combinez :has() avec les états de pseudo-classe interactifs et créez des applications qui répondent de manière créative.

La vérification de la compatibilité est simplifiée avec @supports et sa fonction selector(), qui teste si le navigateur comprend la syntaxe avant de l'utiliser :

@supports (selector(:has(works))) {
  /* safe to use :has() */
}

Ressources

• Spécification :has()
• :has() sur MDN
• Le sélecteur CSS :has() est bien plus qu'un "sélecteur parent"

2022 et au-delà

Il y aura encore un certain nombre de choses difficiles à faire après l'arrivée de toutes ces fonctionnalités incroyables en 2022. La section suivante examine certains des problèmes restants et les solutions en cours de développement pour les résoudre. Ces solutions sont expérimentales, même si elles peuvent être spécifiées ou disponibles derrière des indicateurs dans les navigateurs.

Les sections suivantes devraient vous rassurer en vous montrant que de nombreuses personnes de nombreuses entreprises cherchent à résoudre les problèmes listés, et non que ces solutions seront publiées en 2023.

Propriétés personnalisées à typage faible

Les propriétés personnalisées CSS sont incroyables. Ils permettent de stocker toutes sortes de choses dans une variable nommée, qui peut ensuite être étendue, calculée, partagée, etc. En fait, ils sont tellement flexibles qu'il serait bien d'en avoir qui le soient moins.

Prenons l'exemple d'un box-shadow qui utilise des propriétés personnalisées pour ses valeurs :

box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);

Tout fonctionne bien jusqu'à ce que l'une des propriétés soit remplacée par une valeur que le CSS n'accepte pas, comme --x: red. L'ombre entière se brise si l'une des variables imbriquées est manquante ou définie sur un type de valeur non valide.

C'est là que @property entre en jeu : --x peut devenir une propriété personnalisée typée, qui n'est plus lâche et flexible, mais sûre avec des limites définies :

@property --x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

Désormais, lorsque box-shadow utilise var(--x) et que --x: red est tenté ultérieurement, red sera ignoré, car il ne s'agit pas d'un <length>. Cela signifie que l'ombre continue de fonctionner, même si une valeur non valide a été attribuée à l'une de ses propriétés personnalisées. Au lieu d'échouer, il revient à sa valeur initial-value de 0px.

Animation

En plus de la sécurité des types, il ouvre également de nombreuses portes pour l'animation. La flexibilité de la syntaxe CSS rend impossible l'animation de certains éléments, tels que les dégradés. @property est utile ici, car la propriété CSS typée peut informer le navigateur de l'intention d'un développeur dans une interpolation autrement trop complexe. Il limite essentiellement le champ des possibilités dans la mesure où un navigateur peut animer des aspects d'un style qu'il ne pouvait pas faire auparavant.

Prenons l'exemple de cette démo, où un dégradé radial est utilisé pour créer un effet de mise au point sur une partie d'un calque. JavaScript définit les coordonnées X et Y de la souris lorsque la touche Alt/Option est enfoncée, puis réduit la taille du point focal à une valeur telle que 25 %, créant ainsi le cercle de mise au point à la position de la souris :

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );
}

Toutefois, les dégradés ne peuvent pas être animés. Elles sont trop flexibles et trop complexes pour que le navigateur puisse "simplement déduire" la façon dont vous souhaitez les animer. Avec @property, une propriété peut être typée et animée de manière isolée, ce qui permet au navigateur de comprendre facilement l'intention.

Les jeux vidéo qui utilisent cet effet de mise au point animent toujours le cercle, en le faisant passer d'un grand cercle à un petit cercle. Voici comment utiliser @property avec notre démo pour que le navigateur anime le masque de dégradé :

@property --focal-size {
  syntax: '<length-percentage>';
  initial-value: 100%;
  inherits: false;
}

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size .3s ease;
}

Le navigateur peut désormais animer la taille du dégradé, car nous avons réduit la surface de modification à une seule propriété et saisi la valeur pour que le navigateur puisse interpoler intelligemment les longueurs.

@property peut faire beaucoup plus, mais ces petites améliorations peuvent faire une grande différence.

Ressources

• @property specification
• @property sur MDN
• @property sur web.dev
• Démonstration de la mise au point du zoom
• CSS Tricks : Exploring @property and its animating powers

S'est rendu à min-width ou max-width

Avant les plages de requêtes média, une requête média CSS utilise min-width et max-width pour exprimer les conditions "au-dessus" et "en dessous". Cela peut se présenter comme suit :

@media (min-width: 320px) {
  …
}

Après les plages de requêtes média, la même requête média pourrait ressembler à ceci :

@media (width >= 320px) {
  …
}

Voici un exemple de requête média CSS utilisant à la fois min-width et max-width :

@media (min-width: 320px) and (max-width: 1280px) {
  …
}

Après les plages de requêtes média, la même requête média pourrait ressembler à ceci :

@media (320px <= width <= 1280px) {
  …
}

En fonction de votre expérience en programmation, l'une de ces options vous semblera beaucoup plus lisible que l'autre. Grâce à ces ajouts, les développeurs pourront choisir celui qu'ils préfèrent ou même les utiliser de manière interchangeable.

Ressources

• Spécification de la syntaxe de plage des requêtes média
• Syntaxe des plages de requêtes média sur MDN
• Plug-in PostCSS pour la syntaxe de plage de requêtes média

Aucune variable de requête média

Avant @custom-media, les requêtes média devaient se répéter encore et encore, ou s'appuyer sur des préprocesseurs pour générer la sortie appropriée en fonction des variables statiques lors de la compilation.

Après @custom-media, CSS permet d'utiliser des alias pour les requêtes média et de les référencer, tout comme une propriété personnalisée.

Il est très important de nommer les éléments, car cela permet d'aligner l'objectif sur la syntaxe, ce qui facilite le partage et l'utilisation en équipe. Voici quelques requêtes média personnalisées que j'utilise dans tous mes projets :

@custom-media --OSdark  (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);

@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse   (hover) and (pointer: fine);

@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

Maintenant qu'ils sont définis, je peux en utiliser un comme ceci :

@media (--OSdark) {
  :root {
    …
  }
}

Retrouvez la liste complète des requêtes média personnalisées que j'utilise dans ma bibliothèque de propriétés personnalisées CSS Open Props.

Ressources

• Spécification des requêtes média personnalisées
• Plugin PostCSS pour les requêtes média personnalisées

L'imbrication des sélecteurs est très pratique

Avant @nest, les feuilles de style comportaient de nombreuses répétitions. Cela devenait particulièrement difficile à gérer lorsque les sélecteurs étaient longs et que chacun ciblait de petites différences. La facilité d'imbrication est l'une des raisons les plus courantes d'adopter un préprocesseur.

Après @nest, la répétition disparaît. Presque toutes les fonctionnalités d'imbrication avec préprocesseur seront intégrées à CSS.

article {
  color: darkgray;
}

article > a {
  color: var(--link-color);
}

/* with @nest becomes */

article {
  color: darkgray;

  & > a {
    color: var(--link-color);
  }
}

Ce qui est le plus important pour moi dans l'imbrication, en plus de ne pas répéter article dans le sélecteur imbriqué, c'est que le contexte de style reste dans un seul bloc de style. Au lieu de passer d'un sélecteur et de ses styles à un autre sélecteur avec des styles (exemple 1), le lecteur peut rester dans le contexte d'un article et voir les liens de propriété de l'article à l'intérieur. L'intention de relation et de style sont regroupées, de sorte que article peut apparaître comme possédant ses propres styles.

La propriété peut également être considérée comme une centralisation. Au lieu de chercher des styles pertinents dans une feuille de style, ils peuvent tous être trouvés imbriqués dans un contexte. Cela fonctionne avec les relations parent-enfant, mais aussi avec les relations enfant-parent.

Prenons l'exemple d'un enfant de composant qui souhaite s'ajuster lorsqu'il se trouve dans un contexte parent différent, par opposition au parent qui possède le style et modifie un enfant :

/* parent owns this, adjusting children */
section:focus-within > article {
  border: 1px solid hotpink;
}

/* with @nest becomes */

/* article owns this, adjusting itself when inside a section:focus-within */
article {
  @nest section:focus-within > & {
     border: 1px solid hotpink;
  }
}

@nest permet d'améliorer l'organisation, la centralisation et la propriété des styles. Les composants peuvent regrouper et posséder leurs propres styles, au lieu de les répartir entre d'autres blocs de style. Cela peut sembler anodin dans ces exemples, mais cela peut avoir un impact très important, à la fois pour la commodité et la lisibilité.

Ressources

• @nest specification
• Plugin PostCSS@nest
• Bramus : L'avenir du CSS : imbrication des sélecteurs

La portée des styles est très difficile à définir

Avant @scope, de nombreuses stratégies existaient, car les styles en CSS sont en cascade, hérités et de portée globale par défaut. Ces fonctionnalités CSS sont très pratiques pour de nombreuses choses, mais pour les sites et applications complexes, avec potentiellement de nombreux styles de composants différents, l'espace global et la nature de la cascade peuvent donner l'impression que les styles fuient.

Après @scope, les styles peuvent non seulement être limités à un contexte, comme une classe, mais ils peuvent également indiquer où les styles se terminent et ne continuent pas à se propager ni à hériter.

Dans l'exemple suivant, la portée de la convention de dénomination BEM peut être inversée dans l'intention réelle. Le sélecteur BEM tente de définir la portée de la couleur d'un élément header sur un conteneur .card avec des conventions de dénomination. Pour atteindre l'objectif, l'en-tête doit comporter ce nom de classe. Avec @scope, aucune convention de dénomination n'est requise pour atteindre le même objectif sans baliser l'élément d'en-tête :

.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}

Voici un autre exemple, moins spécifique aux composants et plus axé sur la nature de portée globale du CSS. Les thèmes clair et sombre doivent coexister dans une feuille de style, où l'ordre est important pour déterminer le style gagnant. En général, cela signifie que les styles du thème sombre viennent après ceux du thème clair. Cela définit le thème clair comme thème par défaut et le thème sombre comme style facultatif. Évitez les conflits d'ordre et de portée avec @scope :

​​@scope (.light-theme) {
  a { color: purple; }
}

@scope (.dark-theme) {
  a { color: plum; }
}

Pour compléter l'histoire, @scope permet également d'établir où se termine le champ d'application du style. Cela ne peut pas être fait avec une convention de dénomination ou un préprocesseur. Il s'agit d'une fonctionnalité spéciale que seul le CSS intégré au navigateur peut effectuer. Dans l'exemple suivant, les styles img et .content ne sont appliqués que lorsqu'un enfant de .media-block est un frère ou un parent de .content :

@scope (.media-block) to (.content) {
  img {
    border-radius: 50%;
  }

  .content {
    padding: 1em;
  }
}

Ressources

• Spécification@scope
• @scope explainer

Aucune méthode CSS pour une mise en page en maçonnerie

Avant la mise en page en maçonnerie CSS avec grille, JavaScript était la meilleure façon d'obtenir une mise en page en maçonnerie, car toutes les méthodes CSS avec colonnes ou flexbox représentaient l'ordre du contenu de manière inexacte.

Après la mise en œuvre de la maçonnerie CSS avec grille, aucune bibliothèque JavaScript ne sera requise et l'ordre du contenu sera correct.

La démo précédente est obtenue avec le CSS suivant :

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

Il est rassurant de savoir que cette stratégie de mise en page manquante est à l'étude. De plus, vous pouvez l'essayer dès aujourd'hui dans Firefox.

Ressources

• Spécifications de la mise en page en maçonnerie
• Mise en page en maçonnerie sur MDN
• Smashing Magazine : Native CSS Masonry Layout with CSS Grid

Les CSS ne peuvent pas aider les utilisateurs à réduire les données

Avant la requête média prefers-reduced-data, JavaScript et un serveur pouvaient modifier leur comportement en fonction de l'option "Économiseur de données" du système d'exploitation ou du navigateur d'un utilisateur, mais pas le CSS.

Après la requête média prefers-reduced-data, le CSS peut contribuer à améliorer l'expérience utilisateur et à économiser des données.

@media (prefers-reduced-data: reduce) {
  picture, video {
    display: none;
  }
}

Le CSS précédent est utilisé dans ce composant de défilement média et les économies peuvent être considérables. Plus la fenêtre d'affichage du visiteur est grande, plus les économies sur le chargement de la page sont importantes. L'enregistrement se poursuit pendant que les utilisateurs interagissent avec les carrousels de contenus multimédias. Les images comportent toutes des attributs loading="lazy". Combiné à la fonctionnalité CSS qui masque complètement l'élément, cela signifie qu'aucune requête réseau n'est jamais effectuée pour l'image.

Lors de mes tests, 40 requêtes et 700 ko de ressources ont été chargés initialement sur une fenêtre d'affichage de taille moyenne. À mesure que l'utilisateur fait défiler la sélection de contenus multimédias, d'autres requêtes et ressources sont chargées. Avec CSS et la requête média de données réduites, 10 requêtes et 172 ko de ressources sont chargées. Cela représente une économie de 500 Ko, et l'utilisateur n'a même pas fait défiler le contenu multimédia, auquel cas aucune autre requête n'est effectuée.

Cette expérience de données réduites présente d'autres avantages que les économies de données. Vous pouvez voir plus de titres et aucune image de couverture distrayante ne vient détourner votre attention. De nombreux utilisateurs naviguent en mode Économie de données, car ils paient les données au mégaoctet. Il est donc très agréable de voir que le CSS peut les aider.

Ressources

• Spécification "prefers-reduced-data"
• prefers-reduced-data sur MDN
• Défi "prefers-reduced-data" dans une interface utilisateur graphique
• Smashing Magazine : étude de cas sur l'amélioration des Core Web Vitals

Les fonctionnalités d'accrochage au défilement sont trop limitées

Avant ces propositions de scroll snap, écrire votre propre code JavaScript pour gérer un carrousel, un curseur ou une galerie pouvait rapidement devenir complexe, avec tous les observateurs et la gestion de l'état. De plus, si vous ne faites pas attention, les vitesses de défilement naturel peuvent être normalisées par le script, ce qui rend l'interaction de l'utilisateur un peu artificielle et potentiellement maladroite.

Nouvelles API

snapChanging()

Cet événement se déclenche dès que le navigateur a libéré un enfant d'accrochage. Cela permet à l'UI de refléter l'absence d'enfant d'accrochage et l'état d'accrochage indéterminé du défileur, car il est désormais utilisé et atterrira ailleurs.

document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
  console.log('Snap is changing', event.snappedTargetsList);
});

snapChanged()

Cet événement se déclenche dès que le navigateur s'est arrêté sur un nouvel enfant et que le défilement est terminé. Cela permet à toute UI qui dépend de l'enfant ancré de se mettre à jour et de refléter la connexion.

document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
  console.log('Snap changed', event.snappedTargetsList);
});

scroll-start

Le défilement ne commence pas toujours au début. Pensez aux composants que l'on peut balayer vers la gauche ou la droite pour déclencher différents événements, ou à une barre de recherche qui est initialement masquée au chargement de la page jusqu'à ce que vous fassiez défiler l'écran vers le haut. Cette propriété CSS permet aux développeurs de spécifier qu'un élément de défilement doit commencer à un point spécifique.

:root { --nav-height: 100px }

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snap-target

Ce sélecteur CSS correspond aux éléments d'un conteneur d'accrochage de défilement qui sont actuellement accrochés par le navigateur.

.card {
  --shadow-distance: 5px;
  box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
  transition: box-shadow 350ms ease;
}

.card:snapped {
  --shadow-distance: 30px;
}

Après ces propositions de scroll snap, il est beaucoup plus facile de créer un curseur, un carrousel ou une galerie, car le navigateur offre désormais des fonctionnalités pratiques pour cette tâche, éliminant les observateurs et le code d'orchestration du défilement au profit de l'utilisation d'API intégrées.

Ces fonctionnalités CSS et JS sont encore très récentes, mais recherchez bientôt des polyfills qui pourront vous aider à les adopter et à les tester.

Ressources

• Spécification provisoire de Scroll Snap 2
• Explications sur Scroll Snap 2
• Démos de Snap

Parcourir les états connus

Avant toggle(), seuls les états intégrés au navigateur pouvaient être utilisés pour la mise en forme et l'interaction. Par exemple, la saisie de la case à cocher a :checked, un état de navigateur géré en interne pour la saisie que CSS peut utiliser pour modifier l'élément visuellement.

Après toggle(), des états personnalisés peuvent être créés sur n'importe quel élément pour que CSS puisse les modifier et les utiliser pour la mise en forme. Il permet les groupes, les cycles, les bascules dirigées et plus encore.

Dans l'exemple suivant, le même effet de barrer un élément de liste lorsqu'il est terminé est obtenu, mais sans aucun élément de case à cocher :

<ul class='ingredients'>
   <li>1 banana
   <li>1 cup blueberries
  ...
</ul>

Voici les styles CSS toggle() correspondants :

li {
  toggle-root: check self;
}

li:toggle(check) {
  text-decoration: line-through;
}

Si vous connaissez les machines à états, vous remarquerez la similitude avec toggle(). Cette fonctionnalité permettra aux développeurs de créer davantage d'états dans CSS, ce qui, nous l'espérons, se traduira par des moyens plus clairs et plus sémantiques d'orchestrer l'interaction et l'état.

Ressources

• Spécification du brouillon
• Bramus : The Future of CSS: CSS Toggles

Personnaliser les éléments de sélection

Avant <selectmenu>, le CSS ne permettait pas de personnaliser les éléments <option> avec du code HTML enrichi ni de modifier l'affichage d'une liste d'options. Les développeurs ont donc dû charger des bibliothèques externes qui recréaient une grande partie des fonctionnalités d'un <select>, ce qui s'est avéré très laborieux.

Après <selectmenu>, les développeurs peuvent fournir du code HTML enrichi pour les éléments d'options et les styliser autant que nécessaire, tout en respectant les exigences d'accessibilité et en fournissant du code HTML sémantique.

Dans l'exemple suivant, tiré de la page d'explication de <selectmenu>, un nouveau menu de sélection est créé avec quelques options de base :

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

Le CSS peut cibler et styliser les parties de l'élément :

.my-select-menu::part(button) {
  color: white;
  background-color: red;
  padding: 5px;
  border-radius: 5px;
}

.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

Vous pouvez essayer l'élément <selectmenu> sur Chromium dans Canary avec le flag d'expérimentations Web activé. En 2023 et au-delà, vous pourrez personnaliser les éléments du menu "select".

Ressources

• Spécification selectmenu
• Démonstration de selectmenu

Ancrer un élément à un autre

Avant anchor(), les stratégies de positionnement absolu et relatif permettaient aux développeurs de déplacer des éléments enfants dans un élément parent.

Après anchor(), les développeurs peuvent positionner des éléments par rapport à d'autres éléments, qu'ils soient enfants ou non. Il permet également aux développeurs de spécifier le bord par rapport auquel positionner un élément, ainsi que d'autres subtilités pour créer des relations de position entre les éléments.

L'explication fournit d'excellents exemples et exemples de code si vous souhaitez en savoir plus.

Ressources

• anchor() explainer