CSS3 Fortgeschritten Schulung

1. Modernes CSS und die Entwicklung von CSS

• Von CSS3 zu modernem CSS
• Aktuelle CSS-Standards und Browser-Implementierung
• Verständnis der CSS-Spezifikation und Browser-Unterstützung
• Progressive Enhancement
• Feature Detection und Graceful Degradation
• Verständnis der modernen CSS-Ökologie

2. Fortgeschrittene Selektoren

• Fortgeschrittene Attributselektoren
• Strukturelle Pseudoklassen
• :is()
• :where()
• :not()
• :has() und relationale Selektoren
• Selektor-Spezifität
• Verwaltung der Spezifität in großen Projekten
• Best Practices für moderne Selektoren

3. Moderne Farben und visuelle Effekte

• RGB, HSL und moderne Farbfunktionen
• color(), lab(), lch(), oklab() und oklch()
• Relative Farben
• Transparenz und Alphakanäle
• Fortgeschrittene Verläufe (Gradients)
• Lineare, radiale und konische Verläufe
• color-mix()
• Farbinterpolation
• CSS-Filter und visuelle Effekte
• Modernes Theming und Farbsysteme

4. CSS-Custom-Properties und Design-Systeme

• CSS-Variablen / Custom Properties
• Variablen und Fallback-Werte
• Dynamisches Theming
• Komponenten-Ebene Anpassungen
• Design Tokens mit CSS
• Erstellung von Licht- und Dunkelmoden
• Nutzung von var(), @property und typisierten Custom Properties
• Aufbau wartbarer CSS-Design-Systeme

5. CSS-Nesting und Cascade-Verwaltung

• Native CSS-Nesting
• Nesting-Syntax und Best Practices
• CSS-Nesting im Vergleich zu Preprozessoren
• Cascade und Vererbung
• Cascade-Ebenen mit @layer
• Verwaltung von Drittanbieter-CSS
• @scope und Konzepte für Scoped Styling
• Aufbau voraussagbarer CSS-Architekturen

6. Fortgeschrittenes Layout mit Flexbox

• Auffrischung der Flexbox-Grundlagen
• Hauptachse und Kreuzachse
• Fortgeschrittene Ausrichtung
• Flexibles Größenanpassen
• gap
• Wrapping und Sortierung (Ordering)
• Nested-Flexbox-Layouts
• Häufige Flexbox-Muster
• Responsive Komponenten mit Flexbox

7. Fortgeschrittenes CSS Grid

• Auffrischung der Grid-Grundlagen
• Explizite und implizite Grids
• Fortgeschrittenes Track-Sizing
• minmax()
• auto-fit und auto-fill
• min(), max() und clamp()
• Grid-Bereiche
• Responsive Grid-Layouts
• Komplexe Seitenlayouts
• CSS Subgrid
• Nutzung von Subgrid für ausgerichete Komponentenlayouts

8. Container-Queries und komponentenbasierte Responsivität

• Warum Viewport-Media-Queries nicht immer ausreichen
• Konzepte von Container-Queries
• container-type
• @container
• Längeneinheiten für Container-Queries
• Komponentengesteuertes responsives Design
• Container Query Style Queries
• Design wiederverwendbarer responsiver Komponenten
• Container-Queries im Vergleich zu Media-Queries

9. Modernes Responsives Design

• Mobile-first-Design
• Responsive Breakpoints
• Fluide Typografie
• Fluide Abstände
• clamp()
• Moderne Viewport-Einheiten:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Dynamische Viewport-Überlegungen
• Container-relative Einheiten
• Responsive Bilder und Medien
• Reduzierung unnötiger Media-Queries

10. Logische Eigenschaften und Internationalisierung

• Logische vs. physische CSS-Eigenschaften
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Logisches Sizing
• Schreibmodi (Writing Modes)
• Rechts-nach-links- (RTL-) Layouts
• Aufbau international adaptierbarer Oberflächen

11. Moderne Typografie

• Responsive Typografie
• Variable Fonts
• Überlegungen zur Schriftladezeit
• font-size-adjust
• Fluide Typoskalen
• Textumbruch und Überlauf
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Best Practices für moderne Typografie

12. Transformationen, Übergänge und Animationen

• 2D- und 3D-Transformationen
• Übergänge (Transitions)
• Keyframe-Animationen
• Timing-Funktionen
• Animation-Komposition
• Transformations-Performance
• Scroll-gesteuerte Animationen
• animation-timeline
• Konzepte der View-Timeline
• Barrierefreiheit bei Bewegung (Motion)
• prefers-reduced-motion
• Performance-Überlegungen

13. Moderne CSS-UI-Funktionen

• Native CSS-Dialoge und Popovers
• Styling interaktiver UI-Zustände
• :popover-open
• :modal
• :focus-visible
• :target
• Formular-Zustands-Styling
• accent-color
• appearance
• field-sizing
• Moderne Formular-Steuerungselemente
• Aufbau barrierefreier CSS-only-Interaktionen

14. Fortgeschrittene CSS-Funktionen

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Relative Farbfunktionen
• Kombination von Funktionen für fluide Layouts
• Praktische Muster für responsives Design

15. CSS-Preprozessoren

• Überblick über CSS-Preprozessoren
• LESS
• Variablen und Mixins
• Nesting von Stilen
• Funktionen und Operationen
• LESS im Vergleich zu modernem nativem CSS
• Wann ein Preprocessor noch nützlich ist
• Migration von Preprocessor-Funktionen zu nativem CSS

16. Design- und Barrierefreiheitsaspekte

• Best Practices für modernes CSS
• Accessibility-first-Styling
• Keyboard-Fokus-Zustände
• :focus-visible
• Reduzierte Bewegung (Reduced Motion)
• Kontrast- und Farbübereinstimmungen
• Responsiver Text und Inhalt
• Text über Bildern
• Barrierefreie responsive Komponenten
• Progressive Enhancement

17. CSS-Performance und Wartbarkeit

• Reduzierung der CSS-Komplexität
• Vermeidung unnötiger Spezifität
• Cascade-Ebenen für Wartbarkeit
• Wiederverwendbare Utility- und Komponentenmuster
• Konzepte der CSS-Containment
• content-visibility
• Rendering- und Layout-Performance
• Reduzierung von Layout-Shifts
• Organisation großer CSS-Codebasen
• Debugging von CSS mit modernen Browser-Entwicklerwerkzeugen

18. Praktisches Modernes CSS-Projekt

Die Teilnehmer erstellen ein responsives modernes Web-Interface, das folgende Elemente einbezieht:

• CSS Grid
• Flexbox
• Subgrid
• Container-Queries
• CSS-Nesting
• Custom Properties
• Cascade-Ebenen
• Moderne Selektoren
• Fluide Typografie
• Moderne Viewport-Einheiten
• Responsives Design
• Moderne Farben und Verläufe
• Animationen und Übergänge
• Barrierefreiheit
• Best Practices für Performance