CSS3 haladó szintű képzés Képzés

1. Modern CSS és a CSS fejlődése

• A CSS3-tól a modern CSS-ig
• Aktuális CSS-szabványok és böngészőimplementációk
• A CSS-specifikáció és a böngészőbiztosítás megértése
• Progresszív erősítés
• Képességdetektálás és az elegáns degradáció
• A modern CSS-ökoszisztéma megértése

2. Haladó szelektora

• Haladó attribútum-szelektora
• Szerkezeti pszeudoszintaktikai osztályok
• :is()
• :where()
• :not()
• :has() és relációs szelektora
• Szelektor-sajátosság
• A sajátosság kezelése nagyobb projekteknél
• A modern szelektorok legjobb gyakorlatai

3. Modern színek és vizuális hatások

• RGB, HSL és modern színfüggvények
• color(), lab(), lch(), oklab() és oklch()
• Közeli színek
• Átláthatóság és alfa csatornák
• Haladó gradiens
• Lineáris, sugárzó és konikus gradiens
• color-mix()
• Színikpoláció
• CSS szűrők és vizuális hatások
• Modern tematizálás és színrendszerek

4. CSS egyedi tulajdonságok és dizájnrendszerek

• CSS változók / egyedi tulajdonságok
• Változók és tartalékértékek
• Dinamikus tematizálás
• Komponensz-szintű testreszabás
• Dizájntokének a CSS-ben
• világos és sötét témák létrehozása
• var(), @property és típusos egyedi tulajdonságok használata
• Karbantartott CSS dizájnrendszerek építése

5. CSS belső szintaxis és kaskádus kezelése

• Natív CSS belső szintaxis
• Belső szintaxis és legjobb gyakorlatai
• CSS belső szintaxis vs. előfeldolgozók
• Kaskádus és öröklődés
• Kaskádus rétegek @layer használatával
• Harmadik féltől származó CSS kezelése
• @scope és a hatáskörre szűkített stílusolás fogalmai
• Prediktív CSS architektúrák építése

6. Haladó elrendezés Flexbox-sal

• Flexbox alapok ismétlése
• Fő tengely és kereszt-tengely
• Haladó igazítás
• Rugalmas méretezés
• gap
• Átcsomagolás és sorrendezés
• Beágyazott Flexbox elrendezések
• Gyakori Flexbox minták
• Responzív komponensek Flexbox-sal

7. Haladó CSS Grid

• Grid alapok ismétlése
• Explit és implícit grid
• Haladó sáv-méretezés
• minmax()
• auto-fit és auto-fill
• min(), max() és clamp()
• Grid területek
• Responzív Grid elrendezések
• Kezet oldalsó elrendezések
• CSS Subgrid
• Subgrid használata az igazított komponens-elrendezésekhez

8. Konténer-lekérdezések és komponens-alapú responzivitás

• Miért nem mindig elegendőek a nézetpálya média-lekérdezések
• Konténer-lekérdezések fogalmai
• container-type
• @container
• Konténer-lekérdezési hossz mértékegységek
• Komponensvezérelt responzív tervezés
• Konténer-lekérdezés stílus-lekérdezések
• Visszaváltható responzív komponensek tervezése
• Konténer-lekérdezések vs. média-lekérdezések

9. Modern responzív tervezés

• Mobil-first tervezés
• Responzív töréspontok
• Rugalmas tipográfia
• Rugalmas térközök
• clamp()
• Modern nézetpálya mértékegységek:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Dinamikus nézetpálya szempontok
• Konténer-relatív egységek
• Responzív képek és média
• Felszámítás nélküli média-lekérdezések csökkentése

10. Logikai tulajdonságok és nemzetköziesítés

• Logikai vs. fizikai CSS-tulajdonságok
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Logikai méretezés
• Írásmod
• Jobb-bal (RTL) elrendezések
• Nemzetközi szinten alkalmazható felületek építése

11. Modern tipográfia

• Responzív tipográfia
• Változó betűtípusok
• Betűbetöltési szempontok
• font-size-adjust
• Rugalmas tipográfiai skálák
• Szövegcsomagolás és túlcsorgás
• text-wrap: balance
• text-wrap: pretty
• hyphens
• A modern tipográfia legjobb gyakorlatai

12. Transzformációk, átmenetek és animációk

• 2D és 3D transzformációk
• Átmenetek
• Kulcskeret animációk
• Időzítési függvények
• Animációk összeállítása
• Transzformációs teljesítmény
• Görgetés-vezérelt animációk
• animation-timeline
• Nézet-idővonal fogalmai
• Mozgás-hozzáférhetőség
• prefers-reduced-motion
• Teljesítmény-szempontok

13. Modern CSS UI funkciók

• Natív CSS párbeszédpanelek és popovertábla
• Interaktív UI állapotok stílusolása
• :popover-open
• :modal
• :focus-visible
• :target
• Űrlap-állapotok stílusolása
• accent-color
• appearance
• field-sizing
• Modern űrlap-vezérlők
• Hozzáférhető, csak-CSS interakciók építése

14. Haladó CSS függvények

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Közeli szín függvények
• Függvények kombinálása rugalmas elrendezésekhez
• Gyakorlati responzív tervezési minták

15. CSS előfeldolgozók

• CSS előfeldolgozók áttekintése
• LESS
• Változók és mixin
• Belső szintaxissal
• Függvények és műveletek
• LESS vs. modern natív CSS
• Mikor hasznos még az előfeldolgozó
• Előfeldolgozó funkciók átkötése natív CSS-re

16. Tervezési és hozzáférhetőségi szempontok

• A modern CSS legjobb gyakorlatai
• Hozzáférhetőség-első stílusolás
• Billentyűzet-fókuszt állapotok
• :focus-visible
• Csökkentett mozgás
• Kontraszt és szín szempontok
• Responzív szöveg és tartalom
• Szöveg képeken
• Hozzáférhető responzív komponensek
• Progresszív erősítés

17. CSS teljesítmény és karbantarthatóság

• CSS komplexitás csökkentése
• Felszámítás nélküli sajátosság elkerülése
• Kaskádus rétegek a karbantarthatóság érdekében
• Visszaváltható segédlet- és komponensminták
• CSS tartalmi fogalmak
• content-visibility
• Renderelési és elrendezési teljesítmény
• Elrendezési eltolódások csökkentése
• Nagy CSS kódbázisok rendezése
• CSS hibakereső modern böngésző fejlesztői eszközökkel

18. Gyakorlati modern CSS projekt

A résztvevők egy responzív, modern webes felületet építenek meg, amely a következőket tartalmazza:

• CSS Grid
• Flexbox
• Subgrid
• Konténer-lekérdezések
• CSS belső szintaxis
• Egyedi tulajdonságok
• Kaskádus rétegek
• Modern szelektora
• Rugalmas tipográfia
• Modern nézetpálya mértékegységek
• Responzív tervezés
• Modern színek és gradiens
• Animációk és átmenetek
• Hozzáférhetőségi szempontok
• Teljesítmény-legjobb gyakorlatai