The only downside to this example is that clicking the images a few times fills your navigation history with those anchors. Hitting back a half dozen times to go back to your search results isn’t fun.
I’m not a CSS expert AT ALL - so unfortunately I can’t offer an improvement. Maybe someone reading this can?
I know bashing JavaScript is a popular way to score points around here, but sheesh…
One nitpick I have with the current craigslist design is their approach to image galleries inside their listings. They use a chunk of bloated JavaScript (more than 380kB total) to render something as simple as a collection of images. This seems like overkill to me.
This implies the JavaScript bundle is only responsible for the gallery. It’s doing quite a bit more than that, actually, including:
search
account
maps
banner notifications
localization
If I’m reading the minified code right, the number of lines of JavaScript specifically for the gallery is probably less than 50 lines long unminified.
Wow, TIL
scroll-snapexists! That’s pretty neat!Same! And it’s fully supported!
The only downside to this example is that clicking the images a few times fills your navigation history with those anchors. Hitting back a half dozen times to go back to your search results isn’t fun.
I’m not a CSS expert AT ALL - so unfortunately I can’t offer an improvement. Maybe someone reading this can?
You could add one line of JS to do this with replaceState. I am not sure if there is a pure HTML+CSS solution.
You could do it as a progressive enhancement where it works without JS but with JS it’s nicer.
Adding
loading="lazy"to the<img>s might improve this.I know bashing JavaScript is a popular way to score points around here, but sheesh…
This implies the JavaScript bundle is only responsible for the gallery. It’s doing quite a bit more than that, actually, including:
If I’m reading the minified code right, the number of lines of JavaScript specifically for the gallery is probably less than 50 lines long unminified.
Making a gallery used to be super hard and now it’s totally trivial. I had to make one for work and I was shocked how easy it is now.
Only downside is the back button no longer acts as expected, and backs out through the gallery while not showing any gallery changes!
Probably fixable with a dozen bytes of js to clean up the history.
But otherwise very cool.
It also snaps anchors the top of the gallery to the top of the viewport. I wasn’t able to find a CSS way that would fix this.
Such features would have been better implemented by browsers rather than setting everyone out to re-invent the wheel, badly.