Tag: CSS

1. Natives dialog-Element stylen: Modals ohne JavaScript-Framework

   25.03.2025

   Das dialog-Element bringt Backdrop, automatischen Fokus-Trap, Schliessen per ESC-Taste und Formular-Rueckgabewerte bereits mit, ohne eine einzige Zeile Modal-Bibliothek. Mit gezieltem CSS, inklusive starting-style-Animationen fuer sanftes Ein- und Ausblenden, wird daraus ein vollstaendig gestaltetes, barrierefreies Modal.

   Read more

2. CSS Custom Properties für Theming – Dark Mode und @property

   20.03.2025

   Hardcodierte Farbwerte, die an zwanzig Stellen geändert werden müssen — das ist das Symptom eines fehlenden Theming-Systems. CSS Custom Properties schaffen die Grundlage für wartbare Design-Systeme: ein Ort für jeden Wert, kaskadierendes Überschreiben auf Komponentenebene und Dark Mode ohne eine Zeile JavaScript.

   Read more

3. content-visibility: Lange Seiten performant rendern

   12.03.2025

   Lange Produktlisten, Artikel-Feeds und Dokumentationsseiten zwingen den Browser, Layout und Style für tausende Elemente zu berechnen, auch wenn davon nur ein Bruchteil sichtbar ist. content-visibility überspringt diese Arbeit gezielt für Bereiche außerhalb des Viewports und macht aus einer trägen langen Seite eine Seite, die sich anfühlt wie eine kurze.

   Read more

4. BEM, Utility First und CSS Modules 2026 im Vergleich

   11.03.2025

   Die Wahl der richtigen CSS Methodik entscheidet über Wartbarkeit, Onboarding-Zeit und Refactoring-Aufwand eines Projekts über Jahre hinweg. BEM, Utility First und CSS Modules lösen dasselbe Grundproblem, nämlich Namenskollisionen und unkontrollierte Kaskade, mit fundamental unterschiedlichen Kompromissen bei Lesbarkeit, Build-Komplexität und Teamdisziplin.

   Read more

5. Design Tokens zu CSS Pipeline aufbauen

   08.03.2025

   Design Tokens lösen ein Synchronisationsproblem, das jedes plattformübergreifende Produkt betrifft: Farben, Abstände und Typografie müssen in Web, iOS und Android identisch sein, ohne dass drei Teams denselben Wert manuell dreifach pflegen. Eine automatisierte Transformationspipeline macht aus einer einzigen JSON-Quelle konsistentes CSS, Swift und Kotlin, ohne Drift zwischen Plattformen.

   Read more

6. prefers-contrast Media Feature: Barrierefreie Kontraststufen mit CSS steuern

   28.02.2025

   Mit prefers-contrast erkennt CSS, ob ein Nutzer in den Betriebssystemeinstellungen mehr oder weniger Kontrast wünscht, und kann Farben, Rahmen und Fokus-Indikatoren gezielt anpassen. Das Media Feature schließt eine echte Lücke in der Barrierefreiheit, die bislang oft mit separaten High-Contrast-Stylesheets umständlich gelöst wurde.

   Read more

7. CSS Containment Strategien im Detail

   26.02.2025

   Eine einzelne Änderung in einem Widget löst im Browser oft eine Style-Neuberechnung für die ganze Seite aus, weil Kaskade und Layout standardmäßig global wirken. CSS Containment begrenzt diesen Blast Radius gezielt auf einzelne Komponenten und macht aus unvorhersehbaren Rendering-Kosten eine berechenbare, lokale Angelegenheit.

   Read more

8. CSS Spezifität verstehen und beherrschen

   25.02.2025

   CSS-Spezifität ist die häufigste Quelle unerklärlicher Styling-Konflikte. Warum greift eine Regel nicht, obwohl sie weiter unten im Stylesheet steht? Warum überschreibt ein kurzer Selektor eine scheinbar passendere Regel? Die Antwort liegt in der CSS Spezifität — einem Berechnungssystem, das jede Stylesheet-Arbeit fundiert.

   Read more

9. CSS Cascade: Herkunft, Spezifität und Reihenfolge verstehen

   20.02.2025

   Die CSS Cascade ist kein Zufallsmechanismus, sondern ein präzise definierter Algorithmus. Wer versteht, wie der Browser Herkunft, Wichtigkeit, Spezifität und Reihenfolge abwägt, schreibt Stylesheets, die berechenbar funktionieren — statt mit !important gegen die eigenen Regeln zu kämpfen.

   Read more

10. View Transitions zwischen Seiten: Cross-Document Navigation ohne Framework

    18.02.2025

    Seitenwechsel in klassischen Multi-Page-Anwendungen wirken meist abrupt: die alte Seite verschwindet, die neue erscheint ohne Übergang. Cross-Document View Transitions schließen diese Lücke direkt im Browser, mit wenigen Zeilen CSS, ganz ohne Single-Page-Framework und ohne zusätzliches JavaScript für den Grundfall.

    Read more