Curs de pregatire CSS3 Avansat

1. CSS modern și evoluția CSS

• De la CSS3 la CSS modern
• Standardele CSS actuale și implementarea în browsere
• Înțelegerea specificației CSS și suportul browserelor
• Îmbunătățirea progresivă
• Detectarea funcțiilor și degradarea grațioasă
• Înțelegerea ecosistemului CSS modern

2. Selectori avansați

• Selectori de atribute avansați
• Pseudo-clase structurale
• :is()
• :where()
• :not()
• :has() și selectorii relaționali
• Specificitatea selectorilor
• Managementul specificității în proiecte mari
• Cele mai bune practici pentru selectorii moderni

3. Culori moderne și efecte vizuale

• Funcții moderne de culoare: RGB, HSL
• color(), lab(), lch(), oklab() și oklch()
• Culori relative
• Transparență și canale alfa
• Gradienti avansați
• Gradienti liniari, radiale și conici
• color-mix()
• Interpolarea culorilor
• Filte CSS și efecte vizuale
• Tematizare modernă și sisteme de culori

4. Proprietăți personalizate CSS și sisteme de design

• Variabile CSS / proprietăți personalizate
• Variabile și valori de rezervă (fallback)
• Tematizare dinamică
• Personalizare la nivel de componentă
• Design tokens cu CSS
• Crearea temelor light și dark
• Utilizarea var(), @property și proprietăților personalizate tipizate
• Construirea de sisteme de design CSS menținabile

5. Imbibrare CSS și managementul cascadei

• Imbibrare nativă în CSS
• Sintaxa de imbibrare și cele mai bune practici
• Imbibrare CSS vs. pre-procesori
• Cascada și moștenirea
• Straturi de cascada cu @layer
• Managementul CSS terților
• @scope și concepte de stilizare scoped
• Construirea de arhitecturi CSS predictibile

6. Layout avansat cu Flexbox

• Revizuirea fundamentelor Flexbox
• Axa principală și axa transversală
• Aliniere avansată
• Mariime flexibile
• gap
• Împletire (wrapping) și ordonare
• Layout-uri Flexbox imbriicate
• Modele comune de Flexbox
• Componente responsive utilizând Flexbox

7. CSS Grid avansat

• Revizuirea fundamentelor Grid
• Grid explicit și implicit
• Dimensionarea avansată a pistelor (track sizing)
• minmax()
• auto-fit și auto-fill
• min(), max() și clamp()
• Arii Grid
• Layout-uri Grid responsive
• Layout-uri complexe de pagină
• Subgrid CSS
• Utilizarea Subgrid pentru alinierea layout-urilor de componente

8. Consulta de container și responsivitate bazată pe componente

• De ce consulta de media pe viewport nu sunt întotdeauna suficiente
• Concepte de consulta de container
• container-type
• @container
• Unități de lungime pentru consulta de container
• Design responsive orientat pe componente
• Consulta de stil pentru container
• Designul de componente responsive reutilizabile
• Consulta de container vs. consulta de media

9. Design responsive modern

• Design mobil-first
• Puncte de rupe (breakpoints) responsive
• Tipografie fluidă
• Spațiere fluidă
• clamp()
• Unități moderne de viewport:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Considerații pentru viewport dinamic
• Unități relative la container
• Imagini și media responsive
• Reducerea consulta de media ne necesare

10. Proprietăți logice și internaționalizare

• Proprietăți CSS logice vs. fizice
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Dimensionare logică
• Moduri de scriere (writing modes)
• Layout-uri Right-to-left (RTL)
• Construirea interfețelor adaptabile la nivel internațional

11. Tipografie modernă

• Tipografie responsive
• Fonturi variabile
• Considerații privind încărcarea fonturilor
• font-size-adjust
• Scară de tipuri fluidă
• Rupesterea textului și overflow
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Cele mai bune practici pentru tipografia modernă

12. Transformări, tranziții și animații

• Transformări 2D și 3D
• Tranziții
• Animații cu keyframes
• Funcții de timare
• Compoziția animațiilor
• Performanța transformărilor
• Animații conduse de derulare (scroll-driven)
• animation-timeline
• Concepte de view-timeline
• Accesibilitatea mișcării
• prefers-reduced-motion
• Considerații de performanță

13. Funcționalități CSS UI moderne

• Dialoguri și popover-uri native CSS
• Stilizarea stărilor UI interactive
• :popover-open
• :modal
• :focus-visible
• :target
• Stilizarea stărilor formularului
• accent-color
• appearance
• field-sizing
• Controale de formular moderne
• Construirea de interacțiuni accesibile doar cu CSS

14. Funcții CSS avansate

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Funcții de culoare relative
• Combinația funcțiilor pentru layout-uri fluide
• Modele practice de design responsive

15. Pre-procesori CSS

• Prezentarea generală a pre-procesorilor CSS
• LESS
• Variabile și mix-uri
• Imbibrarea stilurilor
• Funcții și operațiuni
• LESS vs. CSS nativ modern
• Când este încă util un pre-procesor
• Migrarea funcțiilor pre-procesorului în CSS nativ

16. Considerații de design și accesibilitate

• Cele mai bune practici pentru CSS modern
• Stilizare cu prioritate pentru accesibilitate
• Stări de focus de tastatură
• :focus-visible
• Mișcare redusă
• Considerații privind contrastul și culorile
• Text și conținut responsive
• Text peste imagini
• Componente responsive accesibile
• Îmbunătățirea progresivă

17. Performanță și menținabilitate CSS

• Reducerea complexității CSS
• Evitarea specificității ne necesare
• Straturi de cascada pentru menținabilitate
• Modele reutilizabile de utilitare și componente
• Concepte de containment CSS
• content-visibility
• Performanța randării și layout-ului
• Reducerea deplasărilor de layout (layout shifts)
• Organizarea bazei de cod CSS mari
• Debugging CSS cu instrumentele de dezvoltator ale browserelor moderne

18. Proiect practic de CSS modern

Participanții construiesc o interfață web modernă responsive care integrează:

• CSS Grid
• Flexbox
• Subgrid
• Consulta de container
• Imbibrare CSS
• Proprietăți personalizate
• Straturi de cascada
• Selectorii moderni
• Tipografie fluidă
• Unități moderne de viewport
• Design responsive
• Culori și gradienți moderni
• Animații și tranziții
• Considerații de accesibilitate
• Cele mai bune practici de performanță