Hier sind die fünf modernen CSS-Funktionen für 2024, zusammen mit Beispielcodes für jede:

1. :has() Selektor:
   • Damit können Sie ein übergeordnetes Element basierend auf seinen untergeordneten Elementen formatieren.

Formatieren Sie das übergeordnete Div, wenn es ein .aktives untergeordnetes Element enthält

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

1. Containerabfragen:
   • Diese ermöglichen ein responsives Design basierend auf der Größe eines Containers.

Ändern Sie das Layout der Karte basierend auf ihrer Containergröße

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

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

1. Verschachtelungsselektoren:
   • CSS unterstützt jetzt Verschachtelungsregeln für saubereren Code.

Verschachtelte Stile für eine Schaltfläche innerhalb einer Karte

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

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

1. text-wrap-Eigenschaft: Diese Eigenschaft trägt dazu bei, den Text gleichmäßig über die Zeilen zu verteilen.

Verwenden Sie Textumbruch, um den Text in einem Absatz auszubalancieren

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

1. :focus-visible Pseudo-Klasse:
   • Dies verbessert die Zugänglichkeit durch die Gestaltung von Elementen, die über die Tastaturnavigation fokussiert werden.

Eingabefelder hervorheben, wenn der Fokus über die Tastatur erfolgt

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

Diese Beispiele veranschaulichen, wie Sie jede Funktion in Ihrem CSS implementieren und so die Reaktionsfähigkeit und Zugänglichkeit Ihrer Webdesigns verbessern.