Blogg

Rulleanimasjoner: animation-timeline i stedet for IntersectionObserver

Det er en grunn til at JavaScript-parallaks alltid ser litt feil ut — litt frakoblet, som om lagene svømmer en halv frame bak siden. Det er ikke slurvete kode. Det er at scroll-hendelser når JavaScript etter at nettleseren allerede har tegnet rullingen. Nettleseren løste dette én gang tidligere, da den forvandlet klebrige overskrifter til position: sticky. Scroll-driven animations er det samme grepet, brukt på alle scroll-bundne effekter på én gang.

Popover API og nativ <dialog>: slutt på modaler bygget manuelt fra bunnen

I artikkelen om tilgjengelighet var en modal med display:none, som fortsatt fantes i tilgjengelighetstreet, et eksempel på en feil som følger av å bygge en modal fra bunnen med div-er. Det egentlige spørsmålet er: hvorfor måtte den i det hele tatt bygges fra bunnen? Jeg går gjennom hva den native <dialog> og popover-attributtet gir deg gratis – top layer, fokusfelle, light dismiss – og hvor disse to mekanismene skiller seg så mye at å forveksle dem er en enkel vei til et utilgjengelig grensesnitt.

Oppretting av tilgjengelige komponenter for skjermlesere

Korrekt HTML er bare startpunktet. Se hvordan tilgjengelighetstreet faktisk fungerer, hvorfor ARIA oftere skader enn hjelper enn du skulle tro, og bygg en ekte accordion, en live region og fokushåndtering i Next.js sammen med meg.