Pokročilý CSS3 Počítačový Kurz

1. Moderní CSS a vývoj CSS

• Od CSS3 k modernímu CSS
• Aktuální standardy CSS a implementace v prohlížečích
• Pochopení specifikace CSS a podpory prohlížečů
• Postupné zdokonalování (Progressive enhancement)
• Zjišťování funkcí a elegantní degradace
• Pochopení moderního ekosystému CSS

2. Pokročilé selektory

• Pokročilé selektory atributů
• Strukturované pseudo-třídy
• :is()
• :where()
• :not()
• :has() a relacionální selektory
• Specifičnost selektorů
• Správa specifičnosti ve velkých projektech
• Osvědčené postupy pro moderní selektory

3. Moderní barvy a vizuální efekty

• RGB, HSL a moderní barevné funkce
• color(), lab(), lch(), oklab() a oklch()
• Relativní barvy
• Průhlednost a alfa kanály
• Pokročilé přechody (gradiente)
• Lineární, radiální a kuželové přechody
• color-mix()
• Interpolace barev
• CSS filtry a vizuální efekty
• Moderní tematizace a barevné systémy

4. Vlastní vlastnosti CSS a designové systémy

• Proměnné CSS / vlastní vlastnosti
• Proměnné a výchozí hodnoty
• Dynamická tematizace
• Přizpůsobení na úrovni komponent
• Designové tokeny pomocí CSS
• Vytváření světlých a tmavých témat
• Použití var(), @property a typovaných vlastních vlastností
• Stavba udržitelných designových systémů v CSS

5. Vnořování CSS a správa kaskády

• Nativní vnořování CSS
• Syntaxe vnořování a osvědčené postupy
• Vnořování CSS vs. preprocesory
• Kaskáda a dědění
• Wrstvy kaskády pomocí @layer
• Správa CSS třetích stran
• @scope a koncepty omezeného stylování
• Stavba předvídatelných CSS architektur

6. Pokročilé rozložení pomocí Flexboxu

• Přezkum základů Flexboxu
• Hlavní osa a křížová osa
• Pokročilé zarovnání
• Flexibilní rozměrování
• gap
• Obalování a řazení
• Vnořené Flexbox rozložení
• Bežné vzory Flexboxu
• Responzivní komponenty pomocí Flexboxu

7. Pokročilá CSS mřížka (Grid)

• Přezkum základů mřížky
• Explicitní a implicitní mřížky
• Pokročilé rozměrování stop
• minmax()
• auto-fit a auto-fill
• min(), max() a clamp()
• Oblasti mřížky
• Responzivní rozložení mřížky
• Komplexní rozložení stránek
• Podmřížka CSS (Subgrid)
• Použití Subgrid pro zarovnané rozložení komponent

8. Dotazování na kontejnery a komponentová responzivita

• Proč samostatná média dotazování podle viewportu nestačí
• Koncepty dotazování na kontejnery
• container-type
• @container
• Jednotky délky pro dotazování na kontejnery
• Responzivní design řízený komponentami
• Stylové dotazování na kontejnery
• Návrh znovu použitelných responzivních komponent
• Dotazování na kontejnery vs. média dotazování

9. Moderní responzivní design

• Návrh s důrazem na mobilní zařízení
• Responzivní přelomové body
• Fluidní typografie
• Fluidní odsazení
• clamp()
• Moderní jednotky viewportu:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Zohlednění dynamického viewportu
• Kontejnerové relativní jednotky
• Responzivní obrázky a média
• Snižování zbytečných média dotazování

10. Logické vlastnosti a internacionalizace

• Logické vs. fyzické vlastnosti CSS
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Logické rozměrování
• Módy zápisu (Writing modes)
• Rozložení zprava doleva (RTL)
• Stavba mezinárodně přizpůsobitelných rozhraní

11. Moderní typografie

• Responzivní typografie
• Proměnné písma
• Zohlednění načítání fontů
• font-size-adjust
• Fluidní typografické měřítka
• Lamelní a přetékání textu
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Osvědčené postupy moderní typografie

12. Transformace, přechody a animace

• 2D a 3D transformace
• Přechody
• Klíčové snímky animací
• Časové funkce
• Skládání animací
• Výkon transformací
• Animace řízené scrolováním
• animation-timeline
• Koncepty časové osy zobrazení (View-timeline)
• Přístupnost pohybu
• prefers-reduced-motion
• Zohlednění výkonu

13. Moderní UI funkce CSS

• Nativní CSS dialogy a vyskakovací okna (popovers)
• Stylování interaktivních stavů UI
• :popover-open
• :modal
• :focus-visible
• :target
• Stylování stavů formulářů
• accent-color
• appearance
• field-sizing
• Moderní ovládací prvky formulářů
• Stavba přístupných interakcí pouze pomocí CSS

14. Pokročilé funkce CSS

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Relativní barevné funkce
• Kombinování funkcí pro fluidní rozložení
• Praktické vzorce responzivního designu

15. CSS preprocesory

• Přehled CSS preprocesorů
• LESS
• Proměnné a mixiny
• Vnořování stylů
• Funkce a operace
• LESS vs. moderní nativní CSS
• Kdy je preprocesor stále užitečný
• Migrace funkcí preprocesoru na nativní CSS

16. Zohlednění designu a přístupnosti

• Osvědčené postupy moderního CSS
• Přístupnost jako první stylizace
• Stavy klávesnicového focusu
• :focus-visible
• Omezený pohyb (Reduced motion)
• Zohlednění kontrastu a barev
• Responzivní text a obsah
• Text nad obrázky
• Přístupné responzivní komponenty
• Postupné zdokonalování

17. Výkon a udržovatelnost CSS

• Snižování složitosti CSS
• Vyhýbání se zbytečné specifičnosti
• Wrstvy kaskády pro udržovatelnost
• Znovu použitelné vzory utility a komponent
• Koncepty kontejneru CSS
• content-visibility
• Výkon vykreslování a rozložení
• Snižování posunů rozložení
• Organizace velkých CSS kódových bází
• Odstranění chyb v CSS pomocí moderních vývojářských nástrojů prohlížečů

18. Praktický projekt moderního CSS

Účastníci vytvoří responzivní moderní webové rozhraní, které zahrnuje:

• CSS Grid
• Flexbox
• Subgrid
• Dotazování na kontejnery
• Vnořování CSS
• Vlastní vlastnosti
• Wrstvy kaskády
• Moderní selektory
• Fluidní typografie
• Moderní jednotky viewportu
• Responzivní design
• Moderní barvy a přechody
• Animace a přechody
• Zohlednění přístupnosti
• Osvědčené postupy výkonu