Zaawansowany CSS3 - Plan Szkolenia

1. Nowoczesny CSS i ewolucja CSS

• Od CSS3 do nowoczesnego CSS
• Aktualne standardy CSS i implementacja w przeglądarkach
• Rozumienie specyfikacji CSS i wsparcia przeglądarek
• Stopniowe rozszerzanie funkcji (progressive enhancement)
• Wykrywanie funkcji i płynna degradacja (graceful degradation)
• Rozumienie nowoczesnego ekosystemu CSS

2. Zaawansowane selektory

• Zaawansowane selektory atrybutów
• Pseudoklasy strukturalne
• :is()
• :where()
• :not()
• :has() i selektory relacyjne
• Specyficzność selektorów
• Zarządzanie specyficznością w dużych projektach
• Najlepsze praktyki dotyczące nowoczesnych selektorów

3. Nowoczesne kolory i efekty wizualne

• RGB, HSL i nowoczesne funkcje kolorów
• color(), lab(), lch(), oklab() i oklch()
• Kolory względne
• Przeźroczystość i kanały alfa
• Zaawansowane gradienty
• Gradienty liniowe, radialne i stożkowe
• color-mix()
• Interpolacja kolorów
• Filtry CSS i efekty wizualne
• Nowoczesne tematyzowanie i systemy kolorów

4. Własne właściwości CSS i systemy projektowe

• Zmienne CSS / własne właściwości
• Zmienne i wartości zastępcze
• Dynamiczne tematyzowanie
• Dostosowywanie na poziomie komponentów
• Design tokeny w CSS
• Tworzenie motywów jasnego i ciemnego
• Używanie var(), @property i typowanych własnych właściwości
• Budowanie łatwych w utrzymaniu systemów projektowych CSS

5. Zagnieżdżanie CSS i zarządzanie kaskadą

• Natywne zagnieżdżanie CSS
• Syntax i najlepsze praktyki zagnieżdżania
• Zagnieżdżanie CSS w porównaniu z preprocesorami
• Kaskada i dziedziczenie
• Warstwy kaskady z @layer
• Zarządzanie CSS stron trzecich
• @scope i koncepcja stylizacji zakresowej
• Budowanie przewidywalnych architektur CSS

6. Zaawansowany układ z Flexbox

• Powtórka podstaw Flexbox
• Oś główna i oś poprzeczna
• Zaawansowane wyrównywanie
• Elastyczne rozmiary
• gap
• Zawijanie i porządkowanie
• Zagnieżdżone układy Flexbox
• Powszechne wzorce Flexbox
• Komponenty responsywne z użyciem Flexbox

7. Zaawansowana siatka CSS

• Powtórka podstaw siatki
• Siatki jawne i niewidoczne
• Zaawansowane rozmiary ścieżek
• minmax()
• auto-fit i auto-fill
• min(), max() i clamp()
• Pola siatki
• Responsywne układy siatki
• Złożone układy stron
• Podsiatka CSS
• Używanie podsiatki do wyrównawania układów komponentów

8. Zapytania kontenerowe i responsywność oparta na komponentach

• Dlaczego zapytania mediów dotyczących viewportu nie zawsze wystarczają
• Koncepcje zapytań kontenerowych
• container-type
• @container
• Jednostki długości w zapytaniach kontenerowych
• Responsywny projekt sterowany komponentami
• Zapytania stylów kontenerowych
• Projektowanie wielokrotnie używalnych komponentów responsywnych
• Zapytania kontenerowe vs zapytania mediów

9. Nowoczesny design responsywny

• Projektowanie z myślą o urządzeniach mobilnych
• Przełamywa responsiveness (breakpoints)
• Płynna typografia
• Płynne odstępy
• clamp()
• Nowoczesne jednostki viewportu:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Rozważania dotyczące dynamicznego viewportu
• Jednostki względem kontenera
• Responsywne obrazy i media
• Zmniejszanie liczby niepotrzebnych zapytań mediów

10. Właściwości logiczne i internacjonalizacja

• Właściwości logiczne vs fizyczne w CSS
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Rozmiary logiczne
• Tryby zapisu
• Układy z lewej do prawej (RTL)
• Budowanie międzynarodowo adaptowalnych interfejsów

11. Nowoczesna typografia

• Responsywna typografia
• Fonty zmiennne
• Rozważania dotyczące ładowania fontów
• font-size-adjust
• Płynne skale typograficzne
• Zawijanie tekstu i przepełnienie
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Najlepsze praktyki nowoczesnej typografii

12. Transformatory, przejścia i animacje

• Transformatory 2D i 3D
• Przejścia
• Animacje klatek kluczowych
• Funkcje czasowe
• Kompozycja animacji
• Wydajność transformacji
• Animacje sterowane przewijaniem
• animation-timeline
• Koncepcje view-timeline
• Dostępność ruchu
• prefers-reduced-motion
• Rozważania dotyczące wydajności

13. Nowoczesne funkcje UI w CSS

• Natywne dialogi CSS i popvery
• Stylizowanie stanów interaktywnych UI
• :popover-open
• :modal
• :focus-visible
• :target
• Stylizowanie stanów formularzy
• accent-color
• appearance
• field-sizing
• Nowoczesne kontrolki formularzy
• Budowanie dostępnych interakcji wyłącznie w CSS

14. Zaawansowane funkcje CSS

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Funkcje kolorów względnych
• Łączenie funkcji do płynnych układów
• Praktyczne wzorce projektowania responsywnego

15. Preprocesory CSS

• Przegląd preprocesorów CSS
• LESS
• Zmienne i miksy
• Zagnieżdżanie stylów
• Funkcje i operacje
• LESS vs nowoczesny natywny CSS
• Kiedy preprocesor jest wciąż przydatny
• Migrowanie funkcji preprocesora do natywnego CSS

16. Rozważania projektowe i dotyczące dostępności

• Najlepsze praktyki nowoczesnego CSS
• Stylizacja z priorytetem dostępności
• Stany fokusu klawiaturą
• :focus-visible
• Ograniczony ruch
• Rozważania dotyczące kontrastu i kolorów
• Responsywny tekst i treści
• Tekst na obrazach
• Dostępne komponenty responsywne
• Stopniowe rozszerzanie funkcji

17. Wydajność i utrzymywalność CSS

• Zmniejszanie złożoności CSS
• Unikanie niepotrzebnej specyficzności
• Warstwy kaskady dla ułatwienia utrzymania
• Wielokrotnie używane wzorce narzędziowe i komponentowe
• Koncepcja izolowania CSS
• content-visibility
• Wydajność renderowania i układów
• Zmniejszanie przemieszczeń układu
• Organizowanie dużych baz kodu CSS
• Debugowanie CSS za pomocą nowoczesnych narzędzi deweloperskich przeglądarki

18. Praktyczny projekt nowoczesnego CSS

Uczestnicy budują responsywne nowoczesne interfejsy sieciowe, incorporating:

• CSS Grid
• Flexbox
• Subgrid
• Container queries
• CSS nesting
• Custom properties
• Cascade layers
• Modern selectors
• Fluid typography
• Modern viewport units
• Responsive design
• Modern colors and gradients
• Animations and transitions
• Accessibility considerations
• Performance best practices