CSS-Notizen

Notizen zu modernem CSS aus meinem persönlichen Wissensarchiv:

• Grundlagen: Farben und Farbmodelle, calc(), Custom Properties und Container Queries.
• Selektoren: natives Nesting, :has(), :not(), :is() und :where(), Elemente nach ihrem Inhalt auswählen und @scope.
• Komponenten: klickbare Karten, Formularfehler mit :user-invalid und sichtbare Fokusstile.
• Navigation: Hauptnavigation, Dropdown, Mobilmenü, Sticky-Header und Akkordeon.
• Animation: von Transitions bis View Transitions.
• SVG: den Code verstehen, mit CSS gestalten und Icons barrierefrei einbinden.

Die Site ist nur für den lokalen Gebrauch gedacht und nicht zur Veröffentlichung im Netz.

Jede Notiz nennt die Quellen, auf denen sie beruht, und benennt, wo diese Quellen sich widersprechen oder irren. Angaben zum Browsersupport sind gegen die Baseline-Daten der WebDX Community Group geprüft und mit Datum versehen — sie altern also nachvollziehbar. Die Codebeispiele sind in Chrome getestet, nicht in Firefox und Safari. Wo die Browser auseinanderlaufen, steht es in der jeweiligen Notiz.

Veroeffentlichte Themen

• A Friendly Introduction to Container Queries (Josh W. Comeau)
• A guide to designing accessible, WCAG-conformant focus indicators (Sara Soueidan)
• A guide to Scroll-driven Animations with just CSS (WebKit)
• Accessible Cards (Kitty Giraudel)
• Akkordeon mit details bauen
• Animate to height auto (Chrome for Developers)
• Attributselektoren (MDN)
• Barrierearme Animationen
• Block Links, Cards, Clickable Regions, Rows (Adrian Roselli)
• calc() CSS-Funktion (MDN)
• Cards (Inclusive Components)
• Container Queries
• Container Queries (MDN)
• Container Size und Style Queries (MDN)
• container-type CSS-Eigenschaft (MDN)
• Contextually Marking up accessible images and SVGs (Scott O’Hara)
• CSS @scope
• CSS calc – Rechnen mit gemischten CSS-Einheiten
• CSS calc()
• CSS color-mix() Funktion
• CSS Custom Properties
• CSS Custom properties (CSS-Variablen) (SELFHTML)
• CSS Farben in der Praxis – von Hexadezimal bis oklch()
• CSS has() Interactive Guide (Ahmad Shadeed)
• CSS scroll-state() (Chrome for Developers)
• CSS-Nesting
• CSS-Nesting (kulturbanause)
• CSS-Pseudoklasse has()
• CSS-Pseudoklasse has() – CSS Parent-Selector
• CSS-Pseudoklassen not(), is() und where()
• CSS-Transitions und Keyframe-Animationen
• CSS-Tricks
• Decoding CSS Selectors – has(not) vs not(has) (Polypane)
• details-content Pseudo-Element (MDN)
• details-Element (MDN)
• dialog-Element (MDN)
• Die CSS calc()-Funktion – Berechnungen mit CSS
• Dropdown-Navigation mit Disclosure-Buttons bauen
• Ein- und Ausblenden mit CSS animieren
• Elemente anhand ihres Inhalts auswählen
• empty Pseudoklasse (MDN)
• Example Disclosure Navigation Menu (W3C APG)
• Exclusive Accordion (Chrome for Developers)
• Farben in CSS
• Farbrechner – OKLCH, HSL, HSV, RGB und Hex umrechnen
• Fixed Headers and Jump Links – scroll-margin-top (CSS-Tricks)
• focus-visible Pseudoklasse (MDN)
• focus-within Pseudoklasse (MDN)
• Formularfehler erst nach der Eingabe anzeigen
• Four new CSS features for smooth entry and exit animations (Chrome for Developers)
• Ganze Karte klickbar machen
• has() Pseudoklasse (MDN)
• Hauptnavigation semantisch aufbauen
• How to build Accessible Navigation Menus with the Popover API
• How to create high-performance CSS animations (web.dev)
• Invoker Commands API (MDN)
• is() Pseudoklasse (MDN)
• Limit the reach of your selectors with the CSS scope at-rule (Chrome for Developers)
• linear() CSS-Funktion (MDN)
• MediaEvent
• Menus Tutorial (W3C WAI)
• Mobile-Menü ohne Checkbox-Hack bauen
• not() Pseudoklasse (MDN)
• nth-child() Pseudoklasse (MDN)
• On popover accessibility – what the browser does and doesn’t do
• position CSS-Eigenschaft (MDN)
• prefers-reduced-motion – Sometimes less movement is more (web.dev)
• preserveAspectRatio Attribut (MDN)
• Relative Farbangaben (SELFHTML)
• scope At-Regel (MDN)
• Scroll-getriebene Animationen
• Selecting previous siblings with CSS has() (Tobias Ahlin)
• SELFHTML-Wiki
• Sichtbare Fokusstile
• Skip Navigation Links (WebAIM)
• starting-style At-Regel (MDN)
• Sticky-Header einrichten
• Styling SVG use Content with CSS (Sara Soueidan)
• SVG als Bild (MDN)
• SVG Füllung und Kontur (MDN)
• SVG in HTML (MDN)
• SVG mit CSS gestalten
• SVG und CSS (MDN)
• SVG-Code verstehen
• SVG-Grundformen (MDN)
• SVG-Icons barrierefrei einbinden
• SVG-Koordinatensystem (MDN)
• SVG-Pfade (MDN)
• symbol-Element (MDN)
• Technique C39 prefers-reduced-motion (W3C WCAG)
• The large, small, and dynamic viewport units (web.dev)
• The user-valid and user-invalid pseudo-classes (web.dev)
• title-Element in SVG (MDN)
• Top Layer mit popover und dialog
• Understanding SC 2.2.2 Pause, Stop, Hide (W3C WCAG)
• Understanding SC 2.3.3 Animation from Interactions (W3C WCAG)
• Understanding SC 2.4.11 Focus Not Obscured Minimum (W3C WCAG)
• Understanding SC 2.4.13 Focus Appearance (W3C WCAG)
• Understanding SC 2.4.7 Focus Visible (W3C WCAG)
• use-Element (MDN)
• user-invalid Pseudoklasse (MDN)
• user-valid Pseudoklasse (MDN)
• Using CSS anchor positioning (MDN)
• Using CSS animations (MDN)
• Using CSS transitions (MDN)
• Using the Popover API (MDN)
• Using the View Transition API (MDN)
• vector-effect Attribut (MDN)
• View Transitions
• viewBox Attribut (MDN)
• W3Schools
• where() Pseudoklasse (MDN)