5 astuces CSS qui vont changer votre front-end en 2025

CSS continue de surprendre : vous pouvez désormais créer des fenêtres contextuelles, des animations et des formulaires adaptatifs sans ligne JavaScript. Vous trouverez ci-dessous une sélection des fonctionnalités CSS les plus cool de 2025 qui méritent d'être adoptées.

💬 1. API Popover : éléments contextuels sans JS

Vous pouvez maintenant créer des fenêtres modales, des conseils et des listes déroulantes uniquement avec HTML et CSS!

<!-- Кнопка-триггер -->
<button popovertarget="myPopover">Подписаться</button>

<!-- Всплывающее окно -->
<div id="myPopover" popover>
  Спасибо за подписку! ❤️
</div>

Lorsque vous cliquez sur le bouton, une fenêtre contextuelle apparaît. Vous pouvez la fermer en appuyant sur Échap ou en cliquant à l'extérieur de la fenêtre.

Pour ajouter une animation fluide :

#myPopover {
  transform: translateY(-2rem);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#myPopover:open {
  transform: translateY(0);
  opacity: 1;
}

✨ 2. @starting-style — apparition en douceur des éléments

Habituellement, lorsqu'un élément apparaît, CSS applique immédiatement le style final. L'animation est nette. Le nouveau @starting-style vous permet de définir état initial, qui passera ensuite progressivement à la finale.

#myPopover {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#myPopover:open {
  transform: translateY(0);
  opacity: 1;
}

@starting-style {
  #myPopover:open {
    transform: translateY(-2rem);
    opacity: 0;
  }
}

📌 L'élément démarre légèrement au-dessus et devient transparent, puis se déplace doucement vers le bas et apparaît.

📏 3. Animation de la taille avec des mots-clés

CSS sait maintenant animer en douceur la transition entre height: 0 et height: auto, ainsi que min-content, max-content, fit-content.

Pour ce faire, vous devez autoriser l'utilisation de mots-clés :

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

Exemple :

<details>
  <summary>Показать</summary>
  <div class="content">Скрытое содержимое.</div>
</details>

.content {
  overflow: hidden;
  height: 0;
  transition: height 0.5s ease;
}

details[open] .content {
  height: auto;
}

Auparavant, il n'y avait pas du tout ce genre d'animation. Maintenant, il y a une ouverture en douceur.

📝 4. Entrée adaptative et zone de texte avec dimensionnement de champ

CSS a enfin appris ajuster automatiquement la taille de l'entrée, de la zone de texte et de la sélection en fonction du contenu. Il suffit d'ajouter :

input, textarea, select {
  field-sizing: content;
  max-width: 100%; /* ограничение по ширине */
}

Exemple :

<textarea placeholder="Write as much as you want..."></textarea>
<input type="text" placeholder="Name">
<select>
  <option>Коротко</option>
  <option>Очень длинный вариант</option>
</select>

Cette forme est soignée et s'adapte à l'utilisateur sans JS. 💡

🌗 5. Fonction light-dark() pour les thèmes sombres et clairs

Plus besoin de construire @media (prefers-color-scheme) — maintenant tout peut être fait sur une ligne avec la fonction light-dark() :

:root {
  color-scheme: light dark;
  --text-color: light-dark(#000000, #ffffff);
  --bg-color: light-dark(#ffffff, #000000);
}

💡 Les couleurs s'adaptent automatiquement au thème système de l'utilisateur.

CSS 2025 montre que chaque année, nous pouvons faire plus et plus beau sans une seule ligne de JavaScript. Essayez de nouvelles fonctionnalités et votre code deviendra non seulement plus simple, mais aussi plus moderne ✨