État du CSS 2022

Fonctionnalités de personnalisation du Web d'aujourd'hui et de demain, telles que présentées lors de Google IO 2022, et quelques extras.

Adam Argyle

L'année 2022 devrait être l'une des plus belles années des CSS, aussi bien en termes de fonctionnalités que de lancements de fonctionnalités coopératives pour les navigateurs, avec un objectif collaboratif : implémenter 14 fonctionnalités.

Présentation

Ce post est l'article de la présentation de Google IO 2022. Il ne s'agit pas d'un guide détaillé sur chaque fonctionnalité, mais d'une introduction et d'une brève présentation visant à susciter l'intérêt de votre audience, ce qui vous apportera une étendue plutôt que de la profondeur. Si cela suscite votre intérêt, consultez la fin d'une section pour obtenir des liens vers des ressources supplémentaires.

Table des matières

Utilisez la liste ci-dessous pour accéder directement aux sujets qui vous intéressent:

Compatibilité du navigateur

L'une des principales raisons pour lesquelles de nombreuses fonctionnalités CSS sont configurées pour être publiées coopérativement est due aux efforts d'Interop 2022. Avant d'étudier les initiatives liées à l'interopérabilité, il est important de connaître les efforts de Compat 2021.

Compat 2021

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

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

Les notes des tests ont été améliorées à tous les niveaux, démontrant ainsi une stabilité et une fiabilité accrues. Toutes nos félicitations à toutes ces équipes !

Interopérabilité 2022

Cette année, les navigateurs se sont réunis pour discuter des fonctionnalités et des priorités sur lesquelles ils avaient l'intention de travailler, unissant leurs efforts. Elle prévoyait de proposer les fonctionnalités Web suivantes aux développeurs:

1. @layer
2. Espaces colorimétriques et fonctions
3. Confinement
4. <dialog>
5. Compatibilité des formulaires
6. Utilisez le défilement
7. Sous-réseau
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 voir se dérouler.

Nouveautés pour 2022

Sans surprise, l'état de CSS 2022 est considérablement affecté par le travail d'interopérabilité en 2022.

Couches en cascade

Avant @layer, l'ordre découvert 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 permis de gérer des feuilles de style d'entrée de manière méticuleuse, où les développeurs devaient charger d'abord les styles moins importants, puis les styles plus importants. Des méthodologies complètes existent pour aider les développeurs à gérer cette importance, telles que ITCSS.

Avec @layer, le fichier d'entrée peut prédéfinir les couches et leur ordre. Ensuite, lorsque les styles sont chargés ou définis, ils peuvent être placés dans une couche, ce qui permet de préserver le style et de remplacer l'importance, mais sans l'orchestration de chargement gérée méticuleusement.

La vidéo montre comment les couches de cascade définies permettent un processus de création et de chargement plus libre et libre, tout en conservant la cascade au besoin.

Les outils pour les développeurs Chrome vous permettent de visualiser quels styles proviennent de quels calques:

Ressources

• Spécifications CSS Cascade 5
• Explication des couches en cascade
• Couches en cascade sur MDN
• Una Kravets: Couches en cascade
• Ahmad Shadeed: Hello, CSS Cascade Layer (Salut, les couches Cascade CSS)

Sous-réseau

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

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

Dans la démonstration suivante, l'élément du corps crée une grille classique à trois colonnes : la colonne du milieu s'appelle main, et les colonnes de gauche et de droite attribuent un nom à 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 vous permettent de voir les lignes et les sous-grilles (Firefox uniquement pour le moment). Dans l'image suivante, la grille et les sous-grilles parentes ont été superposées. Cela ressemble maintenant à la façon dont les concepteurs pensaient 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écifications des sous-réseaux
• Sous-réseau 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 la fenêtre d'affichage complète. C'est idéal pour les mises en page avec des macros, mais pour les mises en page micro, où leur conteneur externe ne correspond pas à l'ensemble de la fenêtre d'affichage, il est impossible que la mise en page s'adapte en conséquence.

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

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

C'est grâce à ces styles que les colonnes Lun, Mar, Mer, Jeudi et Ven de la vidéo suivante peuvent être interrogées par les éléments d'événement.

Voici le code CSS permettant d'interroger le conteneur calendar-day pour connaître sa taille, puis d'ajuster sa mise en page et les tailles de police:

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

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

Voici un autre exemple: un composant Book s'adapte à l'espace disponible dans la colonne vers laquelle il est glissé:

