Moderne CSS-Code-Snippets: Schreib CSS nicht mehr wie 2015

 (modern-css.com)
3 Punkte von GN⁺ 2026-02-16 | 1 Kommentare | Auf WhatsApp teilen
  • Eine Code-Sammlung, die veraltete CSS-Hacks und die moderne native CSS-Syntax, die sie ersetzt, direkt nebeneinander vergleicht
  • Nutzt aktuelle Standards wie Grid, Flexbox, OKLCH-Farben, Container Queries und scroll-timeline, um die Abhängigkeit von JavaScript zu verringern
  • Nach Themen wie Farben, Layout, Animationen, Selektoren, Typografie und Workflow gegliedert und zeigt für jede Funktion eine moderne Alternative
  • Mit aktuellen CSS-Standards lassen sich Abhängigkeiten von JS, Sass und externen Bibliotheken reduzieren und native Browser-Funktionen maximal nutzen

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2026-02-16
Hacker-News-Meinungen

  • CSS im Jahr 2025 wirkt, als würde man wieder Inline-Styles wie 2005 direkt ins HTML schreiben
    Gemeint ist Tailwind, aber letztlich ignoriert es die Trennung von Format und Darstellung

    • Der älteste Mythos der Webentwicklung ist das Konzept der „Trennung der Zuständigkeiten“
    • HTML und CSS sind nur eine Trennung von Technologien
      Wenn HTML wirklich nur für Inhalte und CSS nur für Stil zuständig wäre, müsste man keine div soup wie .container-wrapper .container .container-inner bauen
      Dass man bei jedem Layoutwechsel das HTML anpassen muss, ist der Beweis dafür
    • Man muss den Code nicht verschleiern, man kann einfach Tailwind verwenden
    • Ich finde das sogar besser
      Code rund um eine Komponente ist an einer Stelle gesammelt, sodass man nicht ständig zwischen Dateien wechseln muss
    • Ich halte das für eine gute Idee
      Layout und Stil sind untrennbare Teile der UI
      HTML ist kein Inhalt, sondern Layout
      Selbst wenn man an die Trennung der Zuständigkeiten glaubt, gehören HTML und CSS zur gleichen Darstellungsschicht
      Zu glauben, man könne beides trennen, heißt die Realität zu ignorieren

  • Ich habe eine Liste der wichtigsten jüngeren Verbesserungen in CSS zusammengestellt

    1. Verschachtelte Selektoren (nested selectors)
    2. :has(...)
    3. :is(...) — früher musste man Tricks wie :not(:not(...)) verwenden
    4. :where(...) — ähnlich wie :is(...), aber mit Selektorgewichtung 0, daher nützlich bei komplexen Selektoren
    • #1 kann ich nur nachdrücklich zustimmen
      Die meisten LLMs kennen dieses Feature nicht
      Ich empfehle, Beispiele in AGENTS.md hinzuzufügen
      Die MDN-Dokumentation zum Nesting Selector ist hilfreich
      Mit dem &-Selektor bekommt man bessere Lesbarkeit und weniger Wiederholungen zugleich
    • Mein Favorit ist text-box: trim
      Es fühlt sich befreiend an, dass die Zeit vorbei ist, in der man Designern 20 Jahre lang erklären musste, dass eine Ausrichtung an der Oberkante von Großbuchstaben unmöglich sei
    • Persönlich gefällt mir @layer am besten
    • 2 bis 4 sind gut, aber verschachtelte Selektoren lassen sich nicht mit grep durchsuchen, deshalb mag ich sie nicht

  • Einige der Beispiele funktionieren in der alten Variante in allen Browsern, die neue Variante aber nur in Chrome/Edge
    Solche Beispiele aufzunehmen, halte ich für unverantwortlich, weil es die Blink-Monokultur stärkt

    • Stimme zu. Es wäre gut, wenn der Standardfilter auf „newly available“ stünde und alle drei großen Browser (Chrome/Edge, Safari, Firefox) einschließen würde
    • Das ist nicht die Schuld der Website
      Man sollte vielmehr auf Mozillas mangelnde Standardtreue hinweisen

  • Man sollte damit aufhören, Elemente an den Bildschirmrändern zu fixieren
    Auf manchen Websites nehmen statische Elemente mehr als die Hälfte des Bildschirms ein
    Es ist natürlicher, den Inhalt scrollen zu lassen

  • Ironischerweise erzwingt die betreffende Website den Dark Mode und verwendet prefers-color-scheme nicht

  • Man sieht „Tolle kreative CSS-Beispiele!“, schaut dann nach und stößt auf die praktische Einschränkung, dass die Browser-Unterstützung nur bei 40–50 % liegt

    • Früher war mangelnde Unterstützung ein großes Problem, heute ist es deutlich besser geworden
      Das liegt zwar am übermäßigen Einfluss von Chromium, ist im Ergebnis aber positiv
      Siehe Interop 2025
    • Wenn man den Beispielfilter auf „widely available“ umstellt, ist die Unterstützungsrate viel höher
    • Es braucht einfach Zeit
      Browserhersteller fügen Features schon im Voraus hinzu, um irgendwann breite Unterstützung zu erreichen

  • Es ist verwirrend, dass Beispiele, die in Firefox als nicht unterstützt markiert sind, in den eigentlichen Demos trotzdem funktionieren
    Ich frage mich, ob dort vielleicht ein Polyfill verwendet wird

    • Es ist als „Limited availability“ gekennzeichnet
      Der grüne Prozentwert unten links zeigt den Anteil der Browsernutzer an, deren Browser das jeweilige Feature unterstützen
      Häufig liegt er unter der Hälfte
      Letztlich ist das weniger „modernes CSS“ als vielmehr latest Chrome CSS
    • Die Kennzeichnung der Feature-Unterstützung ist ein Chaos
      Zum Beispiel wird sibling-index() als „widely available“ angezeigt, obwohl es in Firefox noch nicht funktioniert

  • Heutzutage bin ich unsicher, ob man Tailwind, CSS-in-JS, Sass/SCSS oder Vanilla CSS verwenden sollte

    • Es gibt keine richtige Antwort
      Man sollte das verwenden, was zum Team passt
      Wenn Tailwind passt, dann das; bei einem persönlichen Projekt Inline-CSS; wenn man mit Sass vertraut ist, dann dabei bleiben;
      und wenn man ganz auf modernes CSS setzen will, ist auch das eine großartige Wahl

  • Ich entwickle schon so lange fürs Web, dass selbst viele Beispiele, die als „alte Methode“ bezeichnet werden, Features sind, die ich zum ersten Mal sehe

  • Die Funktion zur Anpassung der Farbhelligkeit habe ich zum ersten Mal gesehen
    Früher habe ich das mit Sass und Compass umgesetzt, aber die Wartung der Toolchain war mühsam
    Jetzt, wo CSS das selbst unterstützt, ist es viel praktischer