CSS INTENSIVSTATION

Neue CSS-Features

Diese Liste zeigt moderne CSS-Features, die in aktuellen Projekten häufig verwendet werden. Der Fokus liegt auf Praxis, Verständlichkeit und realem Nutzen.

Wichtig: Viele Features sind inzwischen breit unterstützt – trotzdem lohnt sich bei Projekten ein kurzer Check mit @supports, wenn du auf Nummer sicher gehen willst.

Layout & Struktur

:has() – Parent Selector

Mit :has() kann ein Element abhängig von seinem Inhalt gestylt werden. Zum ersten Mal ist es möglich, „nach unten“ zu selektieren. 

.card:has(img) {
  border: 2px solid green;
}

Container Queries – @container

Container Queries reagieren auf die Grösse eines Elternelements statt auf den Viewport. Sie eignen sich besonders für wiederverwendbare Komponenten.

@container (min-width: 400px) {
  .item {
    flex-direction: row;
  }
}

subgrid

Mit subgrid kann ein Kind-Grid die Spalten oder Zeilen des Parent-Grids übernehmen. Das vereinfacht komplexe Grid-Layouts deutlich.

.child {
  display: grid;
  grid-template-columns: subgrid;
}

gap in Flexbox

Die Eigenschaft gap funktioniert nicht nur in Grid-, sondern auch in Flexbox-Layouts. Abstände lassen sich damit sauber und ohne Margin-Hacks definieren.

.row {
  display: flex;
  gap: 1rem;
}

Selektoren & Accessibility

:is()

:is() fasst mehrere Selektoren zusammen und reduziert die Code-Menge. Die Spezifität bleibt dabei gering.

:is(h1, h2, h3) {
  line-height: 1.2;
}

:where()

:where() funktioniert ähnlich wie :is(), hat aber immer eine Spezifität von 0. Ideal für Basis- und Reset-Styles.

:where(nav a) {
  color: inherit;
}

:not()

Mit :not() lassen sich Elemente gezielt ausschliessen. Seit neueren CSS-Versionen können mehrere Selektoren kombiniert werden.

button:not(.primary, .danger) {
  opacity: 0.7;
}

:focus-visible

Mit :focus-visible wird ein Fokus-Stil nur angezeigt, wenn ein Element per Tastatur fokussiert wird.

button:focus-visible {
  outline: 3px solid blue;
}

Grössen & Responsive Design

Neue Viewport Units (svh, lvh, dvh)

Diese Units lösen Probleme mit mobilen Browsern und dynamischen Adressleisten. Besonders dvh ist für Fullscreen-Layouts nützlich. 

.hero {
  min-height: 100dvh;
}

min(), max() und clamp()

Mit diesen Funktionen lassen sich responsive Grössen ohne Media Queries umsetzen. Häufige Einsatzbereiche sind Schriftgrössen und Abstände. 

h1 {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}

aspect-ratio

aspect-ratio definiert feste Seitenverhältnisse für Elemente, z. B. für Videos oder Bilder.

.video {
  aspect-ratio: 16 / 9;
}

UI & Komponenten

<dialog> und ::backdrop

Das <dialog>-Element ermöglicht native Modals. Der Hintergrund kann mit ::backdrop direkt gestylt werden.
Dialog Beispiel testen.

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

accent-color

Mit accent-color lassen sich native Form-Elemente einfärben, ohne sie komplett neu zu bauen.

input[type="checkbox"] {
  accent-color: hotpink;
}

CSS Nesting

CSS unterstützt jetzt natives Nesting. Selektoren können wie bei Preprozessoren verschachtelt werden.
CSS Nesting Beispiel testen.

.card {
  padding: 1rem;

  & h2 {
    margin: 0;
  }
}

@layer – Cascade Layers

Mit Cascade Layers lässt sich die Reihenfolge von Styles kontrollieren, ohne auf !important zurückzugreifen.

@layer reset, base, components, utilities;

@scope

@scope begrenzt CSS-Regeln auf einen bestimmten Bereich. So bleiben Styles lokal und verursachen weniger Nebenwirkungen.

@scope (.card) {
  h2 {
    color: red;
  }
}

Animation & Effekte

Scroll-driven Animations

Mit scroll-timeline lassen sich Animationen direkt an den Scroll-Fortschritt koppeln. Dadurch sind Scroll-Effekte ohne JavaScript möglich. 

.progress {
  animation: grow linear both;
  animation-timeline: scroll();
}

view-timeline

view-timeline startet Animationen, wenn ein Element in den Viewport eintritt oder ihn verlässt. 

.card {
  animation: fade-in 1s both;
  animation-timeline: view();
}

prefers-reduced-motion

Diese Media Query berücksichtigt Nutzer:innen, die reduzierte Animationen bevorzugen.

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

„next level“ CSS-Features

color-mix()

Mit color-mix() können Farben direkt in CSS gemischt werden. Das ist nützlich für Hover-Zustände oder Design-Systeme. 

background-color: color-mix(
  in srgb,
  red 70%,
  white
);

color-contrast()

color-contrast() wählt automatisch die bestmögliche Kontrastfarbe aus einer Liste aus (Accessibility).

color: color-contrast(
  white vs black, navy
);

@supports selector(:has(*))

Mit @supports lassen sich neue Features gezielt absichern. So kann modernes CSS nur dort aktiviert werden, wo es unterstützt wird.

@supports selector(:has(*)) {
  .card:has(img) {
    border: 2px solid green;
  }
}

env(safe-area-inset-*)

Diese Variablen berücksichtigen Safe Areas auf mobilen Geräten (z. B. iPhone mit Notch).

.app {
  padding-bottom: env(safe-area-inset-bottom);
}

Logical Properties

Logical Properties ersetzen richtungsabhängige Eigenschaften und funktionieren sowohl für LTR- als auch RTL-Sprachen.

.box {
  margin-inline: 1rem;
  padding-block: 0.75rem;
}

inset statt top / right / bottom / left

inset ist die Kurzschreibweise für alle vier Positionierungswerte.

.modal {
  position: absolute;
  inset: 0;
}

Kurz gesagt

Wenn du modernes CSS lernst, sind das die wichtigsten Features, die du zuerst beherrschen solltest.

  • :has()
  • Container Queries
  • clamp()
  • CSS Nesting
  • @layer
  • @scope