Una a raison d'évaluer la situation en tant que nouveau responsive. Lorsque vous utilisez @container, vous devez prendre de nombreuses décisions de conception intéressantes et significatives.

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 d'Agenda par Una
• Collection de requêtes de conteneur efficace
• Comment nous avons créé Designcember sur web.dev
• Ahmad Shadeed: Découvrez les requêtes CSS Container

accent-color

Avant le accent-color, lorsque vous souhaitiez obtenir un formulaire avec des couleurs assorties à votre marque, vous pouviez vous retrouver avec des bibliothèques ou des solutions CSS complexes, devenues difficiles à gérer au fil du temps. Bien qu'elles vous donnent toutes les options et, espérons-le, incluses l'accessibilité, il est fastidieux de continuer à choisir les composants intégrés ou les vôtres.

Après accent-color, une ligne de CSS apporte une couleur de marque aux composants intégrés. En plus de la teinte, le navigateur choisit intelligemment les couleurs contrastées qui conviennent pour les parties annexes du composant et s'adapte aux jeux 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: commandes d'interface utilisateur de teinte avec CSS accent-color

Niveau de couleur 4 et 5

Le Web a été dominé par le format sRVB depuis des décennies, mais dans un monde numérique en pleine expansion, constitué d'écrans haute définition et d'appareils mobiles équipés d'écrans OLED ou QLED, le sRVB ne suffit pas. 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 des concepteurs, des systèmes de conception et des responsables de code.

Mais ce n'est pas le cas en 2022. CSS propose un certain nombre de nouvelles fonctions de couleur et de nouveaux espaces : - Les couleurs des écrans reflètent les capacités de couleur HD des écrans. - Espaces de couleur correspondant à un intent, comme l'uniformité perceptuelle - Espaces de couleur pour les dégradés qui modifient radicalement les résultats d'interpolation. - Des fonctions de couleur pour vous aider à mélanger et à contraster, et à choisir l'espace dans lequel vous travaillez.

Avant toutes ces caractéristiques de couleur, les systèmes de conception devaient précalculer les couleurs contrastées appropriées et garantir des palettes de couleurs appropriées, le tout tandis que les préprocesseurs ou JavaScript effectuaient le plus gros du travail.

Après toutes ces fonctionnalités de couleur, le navigateur et le CSS peuvent effectuer 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 activer les couleurs de thématisation et de visualisation des données, CSS peut se charger de l'orchestration et des calculs. Le CSS est également mieux équipé pour vérifier la prise en charge avant utilisation ou pour gérer les remplacements de manière optimale.

@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, blanc et noir. Elle se présente comme un moyen convivial d'articuler la couleur, car il s'agit simplement d'une teinte et d'une quantité de blanc ou de noir à éclaircir ou assombrir. Les artistes qui mélangent des couleurs avec du blanc ou du noir apprécieront peut-être cet ajout de syntaxe de couleur.

L'utilisation de cette fonction de couleur donne les couleurs de l'espace colorimétrique sRVB, identique à HSL et RVB. En ce qui concerne la nouveauté de 2022, cela ne vous donne pas de nouvelles couleurs, mais cela peut faciliter certaines tâches pour les fans de syntaxe et de modèle mental.

Ressources

• Spécifications HWB
• HWB sur MDN
• Stefan Judis : hwb() : une notation de couleur pour les humains ?

Espaces colorimétriques

La façon dont les couleurs sont représentées est faite avec un espace colorimétrique. Chaque espace de couleur offre des fonctionnalités et des compromis variés pour travailler avec la couleur. Certains peuvent combiner toutes les couleurs vives, d'autres les aligner en premier en fonction de leur luminosité.

Le CSS 2022 devrait proposer 10 nouveaux espaces de couleur, chacun offrant des fonctionnalités uniques pour aider les concepteurs et les développeurs à afficher, choisir et mélanger des couleurs. Auparavant, sRVB était la seule option permettant de travailler avec des couleurs, mais le CSS offre désormais un nouveau potentiel 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 tels que Sass pour mélanger les couleurs avant que le navigateur ne les détecte. La plupart des fonctions de mélange de couleurs n'offraient pas non plus la possibilité de spécifier l'espace de couleurs dans lequel effectuer le mélange, ce qui pouvait entraîner des résultats déroutants.

Après color-mix(), les développeurs et les concepteurs peuvent mélanger des couleurs dans le navigateur, avec 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 par défaut de LCH.

Souvent, la couleur de la marque est utilisée comme base à partir de laquelle des variantes sont créées, telles que des couleurs plus claires ou plus sombres pour les styles de pointage. Voici comment cela se présente avec color-mix():

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

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

Pour 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émo de thématisation utilisant color-mix(). Essayez de changer la couleur de la marque et regardez la mise à jour du thème:

