L'année dernière, avec le mouvement compact 2021, la majorité des navigateurs se sont mis d'accord pour stabiliser 5 grandes caractéristiques :

sticky positioning
aspect-ratio sizing
flex layout
grid layout
transform positioning and layout

Aujourd'hui, ces fonctionnalités peuvent être utilisées dans tous les navigateurs avec une compatibilité totale sans polyfills.

Cette année, dans le cadre du mouvement Interop 2022, les équipes des principaux navigateurs se sont mises d'accord pour proposer les fonctionnalités suivantes :

cascade layer
color space et color function
subrid et container queries
typography
inert
dialog balise
:has() CSS function
viewport units

A quoi servent ces fonctionnalités ?

Cet article a pour but de répondre à cette question mais aussi de vous présenter le futur du css encore expérimentales ou disponible derrière des flags.

Cascade layer: la nouvelle façon d'ordonner son CSS

La fonctionnalité de la couche en cascade est représentée par une nouvelle règle css : @layer.

Avant cette fonctionnalité, la façon dont le CSS était écrit était très important, en particulier en ce qui concerne l'ordre d'application.
Cela obligeait les développeurs à réfléchir soigneusement à l'ordre dans lequel ils devaient importer leur feuille de style, généralement la feuille de style la moins importante en premier et la feuille de style la plus importante en dernier.

Avec la règle css @layer, votre feuille de style d'entrée (feuille de style principale) peut définir les couches et leur ordre, à l'avance.
Par la suite, les styles peuvent être chargés ou définis, puis placés dans une couche afin de préserver l'importance de la surcharge de style sans se soucier de la gestion méticuleuse de l'orchestration des styles.

Example:

@layer base, ui;

@import '~bootstrap.css' layer(ui);

Vous trouverez plus d'exemples et plus d'explications avec les liens suivants :

Cascade layer par Una Kravets
MDN Documentation
Hello, CSS Cascade Layers par Ahmad Shadeed

Couleur: sortons de la zone grise

Jusqu'à présent, les couleurs étaient définies par la norme sRGB. Cependant, la technologie évolue et aujourd'hui, les appareils sont équipés d'écrans OLED, QLED et la norme sRGB n'est plus suffisante.
De nos jours, l'interface doit s'adapter dynamiquement, et la palette de couleurs devient un véritable défi pour le concepteur, le système de conception et les développeurs.

Cette époque est révolue. En 2023, de nouvelles fonctions et de nouveaux espaces colorimétriques seront disponibles :

des couleurs qui correspondent aux écrans HD
l'espace colorimétrique qui correspond à une intention
espace colorimétrique qui modifie les résultats de l'interpolation
fonction de couleur pour vous aider à mélanger les couleurs, les contrastes et à choisir l'espace dans lequel vous voulez travailler.

Avant la disponibilité de toutes ces fonctions, il était nécessaire de faire des calculs, principalement délégués à Javascript, pour lisser les couleurs.
Maintenant, le CSS et le navigateur peuvent le faire dynamiquement de manière optimisé.

Attention ces fonctions sont toujours en niveau 4 et 5, et ne sont pas compatibles avec tous les navigateurs.

Fonction HWB

HWB signifie Hue, Whiteness, Blackness (teinte, blancheur, noirceur). Cette fonction se présente comme un moyen convivial de créer des couleurs.
En fait, il suffit d'une teinte et d'une quantité de blanc et de noir pour éclaircir ou assombrir.

Exemple:

:root {
  --lightBlue: hwb(200 75% 0%)
}

Vous trouverez plus d'exemples et plus d'explications avec les liens suivants :

MDN Documentation
HWB Specification

Fonction color-mix

Avant la fonction color-mix, les développeurs devaient utiliser des préprocesseurs comme Sass pour mélanger les couleurs avant que le navigateur ne puisse les découvrir et les évaluer. Cependant, la plupart des fonctions de mélange de couleurs ne permettent pas de spécifier l'espace colorimétrique dans lequel les couleurs doivent être mélangées, ce qui peut parfois prêter à confusion.

Désormais, les développeurs peuvent mélanger les couleurs directement dans le navigateur grâce à css sans passer par un processus de construction ou Javascript.

Exemple :

:root {
 --red: #e53935
}

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

Vous trouverez plus d'exemples et plus d'explications dans les liens suivants :

Color Mix Specification
MDN Documentation

Fonction color-contrat

Avant la sortie de la fonction de contraste des couleurs, les auteurs de feuilles de style devaient connaître à l'avance les couleurs d'accessibilité. De plus, dans la documentation des palettes de couleurs, celle-ci montre le changement de couleur d'un texte noir et blanc pour indiquer à l'utilisateur la meilleure accessibilité.

Avec la fonction de contraste des couleurs, tout ce travail peut être délégué au navigateur. Cette fonction permet également de laisser le navigateur choisir parmi plusieurs couleurs celle qui passera le ratio d'accessibilité que vous avez choisi

Exemple :

