Voici les cinq fonctionnalités CSS modernes pour 2024, ainsi que des exemples de codes pour chacune :

1. :has() Sélecteur :
   • Cela vous permet de styliser un élément parent en fonction de ses enfants.

Stylez le div parent s'il contient un enfant .active

div:has(.active) {
       background-color: lightgreen;
   }

1. Requêtes de conteneur :
   • Ceux-ci permettent une conception réactive basée sur la taille d'un conteneur.

Modifier la présentation de la carte en fonction de la taille de son conteneur

   @container (min-width: 500px) {
       .card {
           display: flex;
           flex-direction: row;
       }
   }

   @container (max-width: 499px) {
       .card {
           display: block;
       }
   }

1. Sélecteurs d'imbrication :
   • CSS prend désormais en charge les règles d'imbrication pour un code plus propre.

Styles imbriqués pour un bouton dans une carte

   .card {
       background-color: white;
       padding: 20px;

       .button {
           background-color: blue;
           color: white;
           padding: 10px;
       }
   }

Propriété
1. text-wrap : Cette propriété permet de répartir le texte uniformément sur les lignes.

Utilisez le retour à la ligne pour équilibrer le texte dans un paragraphe

   p {
       text-wrap: balance;
       width: 300px; / Set a width for the effect /
   }

1.  : pseudo-classe visible au focus :
   • Cela améliore l'accessibilité en stylisant les éléments ciblés via la navigation au clavier.

Mettez en surbrillance les champs de saisie lorsque vous vous concentrez via le clavier

   input:focus-visible {
       outline: 2px solid blue;
       background-color: lightyellow;
   }

Ces exemples illustrent comment implémenter chaque fonctionnalité de votre CSS, améliorant ainsi la réactivité et l'accessibilité de vos conceptions Web.