Amusez-vous à mélanger les couleurs dans différents espaces de couleurs dans vos feuilles de style en 2022 !

Ressources

• Spécification de color-mix()
• color-mix() sur MDN
• Démonstration des thèmes
• Une autre démonstration de thématisation
• Fabio Giolito: créer un thème de couleur avec ces fonctionnalités CSS à venir

color-contrast()

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

Après color-contrast(), les auteurs de feuilles de style peuvent décharger entièrement la tâche du navigateur. Vous pouvez non seulement utiliser le navigateur pour choisir automatiquement une couleur noire ou blanche, mais aussi lui fournir une liste de couleurs appropriées du système de conception et lui demander de choisir la première pour obtenir le rapport de contraste souhaité.

Voici une capture d'écran d'une démonstration de la palette de couleurs HWB, dans laquelle les couleurs de texte sont automatiquement choisies par le navigateur en fonction de la couleur de l'échantillon:

Les bases de la syntaxe ressemblent à ceci, où le gris est transmis à la fonction et le navigateur détermine si le noir ou le blanc présente le plus de contraste:

color: color-contrast(gray);

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

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

Enfin, si il est préférable de ne pas choisir la couleur contrastée la plus élevée dans la liste, un rapport de contraste cible peut être fourni, et la première couleur à transmettre est 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 autre chose que la couleur du texte, même si j'estime que ce sera son cas d'utilisation principal. Pensez à la facilité avec laquelle vous pourrez fournir 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 MN
• Démo

Syntaxe des couleurs relatives

Avant la syntaxe de couleur relative, pour calculer la couleur et effectuer des ajustements, il fallait placer les canaux de couleur individuellement dans des propriétés personnalisées. Cette limitation a également fait de HSL la fonction de couleur primaire 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écomposée, modifiée et renvoyée en tant que couleur, le tout sur une seule ligne de CSS. Il n'y a plus de limites à la syntaxe TSL. Vous pouvez effectuer des manipulations dans n'importe quel espace colorimétrique souhaité, et de nombreuses propriétés moins personnalisées doivent être créées pour faciliter le processus.

Dans l'exemple de syntaxe suivant, un code hexadécimal de base est fourni et deux nouvelles couleurs sont créées par rapport à celui-ci. La première couleur --absolute-change crée une nouvelle couleur dans LCH à partir de la couleur de base, puis remplace la luminosité de la couleur de base par 75%, en conservant la chrominance (c) et la teinte (h). La deuxième couleur --relative-change crée une nouvelle couleur dans LCH à partir de la couleur de base, mais cette fois, la chrominance (c) est réduite 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 revient à mélanger des couleurs, mais c'est plus semblable à des retouches qu'à un mélange. Vous pouvez caster une couleur à partir d'une autre couleur, ce qui vous permet d'accéder aux trois valeurs de canal nommées par la fonction color utilisée, ainsi que d'ajuster ces canaux. Dans l'ensemble, il s'agit d'une syntaxe de couleur très cool et puissante.

Dans la démonstration suivante, j'ai utilisé une syntaxe de couleur relative pour créer des variantes plus claires et plus sombres d'une couleur de base, et utilisé color-contrast() pour s'assurer que le contraste des étiquettes est correct:

Cette fonction peut également être utilisée pour générer une palette de couleurs. Dans cette démonstration, des palettes entières sont générées à partir d'une couleur de base fournie. Toutes les différentes palettes reposent sur cet ensemble unique de CSS, et chaque palette fournit simplement une base différente. En prime, depuis que j'ai utilisé le LCH, regardez à quel point les palettes sont perceptives : aucune zone chaude ou morte n'est visible grâce à cet espace colorimétrique.

: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 savez maintenant comment les espaces de couleur et les différentes fonctions de couleur peuvent tous être utilisés à des fins différentes, en fonction de leurs forces et de leurs faiblesses.

Ressources

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

Espaces de couleurs en dégradé

Avant les espaces de couleurs en dégradé, l'espace colorimétrique sRVB était utilisé par défaut. Il est généralement fiable, mais présente des points faibles, comme la zone morte grise.

Après les espaces de couleur en dégradé, indiquez au navigateur l'espace colorimétrique à utiliser pour l'interpolation des couleurs. Cela permet aux développeurs et aux concepteurs de choisir le gradient qu'ils préfèrent. L'espace colorimétrique par défaut passe également à LCH au lieu de sRVB.

L'ajout de syntaxe est effectué après la direction du dégradé et utilise la nouvelle syntaxe in. Il 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é basique et essentiel, allant du noir au blanc. Regardez la gamme de résultats dans chaque espace de couleur. Certaines atteignent le noir foncé plus tôt que d'autres, d'autres passent au blanc trop tard.

