Nouvelles fonctionnalités CSS en 2025 : Aperçu des changements clés

Le développement web continue d’évoluer, et CSS ne fait pas exception. Début 2025, il est devenu évident que le langage de styles a reçu de nombreuses nouvelles fonctionnalités, déjà prises en charge par les navigateurs modernes. Dans cet article, nous examinerons les innovations les plus significatives qui peuvent faciliter le travail des développeurs et améliorer l’expérience utilisateur.

La valeur balance pour la propriété text-wrap

La typographie a toujours été l’un des défis les plus complexes pour les développeurs web. L’un des problèmes courants est la répartition inégale du texte dans les titres, en particulier sur différents appareils. Par exemple, lors de l’affichage de titres longs, il arrive souvent que le dernier mot se retrouve seul sur une ligne, ce qui nuit à la lisibilité.

Pour résoudre ce problème, la valeur balance pour la propriété text-wrap est désormais disponible. Elle permet de répartir le texte uniformément sur plusieurs lignes, minimisant ainsi la probabilité de mots isolés en fin de ligne. Exemple :

h1 {
  text-wrap: balance;
}

Cette approche est particulièrement utile pour le design adaptatif, où il est essentiel de garantir une bonne lisibilité du texte sur tous les écrans.

Exemple d’utilisation de la propriété :

Testez le code sur une page séparée

L’imbrication native en CSS

Pendant longtemps, les développeurs ont utilisé des préprocesseurs comme SASS ou LESS pour organiser l’imbrication des règles CSS. Cependant, en 2025, CSS prend désormais en charge l’imbrication de manière native. Il est donc possible d’écrire du code comme ceci :

.awesome-block {
  border: 2px solid lightblue;
  padding: 1rem;
   
  &:hover {
    background-color: tomato;
  }
}

Cette syntaxe permet de simplifier la structure des styles et de rendre le code plus lisible. Cependant, il faut être vigilant avec l’utilisation de l’esperluette (&) dans les noms de classes, car cela peut entraîner des erreurs.

Les pseudo-classes :user-valid et :user-invalid

Le travail avec les formulaires devient encore plus intuitif grâce aux nouvelles pseudo-classes :user-valid et :user-invalid. Contrairement aux pseudo-classes classiques :valid et :invalid, qui appliquent les styles dès le chargement de la page, ces nouvelles pseudo-classes ne s’activent qu’après une interaction de l’utilisateur avec le champ. Cela permet d’éviter des effets visuels indésirables lors du chargement du formulaire.

Exemple d’utilisation :

input:user-invalid {
  box-shadow: 0 0 10px red;
}

input:user-valid {
  box-shadow: 0 0 10px green;
}

Exemple d’utilisation :

Testez le code sur une page séparée

À noter ! Les pseudo-classes :user-valid et :user-invalid ne sont pas encore prises en charge par la plupart des navigateurs. Par conséquent, les styles peuvent s’appliquer dès le chargement de la page (comme pour :valid et :invalid). Pour éviter cela, vous pouvez utiliser :focus, :focus-within ou ajouter un gestionnaire via JavaScript.

La propriété scrollbar-gutter

Un problème courant avec les fenêtres modales est le "saut" du contenu provoqué par l’apparition ou la disparition de la barre de défilement. La nouvelle propriété scrollbar-gutter permet de réserver de l’espace pour la barre de défilement à l’avance, empêchant ainsi le déplacement du contenu.

Exemple :

html,
body {
  scrollbar-gutter: stable;
}

Cette solution est particulièrement utile pour améliorer l’expérience utilisateur lors de l’utilisation de fenêtres modales et d’autres éléments d’interface.

La fonction mathématique round()

CSS introduit la possibilité d’arrondir des valeurs avec la fonction round(). Cela est particulièrement utile pour la mise en page lorsqu’on manipule des valeurs décimales. Exemple :

.box {
  margin: round(to-zero, 1.25rem, 1px);
}

La fonction round() peut être utilisée avec calc(), ce qui en fait un outil puissant pour un contrôle précis des dimensions et des marges.

Les mots-clés safe et unsafe

Lors de l’utilisation des propriétés align-items et justify-content, il peut arriver que des éléments soient tronqués en raison du débordement du conteneur. Les nouveaux mots-clés safe et unsafe permettent de contrôler ce comportement. Exemple :

.parent {
  align-items: safe center;
}

Le mot-clé safe garantit que les éléments ne seront pas coupés en haut du conteneur, ce qui est particulièrement important pour les interfaces adaptatives.

La propriété align-content sans flexbox

Auparavant, pour utiliser la propriété align-content, il fallait définir display: flex, inline-flex, grid ou inline-grid. Désormais, align-content fonctionne de manière autonome, ce qui simplifie l’alignement vertical des éléments. Exemple :

.container {
  height: 10rem;
  background-color: lightblue;
  align-content: center;
}

Exemple standard d’alignement vertical avec display: flex :

Testez le code sur une page séparée

Et un exemple d’alignement vertical uniquement avec align-content :

Testez le code sur une page séparée

À noter que les blocs à l’intérieur du conteneur ne s’alignent pas nécessairement sur une seule ligne, mais sont bien alignés verticalement. Pour aligner les éléments items, appliquez simplement float: left;.

Important à noter! Cette propriété peut ne pas fonctionner dans les navigateurs mobiles pour le moment. Vous devriez utiliser la méthode avec le paramètre display: flex.

Conclusion

En 2025, CSS continue d’évoluer, offrant aux développeurs de nouveaux outils pour créer des interfaces plus flexibles et adaptatives. Parmi les nouveautés les plus utiles :

• La valeur balance pour la propriété text-wrap ;
• L’imbrication native en CSS ;
• Les pseudo-classes :user-valid et :user-invalid ;
• La propriété scrollbar-gutter ;
• La fonction mathématique round().

Ces évolutions simplifient non seulement le développement, mais ouvrent aussi de nouvelles possibilités pour la conception d’interfaces utilisateur de qualité. Il est recommandé de tester ces fonctionnalités et de les intégrer dans vos futurs projets.

D’autres propriétés intéressantes méritent également d’être mentionnées :

• L’unité de mesure cap, basée sur la hauteur des lettres majuscules ;
• La propriété content-visibility, qui accélère le rendu des pages ;
• transition-behavior, permettant d’animer un élément même si son display change ;
• Les fonctions mathématiques rem() et mod().

Ces nouvelles fonctionnalités CSS peuvent être discutées sur la page de discussion.