Curs de pregatire CSS3 Advanced

1. CSS Modern și Evoluția CSS

• De la CSS3 la CSS modern
• Standardele actuale CSS și implementarea în browsere
• Înțelegerea specificației CSS și a suportului din browsere
• Îmbunătățire progresivă
• Detectarea funcționalităților și degradarea grațioasă
• Înțelegerea ecosistemului modern CSS

2. Selectori Avansați

• Selectori de atribute avansați
• Pseudoclasă structurale
• :is()
• :where()
• :not()
• :has() și selectori relaționali
• Specificitatea selectorilor
• Gestionarea specificității în proiecte mari
• Bune practici pentru selectori moderni

3. Culori Moderne și Efecte Vizuale

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

4. Proprietăți CSS Personale și Sisteme de Design

• Variabile CSS / proprietăți personalizate
• Valori fallback pentru variabile
• Tematizare dinamică
• Personalizare la nivel de componentă
• Design tokens cu CSS
• Creatie de teme deschise (light) și închise (dark)
• Utilizarea var(), @property și proprietăți personalizate tipizate
• Construirea de sisteme de design CSS întreținute

5. Nesting CSS și Gestionarea Cascadei

• Nesting nativ CSS
• Sintaxa nesting și bune practici
• Nesting CSS vs. pre-procesoare
• Cascade și moștenire (inheritance)
• Straturi de cascade cu @layer
• Gestionarea CSS-ului de la terți
• @scope și concepte de styling cu scop limitat
• Construirea de arhitecturi CSS predictibile

6. Layout Avansat cu Flexbox

• Reamintire a fundamentele Flexbox
• Axis principal și axis transversal
• Aliniere avansată
• Dimensiuni flexibile
• gap
• Răpărire (wrapping) și ordonare
• Layout-uri Flexbox imbricate
• Șabloane comune de Flexbox
• Componente responsive utilizând Flexbox

7. CSS Grid Avansat

• Reamintire a fundamentele Grid
• Grid-uri explicite și implicite
• Dimensiuni avansate pentru track-uri
• minmax()
• auto-fit și auto-fill
• min(), max() și clamp()
• Zone de grid
• Layout-uri Grid responsive
• Layout-uri de pagină complexe
• CSS Subgrid
• Folosirea Subgrid pentru layout-uri de componente aliniate

8. Container Queries și Responsivitate Bazată pe Componente

• De ce query-urile de mediu pe viewport nu sunt mereu suficiente
• Concepte de container queries
• container-type
• @container
• Unități de lungime pentru container queries
• Design responsive condus de componentă
• Stilări cu container query style queries
• Proiectarea de componente responsive reutilizabile
• Container queries vs. query-uri de mediu

9. Design Responsive Modern

• Design mobile-first
• Breakpoint-uri responsive
• Tipografie fluidă
• Spatiere fluidă
• clamp()
• Unități moderne de viewport:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Considerații privind viewport-ul dinamic
• Unități relative la container
• Imagini și media responsive
• Reducerea query-urilor de mediu inutile

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
• Dimensiuni logice
• Moduri de scriere
• Layout-uri de la dreapta la stânga (RTL)
• Construirea de interfețe adaptabile la nivel internațional

11. Tipografie Modernă

• Tipografie responsive
• Fonturi variabile
• Considerații privind încărcarea fonturilor
• font-size-adjust
• Sisteme de tipărie fluide
• Răpărire și overflow al textului
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Bune practici de tipografie modernă

12. Transformări, Tranziții și Animații

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

13. Funcționalități Moderne de UI în CSS

• Dialoguri și popovers native în CSS
• Stilarea staturilor interactive de UI
• :popover-open
• :modal
• :focus-visible
• :target
• Stilarea staturilor de formular
• 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
• Combinarea funcțiilor pentru layout-uri fluide
• Șabloane practice de design responsive

15. Pre-procesoare CSS

• Prezentare generală a pre-procesoarelor CSS
• LESS
• Variabile și mixins
• Nesting de stiluri
• Funcții și operații
• LESS vs. CSS nativ modern
• Când este încă util un pre-procesor
• Migrarea funcționalităților de pre-procesor către CSS nativ

16. Considerații de Design și Accesibilitate

• Bune practici moderne de CSS
• Styling centrat pe accesibilitate
• Stări de focus la 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ățire progresivă

17. Performanță și Întreținere CSS

• Reducerea complexității CSS
• Evitarea specificității inutile
• Straturi de cascade pentru întreținere
• Șabloane reutilizabile de utilitare și componente
• Concepte de containment CSS
• content-visibility
• Performanța de randare și layout
• Reducerea schimburilor de layout (layout shifts)
• Organizarea bazelor de cod CSS mari
• Debugging CSS cu instrumente moderne de dezvoltator pentru browsere

18. Proiect Practic de CSS Modern

Participanții construiesc o interfață web modernă și responsive, care încorporează:

• CSS Grid
• Flexbox
• Subgrid
• Container queries
• Nesting CSS
• Proprietăți personalizate
• Straturi de cascade
• Selectori moderni
• Tipografie fluidă
• Unități moderne de viewport
• Design responsive
• Culori și gradienti moderni
• Animații și tranziții
• Considerații de accesibilitate
• Bune practici de performanță