Dans l'exemple suivant, le noir passe au bleu, car il s'agit d'un espace problématique connu pour les dégradés. La plupart des espaces de couleurs se glissent en violet lors de l'interpolation des couleurs ou, comme je le pense bien, lorsque les couleurs se déplacent à l'intérieur de leur espace colorimétrique d'un point A au point B. Étant donné que le dégradé suit une ligne droite du point A au point B, la forme de l'espace colorimétrique modifie considérablement les arrêts suivis par le tracé.

Pour obtenir des explorations détaillées, des exemples et des commentaires, consultez ce fil de discussion Twitter.

Ressources

• Spécification d'interpolation de gradient
• Démonstration : comparaison des dégradés dans les espaces
• Notebook observable comparant les gradients

inert

Avant inert, il était recommandé de guider l'utilisateur vers les zones de la page ou de l'application qui nécessitaient une attention immédiate. Cette stratégie de concentration guidée est devenue connue sous le nom de piégeage de la mise au point, car les développeurs mettaient l'accent sur un espace interactif, écoutaient les événements de changement de mise au point et, si l'objectif quittait l'espace interactif, il était de nouveau intégré de force. Les utilisateurs de claviers ou de lecteurs d'écran sont redirigés vers l'espace interactif pour s'assurer que la tâche est terminée avant de continuer.

Après inert, aucun piège n'est requis, car vous pouvez figer ou protéger des sections entières de la page ou de l'application. Les clics et les tentatives de modification de sélection ne sont tout simplement pas disponibles tant que ces parties d'un document sont inertes. On pourrait également penser à cela comme des gardiens au lieu d'un piège, où inert ne cherche pas à vous faire rester quelque part, au lieu de rendre d'autres lieux indisponibles.

La fonction JavaScript alert() en est un bon exemple:

Notez dans la vidéo précédente que la page était accessible à la souris et au clavier jusqu'à ce qu'un alert() soit appelé. Lorsque le pop-up de la boîte de dialogue d'alerte s'affichait, le reste de la page était figé, soit inert. Le curseur de l'utilisateur est placé dans la boîte de dialogue d'alerte et n'a nulle part où aller. Une fois que l'utilisateur a interagi et traité la requête de la fonction d'alerte, la page est à nouveau interactive. inert permet aux développeurs d'effectuer facilement cette même expérience de concentration guidée.

Voici un petit exemple de code illustrant son 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>

Une boîte de dialogue est un bon exemple, mais inert est également utile pour des éléments tels que l'expérience utilisateur du menu latéral coulissant. Lorsqu'un utilisateur glisse hors du menu latéral, il ne peut pas laisser la souris ou le clavier interagir avec la page qui se trouve derrière. C'est un peu délicat pour les utilisateurs. Au lieu de cela, lorsque le menu latéral s'affiche, vous pouvez rendre la page inert. Les utilisateurs doivent alors fermer ce menu ou y accéder pour qu'ils ne se retrouvent jamais perdus ailleurs sur la page avec un menu ouvert.

Ressources

• Spécification inerte
• Inerte sur MDN
• Développeurs Chrome: Présentation d'inert

Polices COLRv1

Avant les polices COLRv1, le Web proposait des polices OT-SVG, également un format ouvert pour les polices avec des dégradés ainsi que des couleurs et des effets intégrés. Celles-ci pouvaient cependant devenir très volumineuses et, bien qu'elles permettent de modifier le texte, les possibilités de personnalisation étaient limitées.

Après les polices COLRv1, le Web bénéficie d'un encombrement réduit, d'une évolutivité vectorielle, d'un repositionnement, d'un dégradé de couleurs et d'un mode de combinaison. Ces polices acceptent des paramètres permettant de personnaliser la police par cas d'utilisation ou pour correspondre à une marque.

Voici un exemple tiré de l'article du blog des développeurs Chrome concernant les emoji. Vous avez peut-être remarqué que si vous augmentez la taille de la police d'un emoji, elle n'est pas nette. Il s'agit d'une image et non d'une œuvre d'art vectorielle. Souvent, dans les applications où un emoji est utilisé, il est remplacé par un asset de meilleure qualité. Avec les polices COLRv1, les emoji sont vectoriels et beaux:

Les polices d'icônes offrent de nombreux avantages avec ce format, avec des palettes de couleurs bicolores personnalisées, et plus encore. Le chargement d'une police COLRv1 est comme n'importe quel autre fichier de police:

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

