CSS statt JavaScript

Warum überhaupt CSS statt JS?

Jedes Stück JavaScript muss geladen, geparst, getestet und gepflegt werden. Was der Browser nativ kann, ist weniger Code und ein Fehler weniger. Moderne CSS- und HTML-Features ersetzen heute vieles, wofür früher ein Skript oder eine Bibliothek nötig war. Der Stand der Browser-Unterstützung stammt aus MDN und Web-Quellen (Stand Oktober 2026).

Was geht heute ohne JavaScript?

• Akkordeons. <details> und <summary> klappen von selbst. Mit gleichem name-Attribut öffnet sich immer nur ein Element der Gruppe. Baseline seit September 2024, in älteren Browsern bleibt es ein normales Aufklapp-Element.
• Popovers und Dialoge. Das Attribut popover liefert Top Layer, Schließen per Esc und Klick daneben (Baseline seit Januar 2025). <dialog> mit showModal() bringt Backdrop, Esc und macht den Rest der Seite inert. Mit @starting-style (Baseline seit August 2024) lassen sie sich animiert einblenden.
• Elternelement stylen. Mit :has() (Baseline seit Dezember 2023) reagiert ein Container auf seinen Inhalt, etwa auf eine gewählte Checkbox oder ein Radio-Feld.
• Positionierung. CSS Anchor Positioning hängt Tooltips und Menüs an ihr Auslöser-Element und kennt Fallback-Positionen, wenn der Platz fehlt. Damit entfallen Bibliotheken wie Popper.js oder Floating UI. Seit Firefox 147 (Januar 2026) in allen drei Engines verfügbar.
• Responsive Komponenten. Container Queries reagieren auf die Größe des Elternelements statt des Fensters.
• Scroll-Animationen. Mit animation-timeline: scroll() oder view() hängt eine Animation am Scroll-Fortschritt, etwa Fortschrittsbalken oder Einblenden. Das ersetzt IntersectionObserver-Skripte. Chrome und Safari können es, in Firefox steht es nach den gefundenen Quellen noch hinter einem Flag. Deshalb @supports verwenden und nur als Zusatz einsetzen.
• Seitenübergänge. View Transitions animieren den Wechsel zwischen zwei Zuständen. Same-Document-Transitions funktionieren in allen großen Browsern (Firefox ab 144). Cross-Document-Transitions zwischen echten Seiten fehlen in Firefox noch.
• Farbschemata und Typografie. light-dark() (Baseline seit Mai 2024) und text-wrap: balance für Titel (Baseline seit Oktober 2024) sparen Media-Query-Blöcke und Typografie-Skripte.
• Wachsende Textfelder. field-sizing: content lässt Textareas mit dem Inhalt wachsen. Laut MDN erst seit Juni 2026 in allen aktuellen Browsern, daher noch ein junges Feature.

Ein Beispiel aus meinem Portfolio: Tabs per CSS

Die Sequenzdiagramme in den Projektkarten schalte ich mit versteckten Radio-Buttons und :checked um, ganz ohne JavaScript:

 

.panel { display: none; }
input:nth-of-type(1):checked ~ .panel-1,
input:nth-of-type(2):checked ~ .panel-2 { display: block; }

 

Das ist bewusst eine pragmatische Lösung. Laut MDN gibt es für echte ARIA-Tabs mit Pfeiltasten-Navigation, Home und End keinen reinen HTML/CSS-Ersatz. Wo Tabs wirklich als Tabs bedient werden müssen, braucht es also JavaScript.

Wo hat es Grenzen?

Nicht jedes Feature ist überall verfügbar. Ich prüfe den Stand auf MDN, setze neue Features als Zusatz ein und nutze bei Bedarf @supports. Komplexe Logik, Daten laden, Zustand über mehrere Komponenten und barrierefreie Widgets wie Tabs bleiben Sache von JavaScript.

Was ist am Ende dein Fazit?

Erstens, erst HTML und CSS prüfen. Bevor ein Skript entsteht, lohnt sich die Frage, ob der Browser es schon kann.

Zweitens, Support prüfen statt annehmen. Baseline-Status und Browser-Tabellen entscheiden, ob ein Feature Grundlage oder nur Zusatz ist.

Drittens, JavaScript gezielt einsetzen. Dort, wo echte Logik oder Barrierefreiheit es verlangt, nicht für Dekoration.