CSS3 Fortgeschritten Schulung

1. Modernes CSS und die Entwicklung von CSS

• Von CSS3 zu modernem CSS
• Aktuelle CSS-Standards und Browserumsetzung
• Verständnis der CSS-Spezifikation und Browserunterstützung
• Progressive Verbesserung (Progressive Enhancement)
• Feature-Detection und sanftes Degradieren (Graceful Degradation)
• Verständnis des modernen CSS-Ökosystems

2. Fortgeschrittene Selektoren

• Fortschrittliche Attributselektoren
• Strukturelle Pseudoklassen
• :is()
• :where()
• :not()
• :has() und relationale Selektoren
• Spezifität von Selektoren
• 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
• Fortschrittliche 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 Anpassung
• Design-Tokens mit CSS
• Erstellen von hellen und dunklen Themen
• Verwendung von var(), @property und typisierten Custom Properties
• Aufbau wartbarer CSS-Design-Systeme

5. CSS-Nesting und Cascademanagement

• Natives CSS-Nesting
• Nesting-Syntax und Best Practices
• CSS-Nesting vs. Preprozessoren
• Cascade und Vererbung
• Cascading Layers mit @layer
• Verwaltung von Drittanbieter-CSS
• @scope und Konzepte des Scoped Styling
• Aufbau vorhersehbarer CSS-Architekturen

6. Fortgeschrittene Layouts mit Flexbox

• Wiederholung der Flexbox-Grundlagen
• Hauptachse und Querachse
• Fortschrittliche Ausrichtung
• Flexible Größenanpassung
• gap
• Wrapping und Sortierung
• verschachtelte Flexbox-Layouts
• Gebräuchliche Flexbox-Muster
• Responsive Komponenten mit Flexbox

7. Fortgeschrittenes CSS-Grid

• Wiederholung der Grid-Grundlagen
• Explizite und implizite Grids
• Fortschrittliche Track-Größenbestimmung
• minmax()
• auto-fit und auto-fill
• min(), max() und clamp()
• Grid-Bereiche
• Responsive Grid-Layouts
• Komplexe Seitenlayouts
• CSS-Subgrid
• Verwendung von Subgrid für ausgerichtete 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
• Stilabfragen in Container Queries
• Design wieder verwendbarer responsiver Komponenten
• Container Queries vs. Media Queries

9. Modernes responsives Design

• Mobile-first-Design
• Responsive Breakpoints
• Fluide Typografie
• Fluide Abstände
• clamp()
• Modern Viewport-Einheiten:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Dynamische Viewport-Berücksichtigungen
• 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
• Logische Größenbestimmung
• Schreibmodi
• Layouts von rechts nach links (RTL)
• Aufbau international adaptierbarer Schnittstellen

11. Moderne Typografie

• Responsive Typografie
• Variable Schriften
• Berücksichtigung des Schriftladeverhaltens
• font-size-adjust
• Fluide Schriftskalen
• Textumbruch und Überlauf
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Best Practices für moderne Typografie

12. Transformationen, Transitionen und Animationen

• 2D- und 3D-Transformationen
• Transitionen
• Keyframe-Animationen
• Zeitfunktionen
• Animationssynthese
• Transformationsperformance
• Scrollbasierte Animationen
• animation-timeline
• View-Timeline-Konzepte
• Bewegungsbarrierefreiheit
• prefers-reduced-motion
• Performance-Berücksichtigungen

13. Moderne CSS-UI-Funktionen

• Native CSS-Dialoge und Popovers
• Styling interaktiver UI-Zustände
• :popover-open
• :modal
• :focus-visible
• :target
• Formularzustands-Styling
• accent-color
• appearance
• field-sizing
• Moderner Formularsteuerelemente
• 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 responsive Design-Muster

15. CSS-Preprozessoren

• Überblick über CSS-Preprozessoren
• LESS
• Variablen und Mixins
• Nesting von Stilen
• Funktionen und Operationen
• LESS vs. modernes natives CSS
• Wenn ein Preprozessor noch nützlich ist
• Migration von Preprozessor-Funktionen auf natives CSS

16. Gestaltungs- und Barrierefreiheitsaspekte

• Best Practices für modernes CSS
• Styling mit Fokus auf Barrierefreiheit
• Keyboard-Fokuszustände
• :focus-visible
• Reduzierte Bewegung
• Kontrast- und Farbberücksichtigungen
• Responsive Text und Inhalte
• Text über Bildern
• Barrierefreie responsive Komponenten
• Progressive Verbesserung (Progressive Enhancement)

17. CSS-Performance und Wartbarkeit

• Reduzierung der CSS-Komplexität
• Vermeidung unnötiger Spezifität
• Cascading Layers 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
• Fehlerbehebung in CSS mit modernen Browser-Entwicklerwerkzeugen

18. Praktisches modernes CSS-Projekt

Die Teilnehmer erstellen eine responsive moderne Weboberfläche, die Folgendes einbezieht:

• CSS-Grid
• Flexbox
• Subgrid
• Container Queries
• CSS-Nesting
• Custom Properties
• Cascading Layers
• Moderne Selektoren
• Fluide Typografie
• Moderne Viewport-Einheiten
• Responsives Design
• Moderne Farben und Verläufe
• Animationen und Transitionen
• Barrierefreiheitsaspekte
• Performance-Best Practices