Modernes CSS ohne Sass: Welche Funktionen laufen nativ?

12 CSS-Funktionen, die Sie ohne Build-Schritt nutzen können

Michael Dobler

Autor Dr. Web

28. September 2026

3 Min. Lesezeit

Für verschachtelte Regeln, Farbmischung und einen Elternselektor brauchen Webentwickler keinen Build-Schritt mehr, weil alle großen Browser diese CSS-Funktionen selbst beherrschen. Der Entwickler Flavio Copes prüfte im September zwölf solcher Funktionen, die Sass, PostCSS-Plugins und JavaScript-Kniffe ersetzen. Eine davon fehlt ausgerechnet in Firefox, der in Deutschland fast dreimal so verbreitet ist wie im weltweiten Schnitt.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

CSS ohne Build-Schritt ist für viele Teams noch ungewohnt: Das npm-Paket sass verzeichnete in der Woche vom 20. bis 26. September rund 35,9 Millionen Downloads, automatisierte Builds eingerechnet.^[5] In vielen Projekten übersetzt der Präprozessor damit Verschachtelungen und Farbberechnungen, die der Browser inzwischen selbst ausführt. Copes führt die meisten gewohnten CSS-Werkzeuge darauf zurück, dass der Sprache früher etwas fehlte.^[1]

Das Wichtigste in Kürze

Elf der zwölf Funktionen auf der Liste von Flavio Copes, darunter Verschachtelung, :has() und Container Queries, laufen in allen großen Browsern.^[1]
Scroll-gesteuerte Animationen fehlen in der stabilen Firefox-Version, @starting-style gilt erst als neu verfügbar.
Sass entfernt das alte @import frühestens mit Dart Sass 3.0, das nicht vor Mitte Oktober 2026 erscheinen soll. Viele Stylesheets brauchen deshalb ohnehin einen Umbau.
In Deutschland kommt Firefox auf 8,54 % Marktanteil, weltweit auf 2,98 %.

Welche Aufgaben von Sass übernimmt der Browser selbst?

Oranges Rad mit Anhänger „Nicht mehr nötig“ und Schraubenschlüssel vor weißem Hintergrund — Moderne CSS-Features wie verschachtelte Regeln, oklch()-Farbberechnungen, :is()-Selektoren und @layer-Kaskaden sind nun in allen Browsern verfügbar

Verschachtelte Regeln, Farbberechnungen mit oklch() und color-mix(), Selektorgruppen per :is() sowie Kaskaden-Ebenen per @layer schreiben Entwickler heute in reines CSS. Diese Funktionen gelten als Baseline Widely available und laufen seit mindestens 30 Monaten in Chrome, Edge, Firefox und Safari.^[2]^[3]

Copes stellt jeder Funktion den Umweg gegenüber, den sie überflüssig macht.^[1] Mit dem Elternselektor :has() erhält ein Formularfeld einen roten Rahmen, sobald die Eingabe darin ungültig ist; früher setzte dafür ein Skript eine Klasse am umgebenden Element. Per Container Query richtet sich das Layout einer Karte nach der Breite ihres Behälters statt nach der Bildschirmbreite, per Subgrid stehen Überschriften und Buttons benachbarter Karten auf einer Linie.

Auch das verbreitete JavaScript-Snippet, das auf Smartphones die sichtbare Höhe ausmaß, hat ausgedient. Die Angabe 100vh bezog sich dort auf die Ansicht mit eingeklappter Browserleiste, der untere Rand eines bildschirmfüllenden Aufmachers verschwand dadurch unter der Leiste. Mit den neuen Viewport-Einheiten svh und dvh berücksichtigt der Browser die eingeblendete Leiste.^[1]

Ein natives Gegenstück für alles bietet CSS allerdings nicht. Eigene Funktionen per @function und Bedingungen per if() unterstützen laut den Kompatibilitätsdaten des Projekts web-features bisher nur Chrome und Edge.^[3] Mixins und Schleifen bleiben damit eine Domäne des Präprozessors.

Warum lohnt sich der Umbau gerade jetzt?

Das Sass-Team entfernt die Regel @import, mit der viele Stylesheets ihre Teildateien laden, frühestens mit Dart Sass 3.0. Diese Version soll nicht vor Mitte Oktober 2026 erscheinen, zwei Jahre nach der Abkündigung in Version 1.80.0.^[4]^[5]

