Neues CSS kann Ihr Leben einfacher machen

Der Zweck dieses Leitfadens besteht darin, Ihnen eine Sammlung innovativer und leistungsstarker Funktionen vorzustellen, die kürzlich in CSS eingeführt wurden. Während dieser Artikel einen Überblick über ihre Syntax und praktische Anwendungsfälle bietet, gibt es bei jeder Funktion noch viel mehr Tiefe, die es zu erkunden gilt. Nutzen Sie dies als Ausgangspunkt, um tiefer in diese bahnbrechenden Fortschritte einzutauchen.

1. Containerabfragen (Größe)

Was sind größenbasierte Containerabfragen?

Größenbasierte Containerabfragen ermöglichen es Ihnen, Stile auf untergeordnete Elemente basierend auf den Abmessungen ihres übergeordneten Containers anzuwenden, anstatt sich wie bei herkömmlichen Medienabfragen auf die Größe des gesamten Ansichtsfensters zu verlassen.

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

Warum ist das wichtig?

Dies erweckt das Konzept der „CSS-Mixins“ zum Leben. So wie Sass-Mixins die Wartbarkeit verbessern, erweitern stilbasierte Containerabfragen die nativen Fähigkeiten von CSS, berücksichtigen die Kaskade und ermöglichen eine größere Flexibilität.

Browser-Unterstützung:

• Unterstützt: Chrome und Derivate.

• Demnächst erhältlich: Safari.

• Nicht unterstützt: Firefox.

• Verbesserungen: Begrenzt.

• Polyfill: Nicht verfügbar.

3. Containereinheiten

Was sind Containereinheiten?

Containereinheiten sind reaktionsfähige Maßeinheiten (z. B. cqw, cqh, cqmin, cqmax), die Abmessungen basierend auf der Containergröße und nicht auf dem Ansichtsfenster berechnen. Diese funktionieren ähnlich wie vw (1 % der Breite des Ansichtsfensters), sind jedoch auf einen Container beschränkt.

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

Warum ist das wichtig?

Wenn innere Elemente proportional zu ihrem übergeordneten Container skaliert werden müssen, bieten Containereinheiten eine saubere, reine CSS-Lösung. Ein häufiger Anwendungsfall ist die Skalierung von Typografie oder Abständen innerhalb von Karten oder modularen Komponenten.

Browser-Unterstützung:

• Volle Unterstützung: Moderne Browser.

• Verbesserungen: Ja, mit Fallbacks.

• Polyfill: Verfügbar.

4. :has() Pseudo-Selektor

Was ist der :has()-Selektor?

Mit der Pseudoklasse :has() können Sie übergeordnete Elemente basierend auf dem Vorhandensein bestimmter untergeordneter Elemente in ihnen formatieren.

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

Warum ist das wichtig?

Der :has()-Selektor fungiert effektiv als „Elternselektor“ in CSS und ermöglicht es, Eltern basierend auf ihren Kindern zu formatieren. Sie können beispielsweise :has() verwenden, um ein übergeordnetes Formularfeld nur dann hervorzuheben, wenn eine Fehlermeldung vorliegt.

Browser-Unterstützung:

• Unterstützt: Alle gängigen Browser.

• Polyfill: Nur JavaScript.

*5. Übergänge anzeigen
*
Was sind Ansichtsübergänge?

Diese Funktion führt zwei Arten von Animationen ein:

1. Einzelseitige Übergänge (erfordern JavaScript).

2. Mehrseitige Übergänge (nur CSS).
   

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

*Warum ist das wichtig?
*
Übergänge verbessern das Benutzererlebnis, indem sie Elemente während Zustandsänderungen animieren und dafür sorgen, dass sich Interaktionen reibungsloser anfühlen. Sie verwenden „Tweening“, bei dem Animationen zwischen Start- und Endstatus interpolieren, ohne jeden Schritt manuell zu definieren.

Browser-Unterstützung:

• Unterstützt: Chrome und Derivate.

• Nicht unterstützt: Safari, Firefox.

• Verbesserungen: Ja, mit Fallback-Animationen.

6. Verschachtelung

Was ist Verschachtelung?

CSS-Verschachtelung ermöglicht es Ihnen, untergeordnete Selektoren innerhalb ihrer übergeordneten Regeln zu schreiben, wodurch der Code sauberer und wartbarer wird.

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

Warum ist das wichtig?

Verschachtelung reduziert die Redundanz in CSS, indem verwandte Stile gruppiert werden. Eine übermäßige Verwendung kann jedoch zu übermäßig spezifischen Selektoren und einer eingeschränkten Wiederverwendbarkeit führen.

Browser-Unterstützung:

• Volle Unterstützung: Moderne Browser.

7. Scrollgesteuerte Animationen

Was sind scrollgesteuerte Animationen?

Diese Animationen sind an das Scrollen gebunden und können mithilfe von CSS implementiert werden, ohne auf JavaScript angewiesen zu sein.

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

Warum ist das wichtig?

Von Fortschrittsanzeigen bis hin zu Parallaxeneffekten verbessern scrollgesteuerte Animationen die Interaktivität und reduzieren die Abhängigkeit von JavaScript für leistungskritische Aufgaben.

Browser-Unterstützung:

• Unterstützt: Chrome.

• Demnächst erhältlich: Firefox.

8. Untergitter

Was ist Subgrid?

Der Untergitterwert ermöglicht die Ausrichtung untergeordneter Rasterelemente an den Zeilen oder Spalten ihres übergeordneten Rasters, ohne dass Rasterdefinitionen dupliziert werden.

if (!document.startViewTransition) {
  updateDOM();
} else {
  document.startViewTransition(() => updateDOM());
}

Warum ist das wichtig?

Subgrid sorgt für eine konsistente Ausrichtung über verschachtelte Rasterstrukturen hinweg und erleichtert so die Wartung komplexer Layouts.

Browser-Unterstützung:

• Volle Unterstützung: Alle modernen Browser.

Abschließende Gedanken

CSS entwickelt sich weiterhin in einem aufregenden Tempo weiter. Mit Funktionen wie Containerabfragen, Ansichtsübergängen und Unterraster wird die Sprache robuster und intuitiver für die moderne Webentwicklung. Behalten Sie zukünftige Entwicklungen im Auge, einschließlich relativer Farbsyntax, bereichsbezogenem CSS und neuen HTML-Elementen wie , die noch größere Designmöglichkeiten versprechen.