La personnalisation de la police COLRv1 s'effectue à l'aide de @font-palette-values, une règle CSS spéciale permettant de regrouper et de nommer un ensemble d'options de personnalisation dans un bundle pour référence ultérieure. Notez que vous spécifiez un nom personnalisé de la même manière qu'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 couleurs:

@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 des polices de plus en plus variables et des polices de couleurs toujours plus disponibles, la typographie Web est sur la voie d'une personnalisation et d'une expression créatives avancées.

Ressources

• Spécification Colrv1 sur GitHub
• Développeurs Chrome: Polices Colrv1
• Vidéo d'explication pour les développeurs sur BlinkOn

Unités de la fenêtre d'affichage

Avant l'introduction des nouvelles variantes de fenêtres d'affichage, le Web proposait des unités physiques pour permettre l'ajustement des fenêtres d'affichage. Il y avait une taille pour la hauteur, la largeur, la plus petite taille (vmin) et le côté le plus grand (vmax). Ils fonctionnaient bien pour de nombreuses choses, mais les navigateurs mobiles ont introduit une complexité.

Sur mobile, lors du chargement d'une page, la barre d'état contenant l'URL s'affiche, et cette barre utilise une partie de l'espace de la fenêtre d'affichage. Après quelques secondes et un certain temps d'interactivité, la barre d'état peut disparaître pour offrir à l'utilisateur une fenêtre d'affichage plus grande. Toutefois, lorsque cette barre glisse, la hauteur de la fenêtre d'affichage a changé, et toutes les unités vh se déplacent et se redimensionnent à mesure que la taille cible change. Plus tard, l'unité vh avait spécifiquement besoin de décider laquelle des deux tailles de fenêtre d'affichage elle allait être utilisée, car elle provoquait des problèmes de mise en page visuelle gênants sur les appareils mobiles. Il a été déterminé que vh représentait toujours la plus grande fenêtre d'affichage.

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

Une fois les nouvelles variantes de fenêtre d'affichage disponibles, les unités de fenêtre d'affichage petites, grandes et dynamiques sont disponibles, avec l'ajout d'équivalents logiques aux unités physiques. L'idée est de donner aux développeurs et aux concepteurs la possibilité de choisir l'unité qu'ils souhaitent utiliser pour leur scénario donné. Peut-être est-il acceptable d'avoir un petit décalage de mise en page inopiné lorsque la barre d'état disparaît. Ainsi, dvh (hauteur de la fenêtre d'affichage dynamique) peut être utilisé sans crainte.

Voici la liste complète de toutes les nouvelles options de bloc de fenêtre d'affichage disponibles dans 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 qu'elles offriront aux développeurs et aux concepteurs la flexibilité nécessaire pour obtenir des conceptions de fenêtre d'affichage responsives.

Ressources

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

:has()

Avant :has(), l'objet d'un sélecteur se trouvait 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 ils ne changent pas de sujet: ul > li:hover ou ul > li:not(.selected).

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

Voici un exemple de syntaxe de base dans lequel la classe .parent reste l'objet, mais n'est sélectionnée que si un élément enfant comporte la classe .child:

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

Voici un exemple dans lequel un élément <section> est l'objet, mais le sélecteur ne correspond que si l'un des enfants comporte :focus-visible:

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

Le sélecteur :has() commence à devenir un utilitaire fantastique lorsque de nouveaux cas d'utilisation pratiques deviennent évidents. Par exemple, il n'est actuellement pas possible de sélectionner des tags <a> lorsqu'ils encapsulent des images. Il est donc difficile d'apprendre au tag d'ancrage à modifier ses styles dans ce cas d'utilisation. Cela est possible avec :has(), mais:

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

Voici quelques exemples où :has() ne ressemble qu'à un sélecteur parent. Considérons le cas d'utilisation d'images dans des éléments <figure> et l'ajustement des styles sur les images si la figure possède un élément <figcaption>. Dans l'exemple suivant, des figures avec figcaptions sont sélectionnées, puis des images dans ce contexte. :has() est utilisé et ne modifie pas de sujet, car nous ciblons les images et non les figures:

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

Les combinaisons semblent 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 des états de pseudo-classe interactifs et créez des applications qui répondent de nouvelles manières créatives.

La vérification de la compatibilité est simplifiée avec @supports et sa fonction selector(), qui vérifie 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 qui seront difficiles à faire après l'arrivée de toutes ces fonctionnalités étonnantes 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.

Le résultat des sections suivantes doit être rassurant : de nombreuses personnes de nombreuses entreprises cherchent une solution aux problèmes listés, et non pas que ces solutions seront lancées en 2023.

Propriétés personnalisées peu typées

