HTML + CSS: Moderne CSS-Funktionen

Kurz: CSS hat sich stark weiterentwickelt. Vieles, wofür man früher Sass oder JavaScript brauchte, geht heute direkt. Prüfe die Browserunterstützung auf caniuse.com oder MDN.

Teil des Kurses HTML + CSS

Kapitel 24 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

CSS hat sich stark weiterentwickelt. Vieles, wofür man früher Sass oder JavaScript brauchte, geht heute direkt. Prüfe die Browserunterstützung auf caniuse.com oder MDN; alle hier gezeigten Funktionen sind in aktuellen Browsern verfügbar.

CSS-Verschachtelung (Nesting)

<style>
  .karte {
    padding: 14px; border: 2px solid #cbd5e1; border-radius: 10px; background: white;
    h3 { margin: 0 0 6px; color: #1e3a8a; }
    p { margin: 0; color: #475569; }
    a { color: #2563eb;
      &:hover { text-decoration: underline wavy; }
    }
    &:hover { border-color: #6366f1; }
    &.wichtig { border-color: crimson; }
    @media (min-width: 500px) { padding: 22px; }
  }
  body { background: #f1f5f9; }
</style>
<div class="karte"><h3>Verschachtelt</h3><p>Regeln stehen im Elternselektor.</p><a href="#">Link</a></div>

& steht für den Elternselektor. So bleibt zusammengehöriges CSS beieinander.

@layer: Reihenfolge der Kaskade steuern

Mit Ebenen legst du fest, welche Regeln Vorrang haben, unabhängig von der Spezifität:

@layer reset, basis, komponenten, werkzeuge;
 
@layer reset { * { margin: 0; box-sizing: border-box; } }
@layer basis { a { color: royalblue; } }
@layer komponenten { .button { background: navy; color: white; } }

Spätere Ebenen schlagen frühere. Ungeschichtete Regeln schlagen alle Ebenen. Praktisch, um Frameworks sauber zu überschreiben.

:has() und :is()

<style>
  label:has(input:checked) { background: #dcfce7; border-color: seagreen; }
  label { display: block; border: 2px solid #cbd5e1; padding: 8px 12px; margin: 4px 0; border-radius: 8px; cursor: pointer; }
  :is(h1, h2, h3):hover { color: crimson; }
  form:has(:user-invalid) { outline: 2px solid crimson; padding: 8px; }
</style>
<label><input type="radio" name="x"> Option A</label>
<label><input type="radio" name="x"> Option B</label>
<h3>Fahre über mich</h3>
<form><input type="email" value="falsch" required></form>

:has() ist der lang ersehnte Eltern-Selektor; :user-invalid meldet Fehler erst nach der Eingabe der Nutzerin.

Container Queries und Einheiten

Neue Einheiten passen sich dynamisch an: dvh/svh/lvh (Höhe des sichtbaren Fensters auf Handys, wenn Adressleisten ein-/ausfahren), cqw (Breite des Containers), lh (Zeilenhöhe), rlh.

.vollbild { min-height: 100dvh; }                 /* statt 100vh auf Handys */
.titel { font-size: clamp(1.2rem, 6cqw, 3rem); }  /* relativ zum Container */

aspect-ratio, gap, inset

<style>
  .video { aspect-ratio: 16 / 9; background: #0f172a; border-radius: 8px; display: grid; place-items: center; color: white; }
  .quadrat { aspect-ratio: 1; width: 80px; background: #f59e0b; border-radius: 50%; }
  .ueberlagerung { position: relative; height: 70px; background: #e2e8f0; }
  .ueberlagerung span { position: absolute; inset: 10px; background: #38bdf8; display: grid; place-items: center; }  /* top/right/bottom/left in einem */
</style>
<div class="video">16 / 9</div><div class="quadrat"></div>
<div class="ueberlagerung"><span>inset: 10px</span></div>

Logische Eigenschaften

Statt left/right/top/bottom gibt es logische Entsprechungen, die bei Sprachen mit anderer Schreibrichtung (Arabisch, Hebräisch) richtig mitwandern:

Physisch	Logisch
margin-left / margin-right	margin-inline-start / margin-inline-end
margin-top / margin-bottom	margin-block-start / margin-block-end
width / height	inline-size / block-size
text-align: left	text-align: start

Scrollen und Snapping

<style>
  html { scroll-behavior: smooth; }
  .karussell { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 6px; }
  .karussell > div { flex: 0 0 70%; height: 90px; scroll-snap-align: center; background: #a78bfa; border-radius: 10px; display: grid; place-items: center; color: white; font-weight: bold; }
  .ziel { scroll-margin-top: 60px; }
</style>
<div class="karussell"><div>1</div><div>2</div><div>3</div><div>4</div></div>

Weitere Neuerungen im Überblick

Funktion	Zweck
accent-color	Farbe von Formularelementen
color-mix(), oklch(), light-dark()	Farben mischen und Hell/Dunkel-Paare
text-wrap: balance / pretty	schönerer Zeilenumbruch
field-sizing: content	Textfelder wachsen mit dem Inhalt
@starting-style	Startzustand für Übergänge beim Einblenden
transition-behavior: allow-discrete	display-Wechsel animierbar
Popover API (popover-Attribut)	Menüs und Hinweise ohne JavaScript
anchor-positioning	Elemente an andere Elemente binden
@scope	Regeln auf einen Teilbaum begrenzen
View Transitions	animierte Seitenwechsel

<button popovertarget="info">Info öffnen</button>
<div id="info" popover style="padding:14px;border-radius:10px;border:2px solid #6366f1">
  Dieses Popover öffnet sich ohne JavaScript, schließt mit <kbd>Esc</kbd> und beim Klick daneben.
</div>

Ohne Präprozessor und Bibliothek auskommen?

• Sass/SCSS ergänzt Schleifen, Mixins und Funktionen; Variablen und Verschachtelung gibt es inzwischen auch in nativem CSS
• Tailwind CSS liefert viele kleine Hilfsklassen (p-4 text-lg); beliebt, aber nicht nötig
• Frameworks wie Bootstrap bieten Fertigkomponenten

Lerne zuerst natives CSS. Es ist die Grundlage aller dieser Werkzeuge.

Merke

• Verschachtelung mit &, Ebenen mit @layer
• :has() wählt Eltern, :is()/:where() gruppieren, :user-invalid meldet Eingabefehler
• Einheiten dvh, cqw, lh; aspect-ratio, inset, gap vereinfachen Layouts
• Logische Eigenschaften (margin-inline) funktionieren in jeder Schreibrichtung
• Popover, scroll-snap, text-wrap: balance ersetzen viel JavaScript
• Unterstützung vorher auf caniuse.com prüfen

Übungsaufgabe

Baue eine Karte mit verschachteltem CSS, einem :has()-Zustand (Checkbox hebt die Karte hervor) und einem Popover für zusätzliche Infos.

Quiz zur Selbstkontrolle

Was bedeutet & in verschachteltem CSS?

• Der Elternselektor (richtig)
• Und
• Ein Kommentar
• Eine Variable

Wofür ist :has()?

• Elemente nach ihren Kindern oder Zuständen auszuwählen (Eltern-Selektor) (richtig)
• Besitzverhältnisse
• Für Hash-Links
• Für Hover

Was macht 100dvh auf Handys besser als 100vh?

• Es berücksichtigt die sich ändernde Browser-Leiste (richtig)
• Es ist immer größer
• Es ignoriert die Höhe
• Es ist nur für Desktop

Weiter im Kurs

Zurück: Übergänge, Transformationen und Animationen

Weiter: CSS sauber organisieren

Alle Kapitel: HTML + CSS im Überblick