La Nouvelle Version de CSS en 2024 : Une Révolution

CSS (Cascading Style Sheets) continue d’évoluer pour offrir aux développeurs des outils plus puissants et intuitifs. La version 2024 de CSS introduit des fonctionnalités innovantes qui résolvent des problèmes persistants et simplifient la création d’expériences utilisateur riches. Voici un tour d’horizon des nouveautés les plus marquantes.

Rebecca Purple : Une Couleur Hommage

Rebecca Purple (« #663399 ») est maintenant une couleur standard reconnue dans CSS. Elle rend hommage à Rebecca Meyer, fille du pionner en CSS Eric Meyer.

body {
  background-color: rebeccapurple;
}

Cette couleur, bien que déjà utilisable, est maintenant un symbole officiel dans CSS. Elle offre une teinte esthétique souvent utilisée pour des designs modernes.

1. Align-Content

Avec align-content, centrer une div n’a jamais été aussi simple. Plus besoin de flexbox ni de grid, la tâche est rendue bien plus simple.

/* avant */
.container {
  display: flex;
  flex-wrap: wrap;
  /* ... diverses propriétés pour centrer */ 
}

/* après*/
.container {
  display: block;
  align-content: center;
}

@property : Rendre les Variables CSS Animables

La règle @property permet de définir des propriétés personnalisées (variables CSS) qui peuvent être animées ou transitiées.

Avant cela, les variables (associées à des couleurs) étaient interprétées comme des strings ce qui rendait impossible certaines animations, notamment celles impliquant des gradients

/* Avant */

:root {
 --pink: hotpink; /*Déclaration de la variable */
}

.style {
 color: var(--pink);
}

/* Après */
@property --pink {
 syntax: '<color>';
 inherits: false;
 initial-value: hotpink;
}
 /* ...*/

/* Deuxième exemple */
@property --rotation {
  syntax: '<angle>'; /* Il s'agit d'un type */ 
  inherits: false;
  initial-value: 0deg;
}

.box {
  animation: rotate 2s infinite;
}
@keyframes rotate {
  from {
    --rotation: 0deg;
  }
  to {
    --rotation: 360deg;
  }
}
.box {
  transform: rotate(var(--rotation));
}

Cela étend les capacités des animations CSS et résout les limitations des variables CSS non animables auparavant.

@starting-style : Contrôler les États Initiaux

La directive @starting-style spécifie les styles initiaux des éléments avant que d'autres styles ne soient appliqués. Elle permet de définir un style lorsque l’élément est affiché pour la première fois sur la page.

/* Premier exemple */ 

@starting-style button {
  background: grey;
  color: white;
}

/* Deuxième exemple*/
@starting-style {
 dialog[open] {
  translate: 0 100vh;
 }
}

dialog[open] {
 translate: 0 0;
 transition: translate 0.7, display 0.7s allow-discrete;
}

Cette fonctionnalité assure un rendu cohérent des éléments avant que JavaScript ou d’autres styles n’interviennent.

Nouvelles Fonctions Mathématiques : round(), rem(), mod()

1. round() : Arrondir les Valeurs

.box {
  width: round(33.3333%, 1%);
}

Cette fonction simplifie l’arrondi précis des dimensions calculées.

2. rem() : Convertir en Unités rem

.box {
  margin: rem(32px);
}

Elle automatise la conversion de pixels en rem pour une meilleure résponsivité.

3. mod() : Calculer le Modulo

.box:nth-child(mod(n, 3)) {
  color: red;
}

Cette fonction permet de gérer facilement des motifs répétitifs dans le design.

light-dark() : Adapter les Styles aux Thèmes

La fonction light-dark() applique des styles différents selon le mode clair ou sombre. Elle permet de gérer bien plus simplement les différents modes./

/* Premier exemple */
:root {
 color-scheme: light dark;
}

.omni-theme {
 background: light-dark(white, black);
 color: light-dark(black, white);
}

/* Deuxième exemple */
body {
  background-color: light-dark(white, black);
  color: light-dark(black, white);
}

Pseudo-sélecteur : :user-valid

Le sélecteur :user-valid cible les champs de formulaire valides remplis par l'utilisateur. Elle simplifie la validation visuelle des formulaires.

/* Avant */
input:valid {
 color: green;
}

input:invalid {
 color: red;
}

/* Après */
input:user-valid {
 color: green;
}

input:user-invalid {
 color: red;
}

Container Queries : Une Révolution pour le Design Réactif

Les container queries permettent de définir des styles en fonction des dimensions d’un conteneur au lieu de la taille de la fenêtre.

Elles résolvent le problème des designs réactifs complexes, surtout dans les composants imbriqués.

.container {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .item {
    font-size: 2rem;
  }
}

Pseudo-classe : :has()

:has() sélectionne les éléments parents en fonction de leurs enfants.

div:has(> img) {
  border: 2px solid blue;
}

Subgrid : Contrôle Total des Grilles Imbriquées

La propriété subgrid permet aux grilles imbriquées d'hériter des dimensions de la grille parent.

grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.subgrid {
  display: subgrid;
  grid-column: 1 / 3;
}

Subgrid résout les problèmes de mise en page imbriquée avec un contrôle précis sur l’alignement.