Les propriétés personnalisées CSS sont incroyables. Ils permettent de stocker toutes sortes d'éléments dans une variable nommée, qui peut ensuite être étendue, calculée, partagée, etc. En fait, ils sont si flexibles qu'il serait intéressant d'en avoir 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 correctement jusqu'à ce que l'une des propriétés soit remplacée par une valeur non acceptée par CSS, comme --x: red. L'ombre entière se rompt si l'une des variables imbriquées est manquante ou est définie sur un type de valeur non valide.

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

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

Désormais, lorsque box-shadow utilise var(--x) et qu'une --x: red ultérieure est tentée, red est ignoré, car il ne s'agit pas d'une <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 rétablit sa initial-value de 0px.

Animation

En plus de la sûreté du typage, cela ouvre également de nombreuses portes pour l'animation. La flexibilité de la syntaxe CSS rend impossible l'animation de certaines choses, comme 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. Cela limite essentiellement les possibilités qu'un navigateur pourrait animer pour des aspects d'un style qu'il ne pouvait pas auparavant.

Prenons cet exemple de démonstration dans lequel un dégradé radial est utilisé pour créer une partie d'une superposition, créant ainsi un effet de mise au point de type "effet de projecteur". JavaScript définit les valeurs x et y de la souris lorsque l'utilisateur appuie sur la touche alt/opt. Il définit ensuite la taille focale sur une valeur inférieure (25%, par exemple), ce qui crée le cercle de mise en surbrillance du focus à 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%
  );
}

En revanche, les dégradés ne peuvent pas être animés. Ils sont trop flexibles et trop complexes pour que le navigateur puisse "dériver" simplement la façon dont vous souhaitez qu'ils s'animent. Avec @property, cependant, une propriété peut être saisie et animée de manière isolée, ce qui permet au navigateur de comprendre facilement l'intent.

Dans les jeux vidéo qui utilisent cet effet de focalisation, le cercle est toujours animé, passant d'un grand cercle à un petit cercle. Voici comment utiliser @property avec notre démonstration afin 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 est désormais en mesure d'animer la taille du dégradé, car nous avons réduit la surface de la modification à une seule propriété et saisi la valeur pour que le navigateur puisse interpoler intelligemment les longueurs.

@property offre beaucoup d'autres fonctionnalités, mais ces petites activations peuvent être très efficaces.

Ressources

• @property specification
• @property sur MDN
• @property sur web.dev
• Démonstration de la mise au point sur le zoom
• Astuces CSS: découvrir @property et ses pouvoirs d'animation

Se trouvait en 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 s'exprimer sur et sous certaines conditions. Cela peut se présenter comme suit :

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

Après la plage de requêtes média, la même requête média pourrait se présenter comme suit:

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

Une requête média CSS qui utilise à la fois min-width et max-width peut se présenter comme suit:

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

Après la plage de requêtes média, la même requête média pourrait se présenter comme suit:

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

Selon vos compétences en codage, l'une d'elles paraîtra beaucoup plus lisible que l'autre. Grâce aux ajouts de spécifications, les développeurs peuvent choisir celui qu'ils préfèrent, ou même les utiliser de manière interchangeable.

Ressources

• Spécification de la syntaxe de la plage de requêtes média
• Syntaxe de la plage de requêtes média sur le MN
• Plug-in PostCSS pour la syntaxe de la plage de requêtes multimédias

Aucune variable de requête média

Avant @custom-media, les requêtes média devaient se répéter encore et encore, ou utiliser des préprocesseurs pour générer la sortie appropriée à partir de variables statiques au moment de la compilation.

Après @custom-media, le CSS permet la création d'alias pour les requêtes multimédias et leur référencement, comme pour une propriété personnalisée.

Il est très important de nommer les éléments: cela peut aligner l'objectif avec la syntaxe, ce qui facilite le partage et l'utilisation en équipe. Voici quelques requêtes média personnalisées qui me suivent entre les 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 utiliser l'un d'eux comme ceci:

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

La liste complète des requêtes médias 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
• Plug-in PostCSS de requêtes média personnalisées

L'imbrication de sélecteurs est pratique

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

Après @nest, la répétition a disparu. Presque toutes les fonctionnalités de l'imbrication compatible avec le prétraitement seront disponibles dans CSS.

article {
  color: darkgray;
}

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

/* with @nest becomes */

