Tag: CSS

1. CSS @scope — Scoped Styles ohne Shadow DOM

   11.10.2025

   Style-Isolation war bisher das Reservat von Shadow DOM und CSS-in-JS. Mit CSS @scope bringt die nativer Kaskade eine echte Abgrenzung in reguläre Stylesheets – ohne JavaScript, ohne Custom Elements. Donut Scope, proximale Spezifität und die :scope Pseudo-Klasse machen CSS-Komponenten wartbarer und überschneidungsfreier.

   Read more

2. forced-colors Modus für Windows Hochkontrast: CSS robust machen

   08.10.2025

   Aktiviert ein Nutzer den Windows Hochkontrastmodus, ersetzt das Betriebssystem die meisten Farben einer Webseite kompromisslos durch eine begrenzte Systempalette. Mit forced-colors, System-Farbschlüsselwörtern und forced-color-adjust bleibt eine Oberfläche trotzdem bedienbar, statt Ränder, Icons und Zustände unsichtbar verschwinden zu lassen.

   Read more

3. Custom Properties als Dark-Light-Token-System: dreistufige Token-Architektur

   07.10.2025

   Ein wartbares Dark-Light-Token-System entsteht nicht aus einer einzigen Ebene von Custom Properties, sondern aus drei sauber getrennten Schichten: Primitive Tokens, Semantic Tokens und Component Tokens. Zusammen mit der light-dark() Funktion lässt sich diese Architektur ohne doppelte Media Queries pro Komponente umsetzen.

   Read more

4. CSS Focus Management und Keyboard-Navigation — :focus-visible, :focus-within

   02.10.2025

   Gutes Focus-Management trennt Webentwicklung von zugänglicher Webentwicklung. :focus-visible zeigt den Fokusring nur bei Tastaturnutzung, :focus-within ermöglicht Container-Reaktionen — zusammen mit korrekten outline-Styles nach WCAG bilden sie das Fundament für Keyboard-Navigation ohne Kompromisse beim visuellen Design.

   Read more

5. CSS-in-JS vs. Utility-First vs. Vanilla CSS — Architekturentscheidung

   26.09.2025

   Die Wahl der CSS-Architektur beeinflusst Team-Produktivität, Bundle-Größe, Wartbarkeit und Onboarding-Aufwand für Jahre. CSS-in-JS, Utility-First und Vanilla CSS lösen dasselbe Problem mit fundamental unterschiedlichen Ansätzen — und jeder hat spezifische Kontexte, in denen er überlegen ist.

   Read more

6. container-type: size Queries im Detail: Größenbasierte Containerabfragen richtig einsetzen

   12.09.2025

   container-type: size erweitert Container Queries um die Blockrichtung, erzwingt aber echte Größen-Containment mit spürbaren Nebenwirkungen: Ohne explizite Höhe kollabiert der Container auf null. Wer versteht, wann size statt inline-size die richtige Wahl ist, vermeidet die häufigsten Layout-Bugs bei diesem Feature.

   Read more

7. CSS Intrinsic Sizing: min-content, max-content, fit-content erklärt

   10.09.2025

   Wer Layoutgrößen immer in Pixeln oder Prozent angibt, ignoriert die natürlichen Informationen, die CSS-Boxen bereits über ihren Inhalt besitzen. CSS Intrinsic Sizing macht diese intrinsischen Größen direkt nutzbar – als Spaltenbasis im Grid, als Buttonbreite ohne Magic-Number und als Tabellenverhalten für beliebige Inhalte.

   Read more

8. Layout Thrashing systematisch vermeiden

   05.09.2025

   Wer in einer Schleife abwechselnd DOM-Eigenschaften liest und schreibt, zwingt den Browser zu hunderten wiederholten Layout-Berechnungen pro Frame. Layout Thrashing entsteht genau an dieser Stelle, meist unbemerkt in Scroll-Handlern, Resize-Listenern und Animationsschleifen, und ist mit dem richtigen Batching-Muster vollständig vermeidbar.

   Read more

9. Responsive Produktgrid Muster: CSS Grid für Magento Kategorieseiten

   02.09.2025

   Ein Responsive Produktgrid Muster mit auto-fill, minmax und aspect-ratio sorgt dafür, dass Produktkarten auf jeder Bildschirmgröße gleichmäßig verteilt bleiben, ohne dass für jede Spaltenzahl eine eigene Media-Query gepflegt werden muss. Diese Technik ist der Unterschied zwischen einem Kategorierid, das bei jeder neuen Bildschirmbreite bricht, und einem, das sich von selbst anpasst.

   Read more

10. Pseudo-Elemente für Inputs: ::-webkit- und ::-moz- gezielt einsetzen

    25.08.2025

    Manche Teile eines Formularelements lassen sich bis heute nur ueber herstellerspezifische Pseudo-Elemente gestalten, weil es dafuer keinen standardisierten Selektor gibt. Wer Range-Slider, Datei-Upload-Buttons und Autofill-Hintergruende konsistent stylen will, kommt an webkit- und moz-Präfixen nicht vorbei, muss sie aber strukturiert und wartbar einsetzen.

    Read more