CSS continue d’évoluer à un rythme remarquable, introduisant des fonctionnalités qui résolvent des problèmes pour lesquels nous avions autrefois besoin de solutions de contournement JavaScript complexes. Explorons les techniques qui façonnent le développement web moderne.
Requêtes de conteneur
Les requêtes de conteneur ont fondamentalement changé le design responsive. Au lieu de s’appuyer uniquement sur les dimensions de la fenêtre d’affichage, les composants peuvent désormais s’adapter en fonction de la taille de leur conteneur parent. Cela rend les composants véritablement réutilisables possibles.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 200px 1fr;
}
}Le sélecteur :has()
Souvent appelé le « sélecteur parent », :has() permet des styles qui dépendent de l’état des descendants ou des frères. Besoin de styliser un groupe de formulaire différemment lorsqu’il contient une entrée invalide ? :has() rend cela trivial sans intervention JavaScript.
Couches de cascade
Les déclarations @layer donnent aux développeurs un contrôle explicite sur la cascade, résolvant les guerres de spécificité qui ont tourmenté les feuilles de style pendant des décennies. Organisez vos styles en couches de réinitialisation, de base, de composants et d’utilitaires.
Transitions de vue
L’API View Transitions apporte des animations de transition de page natives aux applications multipages. Combinée avec l’intégration des transitions de vue d’Astro, la création d’expériences de navigation fluides de type application nécessite un code minimal.
Imbrication
L’imbrication CSS native élimine le besoin de préprocesseurs dans de nombreux projets. Écrivez des styles qui reflètent votre structure HTML sans recourir à Sass ou Less.