CSS3 avancerat Träningskurs

1. Modern CSS och CSS-utveckling

• Från CSS3 till modern CSS
• Aktuella CSS-standarder och webbläsarimplementationer
• Förståelse för CSS-specifikationen och webbläsarstöd
• Progressiv förstärkning
• Fungerande detektering och graciös nedgradering
• Förståelse för den moderna CSS-ekosystemet

2. Avancerade selektorer

• Avancerade attributselektorer
• Strukturella pseudoklasser
• :is()
• :where()
• :not()
• :has() och relationella selektorer
• Selektor-specificitet
• Hantering av specificitet i stora projekt
• Bästa praxis för moderna selektorer

3. Moderna färger och visuella effekter

• RGB, HSL och moderna färgfunktioner
• color(), lab(), lch(), oklab() och oklch()
• Relativa färger
• Transparens och alfakanaler
• Avancerade gradienter
• Linjära, radiala och koniska gradienter
• color-mix()
• Färginterpolation
• CSS-filter och visuella effekter
• Modern tematisering och färgsystem

4. CSS-anpassade egenskaper och designsystem

• CSS-variabler / anpassade egenskaper
• Variabler och fallback-värden
• Dynamisk tematisering
• Komponentnivå anpassning
• Design tokens med CSS
• Skapande av ljusa och mörka teman
• Användning av var(), @property och typade anpassade egenskaper
• Byggande av underhållbara CSS-designsystem

5. CSS-nästning och cascade-hantering

• Native CSS-nästning
• Nästningssyntax och bästa praxis
• CSS-nästning jämfört med förprocessorer
• Cascade och arv
• Cascade lager med @layer
• Hantering av tredjeparts-CSS
• @scope och koncept för scope-adlad styling
• Byggande förutsägbara CSS-arkitekturer

6. Avancerad layout med Flexbox

• Gransgenomgång av Flexbox-grunder
• Huvudaxel och korsaxel
• Avancerad justering
• Flexibel storleksbestämning
• gap
• Avrundning och sortering
• Nästade Flexbox-layouts
• Vanliga Flexbox-mönster
• Responsiva komponenter med Flexbox

7. Avancerad CSS Grid

• Gransgenomgång av Grid-grunder
• Explicita och implicita grids
• Avancerad spårstorleksbestämning
• minmax()
• auto-fit och auto-fill
• min(), max() och clamp()
• Grid-områden
• Responsiva Grid-layouts
• Complexa sidlayouter
• CSS Subgrid
• Användning av Subgrid för justerade komponentlayouter

8. Behållarfrågeställningar och komponentbaserad responsivitet

• Varför viewport-mediefrågor inte alltid räcker
• Behållarfrågeställning-koncept
• container-type
• @container
• Behållarfrågeställning längdenheter
• Komponentdriven responsiv design
• Behållarfrågeställning stilfrågor
• Design av återanvändbara responsiva komponenter
• Behållarfrågeställningar jämfört med mediafrågor

9. Modern responsiv design

• Mobile-first-design
• Responsiva brytpunkter
• Fluider typografi
• Fluide avstånd
• clamp()
• Moderna viewportenheter:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Dynamiska viewport överväganden
• Behållarrelativa enheter
• Responsiva bilder och media
• Minskning av onödiga mediafrågor

10. Logiska egenskaper och internationalisering

• Logiska vs. fysiska CSS-egenskaper
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Logisk storleksbestämning
• Skrivlägen
• Höger-till-vänster (RTL) layouter
• Byggande internationellt anpassbara gränssnitt

11. Modern typografi

• Responsiv typografi
• Variabla fontar
• Överväganden kring fontladdning
• font-size-adjust
• Fluida typskalan
• Textbrytning och överskridande
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Bästa praxis för modern typografi

12. Transformationer, övergångar och animationer

• 2D och 3D transformationer
• Övergångar
• Keyframe-animationer
• Tidsfunktioner
• Animationskomposition
• Transformationprestanda
• Skroll-drivna animationer
• animation-timeline
• View-timeline-koncept
• Rörelse-tillgänglighet
• prefers-reduced-motion
• Prestandaöverväganden

13. Moderna CSS UI-funktioner

• Native CSS-dialoger och popovers
• Styling av interaktiva UI-tillstånd
• :popover-open
• :modal
• :focus-visible
• :target
• Formulär-tillståndsstyling
• accent-color
• appearance
• field-sizing
• Moderna formulärkontroller
• Byggande tillgängliga CSS-enskild interaktioner

14. Avancerade CSS-funktioner

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Relativa färgfunktioner
• Kombinera funktioner för fluida layouts
• Praktiska responsiva designmönster

15. CSS-förprocessorer

• Översikt över CSS-förprocessorer
• LESS
• Variabler och mixar
• Nästade stilar
• Funktioner och operationer
• LESS jämfört med modern native CSS
• När en förprocessor fortfarande är användbar
• Migrering av förprocessorfunktioner till native CSS

16. Design- och tillgänglighetsöverväganden

• Bästa praxis för modern CSS
• Tillgänglighetsförsta styling
• Tangentbordsfokus-tillstånd
• :focus-visible
• Minimerad rörelse
• Kontrast och färgöverväganden
• Responsiv text och innehåll
• Text över bilder
• Tillgängliga responsiva komponenter
• Progressiv förstärkning

17. CSS-prestanda och underhållbarhet

• Minskning av CSS-komplexitet
• Att undvika onödig specificitet
• Cascade-lager för underhållbarhet
• Återanvändbara mönster för verktyg och komponenter
• Koncept för CSS-innehåll
• content-visibility
• Rendring- och layoutprestanda
• Minskning av layoutskift
• Organisation av stora CSS-kodbaser
• Felsökning av CSS med moderna webbläsarutvecklarklämma

18. Praktiskt modern CSS-projekt

Deltagarna bygger ett responsivt modernt webbgränssnitt som inkluderar:

• CSS Grid
• Flexbox
• Subgrid
• Behållarfrågeställningar
• CSS-nästning
• Anpassade egenskaper
• Cascade-lager
• Moderna selektorer
• Fluid typografi
• Moderna viewportenheter
• Responsiv design
• Moderna färger och gradienter
• Animationer och övergångar
• Tillgänglighetsöverväganden
• Bästa praxis för prestanda