Les nouvelles avancées du CSS : plus puissant et plus pratique • Paul Fleury - Design & développement

Dans les mondes du développement web, le CSS a longtemps été perçu comme un outil moins dynamique comparé au JavaScript. Toutefois, récemment lors du Google IO 2024, de nouvelles fonctionnalités CSS ont été dévoilées, promettant de simplifier nos vies et de réduire notre dépendance vis-à-vis des librairies JavaScript lourdes.

1. Animation CSS sur scroll : dynamisme sans JavaScript

@scroll-timeline scrollAnimation {
  scroll-offsets: 0%, 100%;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation-timeline: scrollAnimation;
  animation-name: fadeIn;
}

Ces nouvelles propriétés, animation-timeline et animation-range, nous permettent de réaliser des animations basées sur la position du scroll, sans aucune ligne de JavaScript. Cela ouvre des portes à des mises en page dynamiques et interactives basées uniquement sur CSS.

2. Transitions entre vues : animations fluides

.view-transition {
  transition-property: opacity, transform;
  transition-duration: 0.5s;
}

[data-transition-enter] {
  opacity: 0;
  transform: scale(0.9);
}

[data-transition-enter-active] {
  opacity: 1;
  transform: scale(1);
}

Grâce à la propriété view-transition, il est désormais possible d'animer des transitions d'éléments lors du changement de leur état dans la page, apportant fluidité et réactivité aux interactions utilisateurs, sans surcharger le site avec des scripts supplémentaires.

3. Propriété « Popover » : tooltip intelligente

.popover {
  position: absolute;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
  visibility: hidden;
}

.popover[data-visible='true'] {
  visibility: visible;
}

Imaginez pouvoir créer un tooltip sophistiqué sans JavaScript ! La propriété popover, associée à view-transition, vous permet de le faire, rendant les interactions plus légères et le code plus propre.

Conclusion

Ces améliorations dans le standard CSS réduisent la complexité et améliorent la performance en limitant l’utilisation du JavaScript exclusivement aux cas où il est vraiment nécessaire.

css