article {
  color: darkgray;

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

Pour moi, ce qui importe le plus avec 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 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 que l'article possède les liens qu'il contient. La relation et l'intent de style sont regroupés. article peut donc sembler posséder ses propres styles.

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

Prenons l'exemple d'un composant enfant qui souhaite s'adapter 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 aide globalement à une organisation, une centralisation et une appropriation plus saines. Les composants peuvent regrouper et posséder leurs propres styles, au lieu de les répartir entre d'autres blocs de style. Cette métrique peut sembler minime dans ces exemples, mais peut avoir de très grands impacts, pour des raisons de commodité et de lisibilité.

Ressources

• Spécification@nest
• Plug-in@nest PostCSS
• Bramus: The future of CSS: Nesting Selections

Il est très difficile de définir la portée des styles

Avant @scope, de nombreuses stratégies existaient, car les styles CSS sont appliqués en cascade, héritent par défaut et s'appliquent à l'ensemble des stratégies par défaut. Ces fonctionnalités CSS sont très pratiques pour beaucoup de choses, mais pour les sites et les 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, non seulement les styles peuvent être limités à un contexte, comme une classe, mais ils peuvent également indiquer où les styles se terminent et ne continuent plus à être en cascade ou à hériter.

Dans l'exemple suivant, la portée de la convention d'attribution de noms BEM peut être inversée pour l'intent réel. Le sélecteur BEM tente de limiter la couleur d'un élément header à un conteneur .card avec des conventions de nommage. Pour cela, l'en-tête doit comporter ce nom de classe, ce qui permet d'atteindre l'objectif. Avec @scope, aucune convention d'attribution de noms 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 au composant, mais plus sur le champ d'application global du CSS. Les thèmes sombre et clair doivent coexister dans une feuille de style, où l'ordre est important pour déterminer un style gagnant. En général, cela signifie que les styles du thème sombre viennent après le thème clair. Cela définit la lumière comme le thème par défaut et le style 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 de déterminer où se termine le champ d'application du style. Cette opération est impossible avec une convention d'attribution de noms ou un préprocesseur. Cette opération est spéciale et n'est possible que si le CSS intégré au navigateur le permet. Dans l'exemple suivant, les styles img et .content sont appliqués exclusivement lorsqu'un enfant d'un .media-block est un parent de .content ou un frère ou une sœur:

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

  .content {
    padding: 1em;
  }
}

Ressources

• Spécification@scope
• Explication du@scope

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

Avant la maçonnerie CSS avec grille, JavaScript était le meilleur moyen d'obtenir une mise en page en maçonnerie, car toutes les méthodes CSS avec des colonnes ou Flexbox représenteraient de manière inexacte l'ordre du contenu.

Après la maçonnerie CSS avec grille, aucune bibliothèque JavaScript n'est requise et l'ordre du contenu est correct.

La démo précédente est réalisée avec le CSS suivant:

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

Il est rassurant de savoir qu'il s'agit d'une stratégie de mise en page manquante. Vous pouvez également l'essayer dès aujourd'hui dans Firefox.

Ressources

• Spécification de mise en page en maçonnerie
• Mise en page de Masonry sur MN
• Smashing Magazine: mise en page maçonnerie CSS native avec grille CSS

Le CSS ne peut pas aider les utilisateurs à réduire la consommation de données

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

Après la requête média prefers-reduced-data, le CSS peut participer à l'amélioration de l'expérience utilisateur et jouer son rôle dans l'enregistrement 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 multimédia, ce qui peut faire des économies considérables. Selon la taille de la fenêtre d'affichage de visite, plus il est possible de réaliser des économies sur le chargement de la page. L'enregistrement se poursuit alors que les utilisateurs interagissent avec les défilements multimédias. Toutes les images comportent des attributs loading="lazy". Par conséquent, lorsque vous utilisez du code CSS qui masque entièrement l'élément, aucune requête réseau n'est envoyée pour l'image.

Lors de mes tests, dans une fenêtre d'affichage de taille moyenne, 40 requêtes et 700 Ko de ressources ont été initialement chargés. Lorsqu'un utilisateur fait défiler la sélection de fichiers multimédias, davantage de requêtes et de ressources sont chargées. Avec CSS et la requête média de données réduite, 10 requêtes et 172 ko de ressources sont chargés. Cela représente un demi-mégaoctet d'économies et l'utilisateur n'a même fait défiler aucun des contenus multimédias. À ce stade, aucune requête supplémentaire n'est effectuée.

Cette expérience réduite présente bien d'autres avantages que les économies de données. Davantage de titres sont visibles et aucune image de couverture ne détourne l'attention. De nombreux utilisateurs naviguent en mode Économiseur de données, car ils paient par mégaoctet de données. C'est très agréable de voir que CSS peut vous aider.

Ressources

• prefers-reduced-data specification
• prefers-reduced-data sur MDN
• prefers-reduced-data dans un défi IUG
• Smashing Magazine: Amélioration des Core Web Vitals, étude de cas Smashing Magazine

