Corso di formazione CSS3 Avanzato

1. CSS Moderno e Evoluzione di CSS

• Dal CSS3 al CSS moderno
• Standard CSS attuali e implementazione nei browser
• Comprensione della specifica CSS e del supporto dei browser
• Progressive enhancement
• Rilevamento delle funzionalità e degradazione elegante
• Comprensione dell'ecosistema del CSS moderno

2. Selettori Avanzati

• Selettori di attributi avanzati
• Pseudo-classi strutturali
• :is()
• :where()
• :not()
• :has() e selettori relazionali
• Specificità dei selettori
• Gestione della specificità in grandi progetti
• Migliori pratiche per i selettori moderni

3. Colori Moderni ed Effetti Visivi

• RGB, HSL e funzioni di colore moderne
• color(), lab(), lch(), oklab() e oklch()
• Colori relativi
• Trasparenza e canali alfa
• Gradienti avanzati
• Gradienti lineari, radiali e conici
• color-mix()
• Interpolazione dei colori
• Filtri CSS ed effetti visivi
• Tematiche moderne e sistemi di colori

4. Proprietà Personalizzabili CSS e Sistemi di Design

• Variabili CSS / proprietà personalizzabili
• Variabili e valori di fallback
• Tematiche dinamiche
• Personalizzazione a livello di componente
• Token di design con CSS
• Creazione di temi light e dark
• Utilizzo di var(), @property e proprietà personalizzabili tipizzate
• Costruzione di sistemi di design CSS manutenibili

5. Annidamento CSS e Gestione della Cascata

• Annidamento nativo CSS
• Sintassi di annidamento e migliori pratiche
• Annidamento CSS vs preprocessor
• Cascata e ereditarietà
• Layer di cascata con @layer
• Gestione del CSS di terze parti
• @scope e concetti di stilizzazione scoped
• Costruzione di architetture CSS prevedibili

6. Layout Avanzati con Flexbox

• Revisione delle nozioni di base di Flexbox
• Asse principale e asse incrociato
• Allineamento avanzato
• Dimensionamento flessibile
• gap
• Wrapping e ordinamento
• Layout Flexbox annidati
• Punti comuni di Flexbox
• Componenti reattivi utilizzando Flexbox

7. CSS Grid Avanzato

• Revisione delle nozioni di base di Grid
• Griglie esplicite e implicite
• Dimensionamento avanzato delle tracce
• minmax()
• auto-fit e auto-fill
• min(), max() e clamp()
• Aree di griglia
• Layout Grid reattivi
• Layout di pagina complessi
• CSS Subgrid
• Utilizzo di Subgrid per layout di componenti allineati

8. Container Query e Responsività Basata sui Componenti

• Perché le media query della viewport non sono sempre sufficienti
• Concetti delle container query
• container-type
• @container
• Unità di lunghezza delle container query
• Design reattivo guidato dai componenti
• Query di stile delle container query
• Progettazione di componenti reattivi riutilizzabili
• Container query vs media query

9. Design Reattivo Moderno

• Design mobile-first
• Breakpoint reattivi
• Tipografia fluida
• Spaziatura fluida
• clamp()
• Unità di viewport moderne:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Considerazioni sulla viewport dinamica
• Unità relative al container
• Immagini e media reattivi
• Riduzione delle media query non necessarie

10. Proprietà Logiche e Internazionalizzazione

• Proprietà CSS logiche vs fisiche
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Dimensionamento logico
• Modalità di scrittura
• Layout da destra a sinistra (RTL)
• Costruzione di interfacce adattabili internazionalmente

11. Tipografia Moderna

• Tipografia reattiva
• Font variabili
• Considerazioni sul caricamento dei font
• font-size-adjust
• Scale di tipo fluide
• Wrapping e overflow del testo
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Migliori pratiche per la tipografia moderna

12. Trasformazioni, Transizioni e Animazioni

• Trasformazioni 2D e 3D
• Transizioni
• Animazioni keyframe
• Funzioni di timing
• Composizione delle animazioni
• Prestazioni delle trasformazioni
• Animazioni guidate dallo scroll
• animation-timeline
• Concetti di view-timeline
• Accessibilità del movimento
• prefers-reduced-motion
• Considerazioni sulle prestazioni

13. Funzionalità UI CSS Moderne

• Dialoghi e popover nativi CSS
• Stilizzazione degli stati UI interattivi
• :popover-open
• :modal
• :focus-visible
• :target
• Stilizzazione degli stati dei moduli
• accent-color
• appearance
• field-sizing
• Controlli di modulo moderni
• Costruzione di interazioni CSS-only accessibili

14. Funzioni CSS Avanzate

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Funzioni di colori relativi
• Combinazione di funzioni per layout fluidi
• Punti pratici di design reattivo

15. Preprocessor CSS

• Panoramica dei preprocessor CSS
• LESS
• Variabili e mixin
• Stili annidati
• Funzioni e operazioni
• LESS vs CSS nativo moderno
• Quando un preprocessor è ancora utile
• Migrazione delle funzionalità del preprocessor al CSS nativo

16. Considerazioni su Design e Accessibilità

• Migliori pratiche per il CSS moderno
• Stilizzazione con priorità all'accessibilità
• Stati di focus da tastiera
• :focus-visible
• Riduzione del movimento
• Considerazioni su contrasto e colori
• Testo e contenuto reattivi
• Testo su immagini
• Componenti reattivi accessibili
• Progressive enhancement

17. Prestazioni e Manutenibilità CSS

• Riduzione della complessità CSS
• Evitare specificità non necessarie
• Layer di cascata per la manutenibilità
• Punti riutilizzabili e modelli di componenti
• Concetti di contenimento CSS
• content-visibility
• Prestazioni di rendering e layout
• Riduzione degli spostamenti del layout
• Organizzazione di codebase CSS di grandi dimensioni
• Debug CSS con gli strumenti per sviluppatori dei browser moderni

18. Progetto Pratico in CSS Moderno

I partecipanti creano un'interfaccia web reattiva e moderna che incorpora:

• CSS Grid
• Flexbox
• Subgrid
• Container query
• Annidamento CSS
• Proprietà personalizzabili
• Layer di cascata
• Selettori moderni
• Tipografia fluida
• Unità di viewport moderne
• Design reattivo
• Colori e gradienti moderni
• Animazioni e transizioni
• Considerazioni sull'accessibilità
• Migliori pratiche per le prestazioni