Avansert CSS3 Treningskurs

1. Modern CSS og CSSs utvikling

• Fra CSS3 til moderne CSS
• Aktuelle CSS-standarder og nettleserimplementering
• Forståelse av CSS-spesifikasjonen og nettleserstøtte
• Progressiv forsterking
• Funksjonsdeteksjon og elegant degradering
• Forståelse av det moderne CSS-økosystemet

2. Avanserte selektorer

• Avanserte attributtselektorer
• Strukturelle pseudo-klasser
• :is()
• :where()
• :not()
• :has() og relasjonelle selektorer
• Selektor-spesifisitet
• Å håndtere spesifisitet i store prosjekter
• Beste praksis for moderne selektorer

3. Moderne farger og visuelle effekter

• RGB, HSL og moderne fargefunksjoner
• color(), lab(), lch(), oklab() og oklch()
• Relative farger
• Gjennomsiktighet og alfa-kanaler
• Avanserte gradienter
• Lineære, radiale og koniske gradienter
• color-mix()
• Fargeinterpolering
• CSS-filtre og visuelle effekter
• Moderne temaer og fargesystemer

4. CSS-egete egenskaper og designsystemer

• CSS-variable / egener egenskaper
• Variable og standardverdier
• Dynamisk temagiving
• Komponentnivå-tilpasning
• Design-tokens med CSS
• Å lage lyse og mørke temaer
• Bruke var(), @property og typed egener egenskaper
• Å bygge vedlikeholdbar CSS-designsystemer

5. CSS-innsmal og kaskadehåndtering

• Native CSS-innsmal
• Innsmal syntaks og beste praksis
• CSS-innsmal vs. preprosessorer
• Kaskade og arv
• Kaskadelag med @layer
• Å håndtere tredjeparts CSS
• @scope og skoped styling-konsepter
• Å bygge forutsigbar CSS-arkitektur

6. Avansert layout med Flexbox

• Gjennomgang av Flexbox-grunnlegger
• Hovedakse og tverrgående akse
• Avansert justering
• Fleksibel størrelse
• gap
• Omvikling og ordning
• Innesmalte Flexbox-layouter
• Gangse Flexbox-mønstre
• Responsivt komponenter ved bruk av Flexbox

7. Avansert CSS Grid

• Gjennomgang av Grid-grunnlegger
• Eksplisite og implisite grid
• Avansert sporstørrelse
• minmax()
• auto-fit og auto-fill
• min(), max() og clamp()
• Grid-områder
• Responsivt Grid-layouter
• Komplekse sideoppsatt
• CSS Subgrid
• Bruke Subgrid for justerte komponent-layouter

8. Beholderforespørsler og komponentbasert responsivitet

• Hvorfor visningsrute-medieferoerspørsler ikke alltid er nok
• Konsepter for beholderforespørsler
• container-type
• @container
• Beholderforespørsler lengdeenheter
• Komponentstyrt responsivt design
• Stylingforespørsler for beholderforespørsler
• Designere gjenbruksbare responsivt komponenter
• Beholderforespørsler vs. mediaforespørsler

9. Modern responsivt design

• Mobile-first design
• Responsivt brytningspunkter
• Fluid typografi
• Fluid spasing
• clamp()
• Modern visningsruteenheter:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Dynamisk visningsrute overvegelser
• Beholder-relative enheter
• Responsivt bilder og media
• Redusere unødige mediaforespørsler

10. Logiske egenskaper og internasjonalisering

• Logiske vs. fysiske CSS-egenskaper
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Logisk størrelse
• Skrivemodus
• Høyre-til-venstre (RTL) layouter
• Å bygge internasjonalt tilpassbare grensesnitt

11. Modern typografi

• Responsivt typografi
• Variable fontene
• Hensyn ved lastning av fontene
• font-size-adjust
• Fluid typografi skalaer
• Linjeføring og overskrid
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Beste praksis for moderne typografi

12. Transformasjoner, overganger og animasjoner

• 2D og 3D transformasjoner
• Overganger
• Nøkleramme animasjoner
• Tidsfunksjoner
• Animasjons-sammensetning
• Transformasjons-prestasjoner
• Scroll-aktiverede animasjoner
• animation-timeline
• View-timeline konsepter
• Bevegelighet tilgjengelighet
• prefers-reduced-motion
• Prestasjonshensyn

13. Modern CSS UI-funksjoner

• Native CSS dialogbokser og popovers
• Styling interaktive UI-stater
• :popover-open
• :modal
• :focus-visible
• :target
• Form-styling
• accent-color
• appearance
• field-sizing
• Modern skjema-kontroller
• Å bygge tilgjengelig CSS-kun interaksjoner

14. Avanserte CSS-funksjoner

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Relative fargefunksjoner
• Sammenslutte funksjoner for fluid layout
• Praktiske responsivt designmønstre

15. CSS-preprosessorer

• Generell oversikt over CSS-preprosessorer
• LESS
• Variable og mixin
• Innsmal styling
• Funksjoner og operasjoner
• LESS vs. moderne native CSS
• Når en preprosessor fortsatt er nyttig
• Migrere preprosessor-funksjoner til native CSS

16. Design og tilgjengelighetshensyn

• Beste praksis for moderne CSS
• Tilgjengelighet-først styling
• Tastaturfokus-stater
• :focus-visible
• Redusert bevegelighet
• Kontrast og fargehensyn
• Responsivt tekst og innhold
• Tekst over bilder
• Tilgjengelig responsivt komponenter
• Progressiv forsterking

17. CSS-prestasjoner og vedlikeholdbarhet

• Redusere CSS-kompleksitet
• Unngå unødige spesifisitet
• Kaskadelag for vedlikeholdbarhet
• Gjenbruksbare nyttig- og komponent-mønstre
• CSS-innhold konsepter
• content-visibility
• Rending og layout-prestasjoner
• Redusere layout-skift
• Organisere store CSS-kodebasen
• Feilsøke CSS med moderne nettleser utviklerverktøy

18. Praktisk modern CSS-prosjekt

Deltakerne bygger et responsivt modern nettgrensesnitt som inneholder:

• CSS Grid
• Flexbox
• Subgrid
• Beholderforespørsler
• CSS-innsmal
• Egenegenskaper
• Kaskadelag
• Modern selektorer
• Fluid typografi
• Modern visningsruteenheter
• Responsivt design
• Modern farger og gradienter
• Animasjoner og overganger
• Tilgjengelighetshensyn
• Beste praksis for prestasjoner