Seit Version 1.80.0 gibt der Compiler bei jedem @import eine Warnung aus. Das Sass-Team empfiehlt den Umstieg auf das Modulsystem mit @use und @forward und liefert dafür ein eigenes Migrationswerkzeug.^[4] Aktuell steht Dart Sass bei Version 1.105.0 vom 22. September, eine Version 2.0 ist noch nicht erschienen.^[5]

Stylesheets, die für den Umzug auf @use ohnehin Datei für Datei überarbeitet werden, lassen sich im selben Durchgang auf natives CSS umstellen. Projekte, die Sass nur für Verschachtelung und Farbvarianten einsetzen, kommen danach ganz ohne Compiler aus. Welche Präprozessoren noch gepflegt werden, zeigt der Vergleich von acht CSS-Werkzeugen.

Natives CSS statt Build-Schritt: die Eckdaten

Wie weit Browser den Präprozessor ersetzen und warum der Firefox-Anteil in Deutschland zählt

11 von 12

Funktionen auf der Liste von Flavio Copes laufen in allen großen Browsern

30 Monate

Unterstützung in allen Kernbrowsern bis zum Status „Baseline Widely available“

35,9 Mio.

Downloads des npm-Pakets sass vom 20. bis 26. September 2026

Okt. 2026

frühester Termin für Dart Sass 3.0, das @import streicht

Firefox-Marktanteil im August 2026

Deutschland, Desktop

15,49 %

Deutschland, alle Geräte

8,54 %

Weltweit, alle Geräte

2,98 %

Wegen der Abkündigung von @import müssen viele Teams ihre Stylesheets ohnehin überarbeiten. Nutzen Sie diesen Durchgang, um jede Sass-Zeile zu streichen, die der Browser längst selbst versteht.
— Markus Seyfferth, Chefredakteur Dr. Web

Worauf sollten Teams in Deutschland achten?

Firefox kam im August in Deutschland auf 8,54 % Marktanteil über alle Geräte und auf 15,49 % am Desktop, weltweit lag der Wert bei 2,98 %. Lücken in Firefox betreffen deutsche Websites deshalb deutlich stärker als Websites im internationalen Durchschnitt.^[6]

Ausgerechnet dem Mozilla-Browser fehlt die einzige Funktion auf der Liste ohne Baseline-Status. Scroll-gesteuerte Animationen laufen in Chrome seit Version 115 und in Safari seit Version 26, in Firefox bisher nur in der Testversion Nightly hinter einem Schalter.^[1]^[3] Copes rät, solche Effekte in eine Abfrage per @supports zu packen, damit der Inhalt auch ohne Animation lesbar bleibt. Wie weit die Technik Bibliotheken wie GSAP ScrollTrigger schon ablöst, beschreibt der Beitrag zu Scroll-Animationen ohne JavaScript.

Ein zweiter Sonderfall betrifft @starting-style. In Firefox erscheint ein Popover per Übergang mit sanfter Einblendung, beim Schließen verschwindet das Element dagegen schlagartig, weil der Browser einen Übergang der Eigenschaft display noch nicht unterstützt.^[1] Den Status Widely available erreicht @starting-style voraussichtlich im Februar 2027.

Für die Umstellung empfiehlt sich diese Reihenfolge:

Zuerst erfassen, welche Sass-Funktionen das Projekt tatsächlich nutzt.
Verschachtelung, Farbvarianten und Selektorlisten in reines CSS überführen, Mixins und Schleifen vorerst im Präprozessor lassen.
BEM-Klassen gesondert prüfen: Die Sass-Schreibweise &__title setzt in nativem CSS keinen Klassennamen zusammen, weil das Zeichen & dort als Selektor gilt.^[1]
Scroll-Effekte per @supports absichern und in der eigenen Webanalyse den Firefox-Anteil der Besucher ablesen.

Die gängigen Browser im deutschsprachigen Raum stellt der Browser-Vergleich für den DACH-Raum einzeln vor. Welche Funktionen Entwickler bereits im Alltag einsetzen, zeigen die Zahlen aus dem State of CSS 2026: Verschachtelung nutzen dort 70,6 % der Befragten.