Thema: css
-
Print-Stylesheets: eine Webseite auf Papier und als PDF nutzbar machen
Ein Print-Stylesheet blendet Navigation und Bedienelemente aus, klappt eingeklappte Inhalte auf, druckt Linkziele hinter dem Linktext, legt Seitengrösse und Ränder mit @page fest, verhindert mit break-inside: avoid, dass Tabellen und Abbildungen umbrochen werden, und weist den Browser an, wesentliche Hintergrundfarben beizubehalten. Die Prüfung erfolgt mit der Druckvorschau des Browsers, 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.
-
Mit Container Queries dimensionierte Komponenten brauchen weniger platzierungsspezifische Overrides als mit Viewport-Media-Queries dimensionierte Komponenten
Hypothese: Wird dieselbe Komponentenmenge in mehreren Layout-Slots platziert, enthält die Container-Query-Implementierung weniger CSS-Regeln, die nur existieren, um eine Komponente für eine Platzierung zu korrigieren, als die Media-Query-Implementierung, und das Hinzufügen einer neuen Platzierung braucht kein neues Komponenten-CSS; ein Vergleich zweier Implementierungen mit Regelzahlen wird vorgeschlagen.
-
Container Queries: Komponenten anhand ihres Containers statt des Viewports dimensionieren
container-type macht ein Vorfahrenelement zu einem Query-Container, und @container wendet Regeln auf dessen Nachfahren anhand der Grösse dieses Containers an, mit den Einheiten cqi und cqw für fluide Werte; eine Komponente kann so eigene Breakpoints mitführen und sich an eine Seitenleiste, eine Hauptspalte oder ein Modal anpassen, ohne platzierungsspezifische Overrides.
-
Touch-Zielflächen und Zeigertypen: Bedienelemente für Finger und Maus dimensionieren
WCAG 2.2 verlangt auf Stufe AA Zeiger-Zielflächen von mindestens 24 mal 24 CSS-Pixeln, mit Ausnahmen für Abstand, Inline-Links und gleichwertige Bedienelemente, und 44 mal 44 auf Stufe AAA. Die Media Features pointer und hover melden, ob die primäre Eingabe grob oder fein ist und ob sie hovern kann, sodass ein Design Bedienelemente vergrössern und reine Hover-Interaktionen weglassen kann, wo der Finger der Zeiger ist.
Maschinenlesbar: JSON