Retour • 17/12/2024

Toutes les nouveautés CSS en 2024 : c'est impressionnant

Écris par Melvyn Malherbe le 17/12/2024

2024 a été une année incroyable pour CSS ! On a eu droit à des fonctionnalités que les développeurs attendaient depuis des années. Dans cet article, je vais te montrer les plus importantes nouveautés qui vont changer ta façon de coder.

Les animations au scroll enfin natives !

Fini les bibliothèques JavaScript pour faire des animations au scroll ! CSS peut maintenant le faire nativement avec les scroll-driven animations.

Voici un exemple simple :

CSS

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.reveal {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 20% cover 50%;
}

Cette animation va :

Démarrer quand l"élément entre dans le viewport
S"exécuter progressivement pendant le scroll
Se terminer quand l"élément est à 50% visible

Tu peux même faire des animations plus complexes comme celle-ci :

CSS

@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide {
  animation: slide-in linear;
  animation-timeline: scroll();
  animation-range: 0 400px;
}

Field Sizing : Des inputs qui s'adaptent automatiquement

Une nouveauté très attendue : le field-sizing qui permet aux champs de formulaire de s'adapter automatiquement à leur contenu !

Avantages du field-sizing :

Plus besoin de JavaScript pour adapter la taille
Fonctionne avec input, textarea et select
S'adapte automatiquement au contenu

La transition entre pages enfin possible !

Une des plus grosses nouveautés, c"est la possibilité de faire des transitions entre pages avec view-transitions. Plus besoin de SPA pour avoir de belles transitions !

Voici comment l"utiliser :

CSS

/* Dans ton layout global */
@view-transition {
  navigation: auto;
}

/* Pour un élément spécifique */
.mon-element {
  view-transition-name: mon-element;
}

Pour que ça fonctionne, il faut que :

Les deux pages soient sur le même domaine
Les deux pages activent les view transitions
Les éléments aient le même view-transition-name

height: auto enfin animable !

C"est LA fonctionnalité que tout le monde attendait : pouvoir animer vers height: auto ! Voici comment faire :

CSS

:root {
  interpolate-size: allow-keywords;
}

.expandable {
  height: 0;
  transition: height 0.3s;
}

.expandable.open {
  height: auto;
}

Avantages :

Plus besoin de JavaScript
Fonctionne avec n"importe quelle hauteur
Super fluide

Position Anchor : le positionnement facile

Fini les calculs compliqués pour positionner des tooltips ou des popovers ! anchor-position est là :

CSS

.trigger {
  anchor-name: --tooltip;
}

.tooltip {
  position: fixed;
  position-anchor: --tooltip;
  position-area: block-end;
}

Parfait pour :

Les tooltips
Les menus déroulants
Les popovers
Les modales

Les autres nouveautés importantes

Custom Scrollbars

Enfin une façon standard de styler les scrollbars :

CSS

.scroller {
  scrollbar-color: hotpink blue;
  scrollbar-width: 10%;
}

light-dark()

Une fonction pour gérer facilement le dark mode :

CSS

:root {
  --primary: light-dark(#333, #fafafa);
  --bg: light-dark(white, #121212);
}

@property

Pour typer tes variables CSS et les rendre animables :

CSS

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

Conclusion

2024 est clairement l"année où CSS est devenu majeur. On peut maintenant faire nativement :

Des animations au scroll
Des transitions entre pages
Des animations vers height: auto
Du positionnement intelligent

Plus besoin de JavaScript pour la plupart des animations et interactions basiques !

Attention quand même : certaines fonctionnalités ne sont pas encore supportées par tous les navigateurs. Pense à vérifier sur Can I Use.

Deviens développeur web

Profite d'une formation HTML / CSS / JS pour devenir développeur web rapidement.

Reçois la formation gratuitement dans ta boîte mail :

Si tu veux approfondir tes connaissances CSS, je te conseille de lire :