color: color-contrast(grey vs red, indigo, purple);
color: color-contrast(var(--bg-primary) vs red, white to AA);
color: color-contrast(var(--bg-secondary));

Vous trouverez plus d'exemples et plus d'explications avec les liens suivants :

Color Contrast Specification
MDN Documentation

Subgrid et Container queries

Subgrid

En ajoutant la propriété display : grid à un conteneur, nous créons implicitement un système de grille. Seuls les descendants directs de ce système de grille peuvent être placés sur celui-ci, alors que les enfants de ces descendants seront placés selon un flux habituel.

On peut imbriquer des grilles les unes dans les autres, mais ces grilles seront créées indépendamment, rien ne sera hérité, ce qui rendra très difficile l'alignement d'une cellule de la grille enfant avec une cellule de la grille parent.

Avec la valeur subgrid appliquée pour les propriétés grid-template-columns et/ou grid-template-rows, il devient facile d'utiliser le système de grille parent dans le système de grille enfant car le dimensionnement est hérité.

Exemple:

.parent {
  display: grid;
  grid-template-columns: [fullLine-start] auto [main]95% auto [fullLine-end];
}

.child {
  display: grid;
  grid-column: fullLine;
  grid-template-columns: subgrid;
}

.child > * {
  grid-column: main;
}

Vous trouverez plus d'exemples et plus d'explications avec les liens suivants :

Subgrid Specification
MDN Documentation

@Container

Avant la règle CSS @container, une page ne pouvait réagir qu'au changement de taille de sa fenêtre. Ce système est très utile au niveau de la macro-mise en page, mais pas au niveau de la micro-mise en page. Il peut s'avérer utile, dans le cadre de la conception "mobile first", d'adapter un contenu à son contenant.

C'est exactement l'objectif de la règle css @container. Après avoir donné un type au conteneur et éventuellement un nom (au cas où il y aurait plusieurs conteneurs dans votre page), l'adaptation du contenu à son conteneur sera un jeu d'enfant.

Exemple :

.container {
  container-type: inline-size;
  container-name: main-content;
}

@container main-content (min-width: 64rem) {
  .card {
    width: 25%;
  }
}

Vous trouverez plus d'exemples et plus d'explications avec les liens suivants :

Container queries Specification
MDN Documentation
The new responsive

Typographie

Jusqu'à présent, le navigateur disposait des polices dites OT-SVG. Ce format ouvert permettait d'avoir des polices avec des dégradés de couleurs et des effets de police. Cependant, ces polices pouvaient devenir très volumineuses et même si elles permettaient de modifier le style d'un texte, la personnalisation restait limitée.

Avec la norme COLORv1, le web dispose désormais d'un encombrement réduit et d'un accès à des polices vectorielles, des polices de dépôt, des polices avec gradient et des polices en mode mélange qui acceptent des paramètres pour personnaliser la police en fonction du cas d'utilisation ou pour correspondre à une marque.

Exemple :

@font-palette-values --name-palette {
  font-family: "Roboto";
  base-palette: 0;
  override-colors: 0 red, 1 cyan, 2 black;
}

.custom-color-text {
  font-family: "Roboto";
  font-palette: --name-palette;
}

Vous trouverez plus d'exemples et plus d'explications vers les liens suivants :

Chrome Developers

Attribut inert

Il est toujours bon de guider l'utilisateur vers la zone interactive d'une application.
Très vite, on se rend compte qu'il faut écrire beaucoup de code pour empêcher l'utilisateur de quitter cette zone interactive et pour le ramener de force dans cette zone. Cette méthode s'appelle : le focus trap

L'attribut inert permet de rendre certaines parties de l'écran inactives lorsque l'on souhaite que l'utilisateur se concentre sur une partie de l'écran et ne perde pas le focus.
Cet attribut est utile pour les boîtes de dialogue de confirmation, où une action de l'utilisateur est requise.

Exemple:

<div inert>
  User can't click because this zone is inactive
  <button>Click Me</button>
</div>

Vous trouverez plus d'exemples et plus d'explications avec les liens suivants :

Chrome Developers
MDN Documentation

Dialog Balise

La balise dialog existe depuis longtemps et, comme son nom l'indique, permet d'ouvrir dynamiquement une zone interactive sans trop de difficultés.Cependant, cet élément n'était pas compatible avec tous les navigateurs et notamment avec Safari.Pour assurer la compatibilité avec tous les navigateurs, il était généralement nécessaire de recoder une partie de cette balise et de son comportement. Quelle perte de temps !
Aujourd'hui, cette balise est compatible avec tous les navigateurs les plus récents. Quelle bonne nouvelle :) !

Exemple :

<dialog open>
  Content of my dialog
</dialog>

Vous trouverez plus d'exemples et plus d'explications dans les liens suivants :

MDN Documentation

Fonction CSS :has()

En CSS, le sujet d'un sélecteur a toujours été placé à la fin. Vous pouvez modifier le sélecteur avec des pseudo-sélecteurs mais cela ne changera pas le sujet.
Prenons un exemple très simple :

