Thema: css
-
Druck-Stylesheets: eine Webseite auf Papier und als PDF brauchbar machen
Ein Druck-Stylesheet blendet Navigation und Bedienelemente aus, klappt eingeklappte Inhalte auf, druckt Linkziele nach dem Linktext, legt Seitengrösse und Ränder mit @page fest, verhindert das Aufteilen von Tabellen und Abbildungen mit break-inside: avoid und weist den Browser an, unverzichtbare Hintergrundfarben beizubehalten. Mit der Druckvorschau des Browsers testen, nicht nur am Bildschirm.
-
Webfont-Ladeverhalten: font-display, Preload, unicode-range-Subsetting und metrikangepasste Fallbacks
Text beim ersten Rendern anzeigen und die Marken-Schrift ohne Layout-Sprünge laden: Schriftschnitte mit unicode-range aufteilen, damit nur genutzte Schriftsysteme heruntergeladen werden, font-display je nach Rolle wählen (optional für Fliesstext, swap für Überschriften), die für das erste Rendern nötigen Dateien mit crossorigin preloaden und einen Fallback-Schriftschnitt mit size-adjust sowie Ascent/Descent-Overrides deklarieren, damit Zeilen vor und nach dem Wechsel gleich umbrechen.
-
Lokalisierungsfähige Oberflächen: Intl-Pluralregeln, Datumsformate und Rechts-nach-links-Layout
Zahlen, Daten und relative Zeitangaben mit den Intl-Objekten des Browsers formatieren statt mit Zeichenketten-Arithmetik, Pluralformen anhand der Kategorien von Intl.PluralRules statt anhand von n == 1 wählen, mit logischen CSS-Eigenschaften layouten, damit sich ein dir=rtl-Dokument selbst spiegelt, und Platz für Text lassen, der bei der Übersetzung länger wird.
-
Lesbarer Fliesstext: Zeilenlänge, Zeilenabstand und Kontrast
Drei Eigenschaften entscheiden, ob langer Text bequem lesbar ist: die Zeilenlänge (das AAA-Kriterium der WCAG deckelt sie bei 80 Zeichen), der Zeilenabstand (mindestens das 1,5-Fache der Schriftgrösse muss möglich sein, ohne dass das Layout bricht) und der Kontrast (4,5:1 für normalen Text, 3:1 für grossen). In relativen Einheiten setzen, damit Nutzende Text vergrössern und neu spationieren können.
-
SVG-Icons: Inline-Markup, ein Sprite mit use, oder ein img-Element
Inline-SVG lässt sich mit currentColor und CSS stylen, wiederholt aber bei jedem Vorkommen dieselben Bytes; ein Sprite vom gleichen Origin, referenziert mit use, wird einmal gecacht und folgt trotzdem der Textfarbe; ein img ist cachebar, aber für CSS undurchsichtig. Je nach Rolle des Icons wählen, dekorative Icons vor assistiven Technologien verbergen, und jedes Icon mit fester Grösse versehen, damit nichts verrutscht, während das Sprite lädt.
-
Lesbarer Fliesstext: Zeilenlänge, Zeilenhöhe und Kontrast
Drei Eigenschaften entscheiden, ob sich langer Text bequem lesen lässt: die Zeilenlänge (das AAA-Kriterium der WCAG begrenzt sie auf 80 Zeichen), der Zeilenabstand (mindestens das 1,5-Fache der Schriftgrösse muss möglich sein, ohne das Layout zu zerstören) und der Kontrast (4.5:1 für normalen Text, 3:1 für grossen Text). Diese Werte in relativen Einheiten setzen, damit Nutzende den Text vergrössern und neu beabstanden können.
-
Dark Mode mit prefers-color-scheme, color-scheme und light-dark()
Dark Mode besteht aus drei Teilen: der Media Query prefers-color-scheme, um die Wahl der Nutzenden zu erkennen, der Eigenschaft color-scheme (und dem Meta-Tag), um dem Browser mitzuteilen, welche Schemata die Seite unterstützt, damit Formularelemente, Scrollbalken und die Zeichenfläche folgen, sowie light-dark() oder Custom Properties, um Palettenwerte auszutauschen, ohne Regeln zu verdoppeln.
-
CSS-Layout: wann Flexbox und wann Grid einsetzen
Flexbox ist ein eindimensionales Modell, das Platz entlang einer Zeile oder Spalte verteilt; Grid ist zweidimensional und definiert Zeilen und Spalten gemeinsam. Flexbox für inhaltsgetriebene Gruppen einsetzen und Grid für Seiten- und Formularstruktur; beide kombinieren, gap verwenden und Elemente schrumpfen lassen, damit Text nicht überläuft.
-
CSS-Custom-Properties fürs Theming: Vererbung, Fallbacks und @property
Custom Properties (--name) folgen wie andere Eigenschaften der Kaskade und Vererbung und werden mit var(--name, Fallback) ausgelesen; eine ungültige Substitution verwirft die Regel nicht, sondern fällt auf den Anfangs- oder geerbten Wert zurück, und @property fügt einen Typ, einen Anfangswert und Animationsunterstützung hinzu. Sie als rohe Tokens plus semantische Rollen strukturieren und die Rollen pro Geltungsbereich überschreiben, um zu themen.
-
prefers-reduced-motion: Welche Animationen reduziert werden sollten und wie
Das Media-Feature prefers-reduced-motion gibt an, ob der Nutzer das Betriebssystem um weniger Bewegung gebeten hat; seine Werte sind no-preference und reduce. Es wird respektiert, indem grosse Bewegungen (Parallax, Zooms, Slides, automatisch startende Animationen) durch Überblendungen oder sofortige Wechsel ersetzt werden, während kleine bedeutungstragende Zustandsübergänge erhalten bleiben; dieselbe Regel gilt auch für skriptgesteuerte Animation.
-
Components sized with container queries need fewer placement-specific overrides than components sized with viewport media queries
Hypothesis: when the same component set is placed in several layout slots, the container-query implementation contains fewer CSS rules that exist only to correct a component for one placement than the media-query implementation, and adding a new placement needs no new component CSS; a two-implementation comparison with rule counts is proposed.
-
Container queries: sizing components by their container instead of the viewport
container-type turns an ancestor into a query container and @container applies rules to its descendants based on that container's size, with cqi and cqw units for fluid values; a component can then carry its own breakpoints and adapt to a sidebar, a main column or a modal without placement-specific overrides.
-
Touch targets and pointer types: sizing controls for fingers and mice
WCAG 2.2 requires pointer targets of at least 24 by 24 CSS pixels at level AA, with exceptions for spacing, inline links and equivalent controls, and 44 by 44 at level AAA. The pointer and hover media features report whether the primary input is coarse or fine and whether it can hover, so a design can enlarge controls and drop hover-only interactions where a finger is the pointer.
Maschinenlesbar: JSON