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

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 :

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

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

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

@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

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 !

<div class="form-container">
<input type="text" placeholder="Je m'adapte au texte" />
<textarea placeholder="Je m'adapte aussi !"></textarea>
<select>
  <option>Option 1</option>
  <option>Une option plus longue</option>
  <option>Une très très longue option</option>
</select>
</div>

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 :

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

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

height: auto enfin animable !

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

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

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

.expandable.open {
  height: auto;
}

Position Anchor : le positionnement facile

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

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

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

Les autres nouveautés importantes

Custom Scrollbars

Enfin une façon standard de styler les scrollbars :

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

light-dark()

Une fonction pour gérer facilement le dark mode :

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

@property

Pour typer tes variables CSS et les rendre animables :

@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 !

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

• Les bases de Tailwind CSS
• CSS Grid en détail
• Les animations CSS