Tag: CSS

1. :has()-Selektor: Rezepte jenseits der Basics

   24.02.2026

   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.

   Read more

2. CSS field-sizing — Textareas automatisch skalieren ohne JavaScript

   23.02.2026

   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.

   Read more

3. CSS Pseudo-Elemente — ::before, ::after und moderne Tricks

   22.02.2026

   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.

   Read more

4. CSS revert-layer — Kaskade gezielt zurücksetzen mit @layer

   21.02.2026

   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.

   Read more

5. CSS Performance Profiling mit dem Rendering-Tab: DevTools Layers, Paint Flashing, FPS-Monitor

   21.02.2026

   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.

   Read more

6. CSS Cascade Layers (@layer) — Spezifitätsprobleme lösen

   17.02.2026

   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.

   Read more

7. prefers-reduced-motion im Team: Design-Tokens, Testing und verbindliche Muster

   16.02.2026

   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.

   Read more

8. CSS color-mix() — Farben dynamisch mischen in CSS

   15.02.2026

   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.

   Read more

9. CSS Writing Modes — vertikale Layouts, CJK-Typografie und RTL/LTR

   09.02.2026

   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.

   Read more

10. CSS display: contents – Wrapper-Elemente aus dem Layout nehmen

    08.02.2026

    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.

    Read more