Seite 2 - CSS

Wer den has-Selektor nur als eltern-selektierendes Werkzeug kennt, nutzt einen Bruchteil seines Potenzials. Diese Sammlung zeigt konkrete Rezepte für Formularvalidierung, leere Zustände, Quantity Queries und Theme-Umschaltung, die zuvor zwingend JavaScript brauchten und jetzt reines CSS sind.

Die neue CSS-Eigenschaft field-sizing macht die bewährten JavaScript-Tricks für automatisch wachsende Textareas überflüssig. Mit field-sizing: content passt sich ein Formularfeld ab der ersten Eingabe an seinen Inhalt an — nativ im Browser, ohne Event-Listener und ohne Layout-Hacks.

CSS Pseudo-Elemente sind eine der mächtigsten, aber am häufigsten oberflächlich genutzten Funktionen von CSS. ::before und ::after mit content und counter, die modernen Pseudo-Elemente ::marker, ::selection und ::first-line – dieser Artikel zeigt, was wirklich möglich ist und welche Tricks in modernem CSS funktionieren.

CSS revert-layer ist das Schlüsselwort, das die Layer-basierte Kaskade von CSS vollständig nutzbar macht. Es gibt einen Eigenschaftswert auf den Stand zurück, den der vorherige Layer definiert hätte – ohne Specificities zu überschreiben, ohne !important und ohne alle Properties einzeln zu resetten. Zusammen mit @layer entsteht eine skalierbare CSS-Architektur mit präziser Kaskadenkontrolle.

Der Rendering-Tab in Chrome DevTools ist das mächtigste Werkzeug für CSS Performance Profiling und wird von den meisten Frontend-Entwicklern kaum genutzt. Paint Flashing zeigt in Echtzeit, welche Bereiche der Seite neu gezeichnet werden. Der FPS-Monitor gibt sofortiges Feedback über Render-Probleme. Das Layers-Panel macht Compositor-Ebenen sichtbar. Zusammen bilden diese Tools das Fundament für datenbasierte CSS-Performance-Arbeit.

CSS Cascade Layers trennen die Frage „Welcher Layer hat Priorität?" von der Frage „Welcher Selektor ist spezifischer?". Mit @layer können Entwickler die Gewinnreihenfolge von CSS-Schichten explizit festlegen — Bibliotheks-CSS, Reset, Komponenten und Utilities in einer kontrollierten Hierarchie ohne !important-Eskalation.

Eine einzelne prefers-reduced-motion-Regel in einer einzelnen Komponente löst kein Team-Problem. Erst ein zentrales Motion-Token-System mit klaren Abstufungen, automatisiertem Testing und dokumentierten Mustern sorgt dafür, dass jede neue Animation im Projekt automatisch die richtige Rücksicht auf Bewegungsempfindlichkeit nimmt.

CSS color-mix() mischt Farben nativ im Browser — ohne Sass, ohne JavaScript, ohne Präprozessoren. Mit der richtigen Wahl des Farbraums entstehen perceptuell gleichmäßige Übergänge, natürliche Transparenzvarianten und dynamische Themes, die auf Nutzerpräferenzen reagieren.

CSS Writing Modes gehen weit über vertikale Typografie hinaus. Sie definieren das gesamte Koordinatensystem, in dem Inline-Achse und Block-Achse liegen — und damit auch, wie Margins, Paddings, Widths und Flows in RTL-, LTR- und vertikalen Layouts korrekt funktionieren, ohne physische Eigenschaften zu verwenden.

Manchmal steht ein Wrapper-Element im Weg: Es unterbricht die Grid-Linie, verhindert direkte Flex-Kind-Teilnahme oder erzwingt eine zusätzliche Layout-Ebene. display: contents macht das Element für den Layout-Kontext unsichtbar — seine Kinder treten direkt ein. Was einfach klingt, hat jedoch ernste Accessibility-Fallstricke, die jeder kennen muss, der dieses Feature produktiv einsetzt.