div > p {}

Ici, nous sélectionnons tous les éléments p qui appartiennent à une div.
Mais comment appliquer un style particulier à l'élément div si l'un de ses éléments p possède la classe red ?

C'est là que la fonction :has() sera très utile. Elle nous permet de sélectionner le sélecteur parent et de lui appliquer un certain style en fonction de son enfant.

Exemple :

div:has(> p.red) {
  background-color: black;
}

Vous trouverez plus d'exemples et plus d'explications avec les liens suivants :

MDN Documentation

Nouvelles unités de vieport : faciles à dimensionner sur les appareils mobiles

Les navigateurs web proposent des unités de mesure physiques pour ajuster facilement la fenêtre de visualisation :

vh pour ajuster la hauteur
vw pour ajuster la largeur
vmin pour la plus petite taille
vmax pour la plus grande taille

L'émergence des navigateurs mobiles a bouleversé et remis en cause ces mesures. En effet sur un mobile, l'url de la page est affichée dans la barre d'état et inévitablement cette barre consomme de l'espace dans le viewport.
Ce qui devient beaucoup plus compliqué à gérer, c'est qu'après quelques secondes ou quelques interactions, cette barre d'état disparaît laissant plus d'espace dans la fenêtre de visualisation.

Afin de faciliter la gestion de ce comportement, le navigateur propose de nouvelles unités de mesure

dvh : pour adapter dynamiquement la hauteur
lvh : pour indiquer la hauteur maximale
svh : pour indiquer la hauteur minimale

Vous pouvez trouver plus d'exemples et plus d'explications avec les liens suivants :

The large, small and dynamic viewport

Experimental

CSS conditionnel

Parfois, le CSS peut être très complexes. En particulier lorsque vous essayez de vérifier si la fonctionnalité CSS que vous voulez utiliser est disponible.

C'est pourquoi il sera possible de créer des conditions dans le css.

Avant:

@media(max-width: 450px) {
  @supports(grid-template-columns: subgrid) {
    .subgrid {
      display: grid;
      grid-column: main;
      grid-template-columns: subgrid
    }
  }
}

Avec le CSS conditionnel:

@when(max-width: 450px) and supports(grid-template-columns: subgrid) {
  .subgrid {
    display: grid;
    grid-column: main;
    grid-template-columns: subgrid
  }
} @else {
  .subgrid {
    display: flex;
    width: 100;
    justify-content: center;
  }
}

Media queries

Toujours dans le but de réduire la multiplication des media queries en css, les media queries permettant de réaliser une limite maximale et minimale pour la fenêtre ont une nouvelle syntaxe

Avant:

@media(min-width: 400px) and (max-width: 1000px) {}

Après:

@media(400px <= width <= 1000px) {}

Propriétés personnalisées saisies

Nous avons besoin de typer. Ne serait-ce que pour être cohérent. Mais jusqu'à présent, malgré la puissance des propriétés personnalisées, il était impossible de les typer correctement. Cela pouvait parfois conduire à des erreurs:

:root {
 --medium-size: red;
}

.text {
  height: var(--medium-size);
}

Dans ce morceau de code, aucune erreur n'est soulevée et la taille prend une valeur non prise en charge.

Avec la règle css @Property, il sera possible de saisir vos propriétés personnalisées et même de leur donner une valeur par défaut.

@property --medium-size {
  syntax: '<length>';
  initial-value: 0px;
}

:root {
 --medium-size: red; // ignore because red not match the length rule
}

Conclusion

Le CSS a un bel avenir devant lui.

Ces nouveautés nous permettront de

d'adapter facilement les designs à différents écrans.
réduire le boilerplate

Évidemment cet article n'inclut pas tous les changements CSS à venir mais les principaux de mon point de vue.

State of CSS

Cascade layer: la nouvelle façon d'ordonner son CSS

Couleur: sortons de la zone grise

Fonction HWB

Fonction color-mix

Fonction color-contrat

Subgrid et Container queries

Subgrid

@Container

Typographie

Attribut inert

Dialog Balise

Fonction CSS :has()

Nouvelles unités de vieport : faciles à dimensionner sur les appareils mobiles

Experimental

CSS conditionnel

Media queries

Propriétés personnalisées saisies

Conclusion

Dernier

Les Design Patterns Comportementaux - Interpréteur

Java 23 Insight : Les Pattern Primitifs

Késaco : Svelte

State of CSS

Cascade layer: la nouvelle façon d'ordonner son CSS

Couleur: sortons de la zone grise

Fonction HWB

Fonction color-mix

Fonction color-contrat

Subgrid et Container queries

Subgrid

@Container

Typographie

Attribut inert

Dialog Balise

Fonction CSS :has()

Nouvelles unités de vieport : faciles à dimensionner sur les appareils mobiles

Experimental

CSS conditionnel

Media queries

Propriétés personnalisées saisies

Conclusion

Lié

Dernier