Slik får du smooth scroll med kun CSS

Dette var uken hvor Trøndelag AP var i fokus, Windows 95 hadde 25-årsjubileum 🥳, en noen hadde ravefest i en bunkers 🕺

Også skjedde det selvsagt masse i frontend-verdenen.

Smooth scrolling med CSS

Er det mulig da? Ja, det er visst det.

Bare legg til scroll-behavior: smooth; på elementet du vil at skal rulle litt «mykere». Dette skjer altså bare ved navigering, og ikke når brukeren faktisk scroller selv.

Det er selvsagt viktig å tenke seg litt om før man bare slenger dette på, og det gir ikke mening i alle sammenhenger.

Noen brukere ønsker også mindre bevegelse, så da kan det være fint å bruke denne media-querien.

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

Når det kommer til nettleserstøtte, er det kanskje ikke så overraskende at det er Safari som henger etter, og dette er heller ikke støttet i iOS 14 som lanseres i høst.

Men dette er allikevel en fin progressive enhancement for de som kjører andre nettlesere.

Burde du bruke Next.js i din neste react-app?

Det mener hvert fall Next.js-bidragsyter Lee Robinson.

For de som ikke kjenner til Next.js, så er det hovedsakelig et React-rammeverk som har støtte for rendring på serveren eller rendring av statiske sider.

I denne videoen går han gjennom fordelene med Next.js og hvorfor han mener det er fremtiden:

Og når vi først er inne på temaet …

Vercel, selskapet bak blant annet Next.js, avduket på tirsdag en Next.js-konferanse som avholdes 27. oktober. Det hele skjer digitalt, selvsagt, og er gratis for alle.

Det er foreløpig ikke lagt ut noe program for konferansen ennå, så vi får bare vente å se hva som kommer.

This vs That

Hva er egentlig forskjellen mellom :active og :focus i CSS?

Hva med clientHeight, offsetHeight og scrollHeight i DOMen?

This vs. That har svaret, enkelt forklart.

Av kategorier finnes CSS, DOM, HTML, JavaScript, React og TypeScript, og mer innhold ser ut til å være på vei.

Hvordan fungerer grids i CSS igjen?

CSS-guru Una Kravets tar oss gjennom 10 moderne CSS-layouts med «one-linere».

Hun baserer seg på flexbox og grid, og er en fin introduksjon til hvordan disse layoutene fungerer:

I videoen viser hun blant annet frem layoutene «Pancake Stack», «Classic Holy Grail Layout» og «RAM».

Det siste eksempelet hennes er den jeg personlig synes er mest interessant – «Respect for Aspect»_

aspect-ratio: <width> / <height> beholder størrelsesforholdet på et ønsket element, og er et problem jeg ofte har vært borti. Dessverre er dette noe som føreløpig ikke har noe utbredt nettleserstøtte ennå, så der må vi bare smøre oss med litt tålmodighet.

Hvis man bare vil leke seg litt med eksemplene hennes, finner man de også her.

Det var alt for denne gang! Vi ses igjen neste uke 👋