CSS Keywords zum Reseten: Warum „einfach zurücksetzen“ oft nicht einfach ist
CSS wirkt manchmal herrlich direkt: Du setzt einen Wert – du bekommst ein Ergebnis. Und wenn du „zurück“ willst, nimmst du eben einen der bekannten Keywords: initial, inherit, unset, revert, revert-layer. Klingt nach einem sauberen Werkzeugkasten. In der Praxis ist genau das der Punkt: Diese Keywords sind nicht nur „Werte“, sondern greifen in die Kaskade, […]
CSS-Selektoren lesen & einordnen bei :has(), @if, :is() und :where()
Ich tue mir bei den neuen Selektoren etwas schwer, daher hab ich mir hier etwas zusammengestellt, das mir hilft. Grundregel zum Lesen von CSS-Selektoren 1) Bestimme zuerst das Ziel ganz rechts. Das ist das Element, auf das der Stil am Ende angewendet wird. 2) Arbeite dich dann nach links. Alles links vom Ziel beschreibt Bedingungen, […]
Wer gewinnt in CSS?
Ein Element bekommt seinen finalen CSS-Wert nicht „einfach so“. CSS verarbeitet Regeln in einer festen Logik. Wenn man diese Logik einmal sauber verstanden hat, kann man fast jede „Warum greift das nicht?“-Situation systematisch erklären. Am hilfreichsten ist es, das Ganze als CSS-Pipeline zu sehen – einen Ablauf, der bei jedem Element immer wieder durchlaufen wird: […]
CSS-Einheiten – Ein Vollständiges Cheat Sheet
Oh je die ganzen CSS Einheiten. Das ist mittlerweile echt viel. Dieses Cheatsheet hilft vielleicht. Überblick: Einheiten-Kategorien Kategorie Beschreibung Beispiele Absolute Längeneinheiten fester Maßstab, unabhängig von Text- oder Viewportgröße px, cm, mm, Q, in, pt, pc Relative Längeneinheiten (typografisch) abhängig von Schriftgröße oder Rootgröße em, rem, ex, ch, cap, ic, lh, rlh Relative Längeneinheiten (Viewport-bezogen) […]
Klar strukturiertes CSS mit @layer und @scope
Jeder, der regelmäßig CSS schreibt, kennt das Problem: Mit zunehmender Komplexität werden CSS-Regeln schnell unübersichtlich. Welche Regel greift wann, und wie vermeide ich Konflikte zwischen Stilen? Genau hier setzen die beiden neuen CSS-Features @layer und @scope an, die CSS deutlich übersichtlicher und logischer gestalten. Anhand konkreter Beispiele zeige ich dir, wie das funktioniert. 1. Übersichtliche […]
Holy grail Layout mit CSS Grid
Das Holy Grail Layout ist ein klassisches Webdesign-Layout, das aus fünf Hauptbereichen besteht: einem Header, einem Footer, einer Hauptinhaltsfläche und zwei Seitenleisten. Der Hauptinhalt ist in der Mitte, flankiert von den Seitenleisten, während Header und Footer sich über die gesamte Breite des Layouts erstrecken. Mit modernem CSS, insbesondere mit Flexbox und CSS Grid, ist es […]
CSS Grid Layout
… oder wollen wir lieber sagen: ASCII Art Layout? Es wird Zeit sich mit einem neuen Layoutmodul auseinanderzusetzen. Lange Zeit waren Floats das Mittel der Wahl für Layouts von Webseiten. Dann kam Flexbox, das aber auch nur partiell Lösungen z.B. für eine Navigationsleiste bietet, da es sich um eine eindimensionales Layoutsystem handelt (eine Zeile oder […]
Element beim Scrollen an einer bestimmten Position anzeigen
Folgendermaßen kann man ein Element auf einer Seite beim Scrollen an einer bestimmten Position fest fixieren. See the Pen stickyheader by uli schaeffler (@ulrischa) on CodePen.