Seite 3 - CSS

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.

Über die eingebauten Kurzformen wie flip-block hinaus lassen sich mit @position-try eigene, benannte Fallback-Positionen definieren, komplett mit eigenem Innenabstand zum Viewport-Rand. Dieser Artikel zeigt fertige, kopierbare Rezepte für Dropdown-Menüs, verschachtelte Untermenüs und Tooltips, die zuverlässig innerhalb des sichtbaren Bereichs bleiben.

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.

Mit @page Regeln steuert CSS direkt, wie groß eine gedruckte Seite ist, welche Ränder sie hat und was in Kopf- und Fußzeile erscheint. Für Rechnungen, Verträge und mehrseitige Reports ersetzen @page Regeln damit einen erheblichen Teil dessen, wofür sonst eine externe PDF-Bibliothek nötig wäre.

Ein Widget, das auf fremden Seiten eingebettet wird, muss sein eigenes Farbschema behalten, ohne von der Host-Seite überschrieben zu werden und ohne deren Styles zu verschmutzen. CSS Cascade Layers, :where() und ein eigener Token-Namespace lösen dieses Component-Theming-Problem in Tailwind CSS v4, ganz ohne Shadow DOM.

Ein Drop Cap, die vergrößerte Initiale am Absatzanfang, wurde in CSS jahrelang mit float, einer geschätzten font-size und viel Nachjustieren gebaut. Die Property initial-letter übernimmt die Berechnung von Höhe und Ausrichtung nativ und erlaubt präzise Kontrolle über die Anzahl der Zeilen, über die sich die Initiale erstreckt.