L’évolution du CSS en 2025

Le CSS a connu plus d’évolutions ces trois dernières années que durant la décennie précédente. Container Queries, Nesting natif, le sélecteur :has() et les nouvelles fonctions de couleur transforment radicalement notre façon de styliser le web.

Chez Lueur Externe, nous utilisons ces fonctionnalités modernes sur tous nos projets pour créer des interfaces performantes et maintenables.

CSS Grid avancé

Subgrid

Le subgrid permet à un élément enfant d’hériter de la grille de son parent :

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* header, content, footer */
}

Résultat : les en-têtes, contenus et pieds de carte s’alignent parfaitement entre les colonnes.

Nommage des lignes

.layout {
  display: grid;
  grid-template-columns:
    [full-start] 1fr
    [content-start] minmax(0, 800px)
    [content-end] 1fr
    [full-end];
}

.hero { grid-column: full; }
.article { grid-column: content; }

Container Queries : le responsive par composant

Les Container Queries permettent de styliser un composant en fonction de la taille de son conteneur, pas du viewport :

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

C’est une révolution pour le design de composants réutilisables : un même composant s’adapte automatiquement à l’espace disponible, qu’il soit dans une sidebar ou en pleine largeur.

Le sélecteur :has()

Le « sélecteur parent » tant attendu est enfin disponible :

/* Styliser un formulaire qui contient un champ invalide */
form:has(:invalid) {
  border-color: #ff3e51;
}

/* Styliser un article qui a une image */
article:has(img) {
  grid-template-columns: 300px 1fr;
}

/* Styliser le body quand un dialog est ouvert */
body:has(dialog[open]) {
  overflow: hidden;
}

CSS Nesting natif

Plus besoin de Sass pour le nesting :

.nav {
  background: #13100d;
  
  & a {
    color: #fafafa;
    text-decoration: none;
    
    &:hover {
      color: #ff3e51;
    }
  }
  
  @media (max-width: 768px) {
    & {
      flex-direction: column;
    }
  }
}

Nouvelles unités de viewport

Les unités svh, lvh et dvh résolvent le problème des barres d’adresse mobiles :

  • svh (small viewport height) : hauteur minimale (barre d’adresse visible)
  • lvh (large viewport height) : hauteur maximale (barre d’adresse masquée)
  • dvh (dynamic viewport height) : s’adapte dynamiquement
.hero {
  min-height: 100dvh; /* S'adapte à la barre d'adresse mobile */
}

Fonctions de couleur modernes

:root {
  --brand: oklch(65% 0.25 15); /* Rouge corail Lueur Externe */
  --brand-light: oklch(from var(--brand) calc(l + 0.2) c h);
  --brand-dark: oklch(from var(--brand) calc(l - 0.15) c h);
}

L’espace colorimétrique OKLCH offre une manipulation perceptuellement uniforme des couleurs, idéale pour générer des palettes cohérentes.

Application pratique

Sur ce site satellite développé par Lueur Externe, nous utilisons :

  • CSS Grid pour les layouts de pages et les grilles d’articles
  • Les variables CSS pour la palette de couleurs cohérente
  • Le nesting natif pour un code maintenable
  • Les unités modernes de viewport pour le hero responsive

Conclusion

Le CSS moderne élimine le besoin de nombreuses bibliothèques et préprocesseurs. Maîtriser ces fonctionnalités natives, c’est écrire un code plus performant, plus maintenable et plus léger. Lueur Externe intègre ces techniques dans chaque projet front-end.