JavaScript-parallax näyttää aina hieman väärältä — hieman irralliselta, kuin kerrokset uisivat puoli ruutua sivun takana. Se ei ole huolimatonta koodia. Se johtuu siitä, että vieritystapahtumat saavuttavat JavaScriptin sen jälkeen kun selain on jo piirtänyt vierityksen. Selain ratkaisi tämän kerran, kun se muutti tarrautuvat otsikot position: sticky -ominaisuudeksi. Scroll-driven animations on sama veto, sovellettuna kaikkiin vieritykseen sidottuihin efekteihin kerralla.
Kymmenen vuotta kuvakkeen animointi hero-kuvaksi tarkoitti yhtä tekniikkaa: mittaa elementti ennen, mittaa jälkeen, väärentä ero transformilla ja toista. FLIP. Jokainen animaatiokirjasto tekee sen, ja jokainen maksaa siitä JavaScriptillä pääsäikeessä pahimmalla mahdollisella hetkellä. View Transitions API siirtää koko tempun selaimeen — ja React 19.2:n ja Next.js 16:n myötä koko sopimus koostuu yhdestä propista nimeltä name.
Tuhannen kommentin lista renderöityy hitaasti, joten tartut react-windowiin – ja sulavan vierityksen vastineeksi menetät Ctrl+F:n, sivun tulostuksen ja osittain ruudunlukijan navigoinnin, koska ikkunan ulkopuoliset elementit lakkaavat fyysisesti olemasta DOM:ssa. content-visibility ratkaisee saman ongelman toisin: elementit pysyvät DOM:ssa, selain vain jättää niiden kohdalla väliin kalliin layout- ja piirtotyön, kunnes ne ovat lähellä näkyvää aluetta – ja, yllättäen, se osaa tilapäisesti paljastaa ne, kun etsit niistä tekstiä.
Saavutettavuusartikkelissa display:none-määrityksellä piilotettu modaali, joka oli silti olemassa saavutettavuuspuussa, oli esimerkki virheestä, joka syntyy, kun modaali rakennetaan tyhjästä diveillä. Todellinen kysymys kuuluu: miksi se piti ylipäätään rakentaa tyhjästä? Tarkastelen, mitä natiivi <dialog> ja popover-attribuutti antavat ilmaiseksi – top layerin, fokusloukun, light dismissin – ja missä nämä kaksi mekanismia eroavat toisistaan niin paljon, että niiden sekoittaminen on suora tie saavuttamattomaan käyttöliittymään.
Apuluokka .mt-4 häviää säännölle .card .card__header .card__title, vaikka sen loogisesti pitäisi voittaa, koska se lisättiin myöhemmin. Tämä ei ole sattumaa – tämä on spesifisyys, joka tekee juuri sitä, mitä varten se on suunniteltu. @layer tuo täysin uuden akselin konfliktien ratkaisuun, joka toimii ennen spesifisyyttä, ei sen rinnalla – ja siinä on yksi sudenkuoppa niin epäintuitiivinen, että sen rikkoo jopa osa verkon dokumentaatiosta.
Lomakekentän pitäisi korostua punaisena, kun sen sisällä oleva input on virheellinen. Yksinkertainen asia – paitsi että CSS ei 25 vuoteen kyennyt kysymään elementiltä, mitä sen sisällä tapahtuu, vain päinvastoin. Tarkastelen, miten :has() kääntää tämän suunnan, miten se eroaa tavallisista kombinaattoreista ja missä tämä uusi voima todella maksaa suorituskyvyssä.