Les fonctionnalités d'ancrage de défilement sont trop limitées

Avant ces propositions d'ancrage du défilement, é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 ce n'est pas fait, les vitesses de défilement naturelles pourraient être normalisées par le script, ce qui rendrait l'interaction utilisateur un peu artificielle et potentiellement gênante.

Nouvelles API

snapChanging()

Dès que le navigateur a publié un élément enfant Snap, cet événement se déclenche. Cela permet à l'UI de refléter l'absence d'élément enfant d'ancrage et l'état d'ancrage indéterminé du conteneur de défilement, car il est désormais utilisé et arrivera ailleurs.

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

snapChanged()

Dès que le navigateur s'est connecté à un nouvel enfant et que le conteneur de défilement est reposé, cet événement se déclenche. Cela permet à toute interface utilisateur qui dépend de l'élément enfant ancré de 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. Prenons l'exemple de composants à faire glisser, où le balayage vers la gauche ou vers la droite déclenche différents événements, ou une barre de recherche qui, lors du chargement de la page, est initialement masquée jusqu'à ce que vous fassiez défiler la page jusqu'en haut. Cette propriété CSS permet aux développeurs de spécifier qu'un conteneur 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 mettra en correspondance les éléments d'un conteneur d'ancrage de défilement qui sont actuellement ancré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 d'ancrage du défilement, 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 la tâche, éliminant les observateurs et le code d'orchestration du défilement au profit d'API intégrées.

Ces fonctionnalités CSS et JavaScript n'en sont encore qu'à leurs débuts, mais soyez à l'affût des polyfills qui pourront bientôt faciliter leur adoption et leur test.

Ressources

• Spécification du brouillon de l'ancrage 2 avec défilement
• Explications sur le défilement de la page Snap 2
• Démonstrations Snap

Passage d'un état connu à un autre

Avant toggle(), seuls les états intégrés au navigateur pouvaient être exploités pour le style et l'interaction. L'entrée de la case à cocher, par exemple, contient :checked, un état de navigateur géré en interne pour l'entrée que CSS peut utiliser pour modifier visuellement l'élément.

Après toggle(), il est possible de créer des états personnalisés sur n'importe quel élément afin que le CSS puisse modifier et utiliser le style. Elle autorise les groupes, le vélo, le basculement dirigé, etc.

Dans l'exemple suivant, le même effet d'un élément de liste barré sur la lecture complète est obtenu, mais sans aucun élément de case à cocher:

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

Et les styles CSS toggle() pertinents:

li {
  toggle-root: check self;
}

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

Si vous connaissez les machines à états, vous remarquerez peut-être l'ampleur du crossover associé à toggle(). Cette fonctionnalité permettra aux développeurs d'intégrer une plus grande partie de leur état dans CSS, ce qui devrait permettre d'orchestrer l'interaction et l'état de manière plus claire et plus sémantique.

Ressources

• toggle() (brouillon de spécifications techniques)
• Bramus: The Future of CSS: CSS Toggles

Personnaliser les éléments sélectionnés

Avant <selectmenu>, le CSS ne permettait pas de personnaliser les éléments <option> avec du code HTML enrichi ni de modifier beaucoup l'affichage d'une liste d'options. Cela a conduit les développeurs à charger des bibliothèques externes recréant une grande partie des fonctionnalités d'un <select>, ce qui représentait beaucoup de travail.

Après <selectmenu>, les développeurs peuvent fournir du code HTML enrichi pour les éléments d'options et leur appliquer un style selon leurs besoins, tout en respectant les exigences d'accessibilité et en fournissant du code HTML sémantique.

Dans l'exemple suivant, issu de la page d'explication <selectmenu>, un 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 les parties de l'élément et leur appliquer un style:

.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> dans Chromium dans Canary en activant l'indicateur de tests Web. En 2023 et au-delà, nous vous proposerons une sélection d'éléments de menu personnalisables.

Ressources

• Spécification de Selectmenu
• Démo Selectmenu

Ancrer un élément à un autre

Avant anchor(), les stratégies de position absolue et relative étaient fournies pour permettre aux développeurs de déplacer les éléments enfants au sein d'un élément parent.

Après anchor(), les développeurs peuvent positionner des éléments sur d'autres éléments, qu'ils soient enfants ou non. Il permet également aux développeurs de spécifier la bordure à positionner ainsi que d'autres avantages permettant de créer des relations de position entre les éléments.

Cette vidéo explicative contient quelques excellents exemples de code si vous souhaitez en savoir plus.

Ressources

• Explication de anchor()