CSS3 Geavanceerd Training Cursus

1. Modern CSS en de ontwikkeling van CSS

• Van CSS3 naar modern CSS
• Huidige CSS-standaarden en browserimplementatie
• De CSS-specificatie en browserondersteuning begrijpen
• Progressive enhancement
• Feature detection en graceful degradation
• Het moderne CSS-ecosysteem begrijpen

2. Geavanceerde Selectors

• Geavanceerde attribute selectors
• Structural pseudo-classes
• :is()
• :where()
• :not()
• :has() en relationele selectors
• Specificiteit van selectors
• Specificiteit beheren in grote projecten
• Best practices voor moderne selectors

3. Moderne Kleuren en Visuele Effecten

• RGB, HSL en moderne kleurfuncties
• color(), lab(), lch(), oklab() en oklch()
• Relatieve kleuren
• Transparantie en alfakanalen
• Geavanceerde gradiënten
• Lineaire, radiale en conische gradiënten
• color-mix()
• Kleurinterpologie
• CSS-filters en visuele effecten
• Modern theming en kleursystemen

4. CSS Custom Properties en Design Systemen

• CSS-variabelen / custom properties
• Variables en terugvalwaarden (fallback values)
• Dynamisch theming
• Customisatie op componentniveau
• Design tokens met CSS
• Licht- en donkerthema's maken
• var(), @property en getypeerde custom properties gebruiken
• Beheerbare CSS-design systemen bouwen

5. CSS Nesting en Cascade Beheer

• Native CSS nesting
• Nesting-syntaxis en best practices
• CSS nesting vs. preprocessors
• Cascade en erfenis (inheritance)
• Cascade lagen met @layer
• Derdeman CSS beheren
• @scope en concepten voor scoped styling
• Voorziedbare CSS-architecturen bouwen

6. Geavanceerde Layout met Flexbox

• Basis van Flexbox herzien
• Main axis en cross axis
• Geavanceerde uitlijning
• Flexibele dimensionering
• gap
• Wrapping en ordering
• Gemiddelde Flexbox-layouts (Nested Flexbox)
• Gemakkelijke Flexbox-patronen
• Responsieve componenten met Flexbox

7. Geavanceerde CSS Grid

• Basis van Grid herzien
• Expliciete en impliciete grids
• Geavanceerde track dimensionering
• minmax()
• auto-fit en auto-fill
• min(), max() en clamp()
• Grid-gebieden
• Responsieve Grid-layouts
• Complexe pagina-layouts
• CSS Subgrid
• Subgrid gebruiken voor uitgelijnde component-layouts

8. Container Queries en Component-gebaseerd Responsief Design

• Waarom viewport-media queries niet altijd voldoende zijn
• Concepten van container queries
• container-type
• @container
• Container query lengte-eenheden
• Component-gedreven responsief design
• Container query style queries
• Hergebruikbare responsieve componenten ontwerpen
• Container queries vs. media queries

9. Modern Responsief Design

• Mobile-first design
• Responsive breakpoints
• Vloeibare typografie (Fluid typography)
• Vloeibare spatie (Fluid spacing)
• clamp()
• Moderne viewport-eenheden:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Overwegingen voor dynamische viewports
• Container-relatieve eenheden
• Responsieve afbeeldingen en media
• Onnodige media queries verminderen

10. Logische Properties en Internationisering

• Logische vs. fysische CSS-properties
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Logische dimensionering
• Schrijfrichtingen (Writing modes)
• Van rechts naar links (RTL) layouts
• Internationaal aanpasbare interfaces bouwen

11. Modern Typography

• Responsive typografie
• Variable fonts
• Overwegingen voor fontladen
• font-size-adjust
• Vloeibare typeschalen
• Textrondleiding en overflow
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Best practices voor moderne typografie

12. Transformaties, Transities en Animaties

• 2D en 3D transformaties
• Transities
• Keyframe-animaties
• Tijdsfuncties
• Compositie van animaties
• Prestaties van transformaties
• Scroll-gedreven animaties
• animation-timeline
• Concepten van View-timeline
• Bewegingsbereikbaarheid
• prefers-reduced-motion
• Prestatieoverwegingen

13. Moderne CSS UI-Functies

• Native CSS dialogs en popovers
• Styling van interactieve UI-staten
• :popover-open
• :modal
• :focus-visible
• :target
• Formulieren-styling
• accent-color
• appearance
• field-sizing
• Moderne formulierbesturders
• Toegankelijke CSS-only interacties bouwen

14. Geavanceerde CSS-Functies

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Relatieve kleurfuncties
• Functies combineren voor vloeibare layouts
• Praktische patronen voor responsief design

15. CSS Pre-processors

• Overzicht van CSS-preprocessors
• LESS
• Variables en mixins
• Stijlen nesten
• Functies en bewerkingen
• LESS vs. modern native CSS
• Wanneer een preprocessor nog steeds nuttig is
• Preprocessor-functies migreren naar native CSS

16. Design en Bereikbaarheidsoverwegingen

• Best practices voor modern CSS
• Bereikbaarheid-first styling
• Toetsenbordfocusstaten
• :focus-visible
• Verlaagde beweging
• Contrast- en kleuroverwegingen
• Responsieve tekst en content
• Tekst boven afbeeldingen
• Toegankelijke responsieve componenten
• Progressive enhancement

17. CSS Prestaties en Beheerbaarheid

• CSS-complexiteit verminderen
• Onnodige specificiteit vermijden
• Cascade lagen voor beheerbaarheid
• Hergebruikbare utility- en componentpatronen
• Concepten voor CSS-containment
• content-visibility
• Prestaties van rendering en layout
• Layout-verschuivingen verminderen
• Grote CSS-codebases organiseren
• CSS debuggen met moderne browser developer tools

18. Praktijkproject Modern CSS

Deelnemers bouwen een responsive moderne webinterface die de volgende elementen bevat:

• CSS Grid
• Flexbox
• Subgrid
• Container queries
• CSS nesting
• Custom properties
• Cascade layers
• Moderne selectors
• Vloeibare typografie
• Moderne viewport-eenheden
• Responsief design
• Moderne kleuren en gradiënten
• Animaties en transities
• Bereikbaarheidsoverwegingen
• Best practices voor prestaties