katherine🌳 new work
> Over the past couple of years, I’ve been marking the seasons by the inhale and exhale of this tree.
accessibility notes:
- IMPORTANT: it is unfortunately a heavy webpage, weighing in at about 45 MB due to all of the images. i was wondering if there was a way to optionally load the images only if the user is okay with loading more data, but i'm not sure if there's a way to do that right now.
- each image comes with a caption that serves as the alt text. (hopefully that functionally works?) wasn't sure if this was going to be helpful or overwhelming, but it turned out to be an interesting writing challenge and i kind of like it. there is an option to hide the alt text if it's visually distracting while browsing the images.
- should work on both larger and smaller screens
- should work with both mouse and keyboard (have not tested with a screen reader yet)
Zach Leatherman@kayserifserif this is amazing.
On your first point, I do have an experimental <is-land> demo of no-JS friendly image loading: https://is-land.11ty.dev/demo-image-loading
(and is-land has a `on:save-data` condition that ties into this: https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData but you could use a button like the demo shows)
Eric Portis@zachleat @kayserifserif Because it's just scrolling, I wonder if just adding loading=lazy could be enough?
Johannes Odland@eeeps @zachleat @kayserifserif I don’t think loading=lazy works so well in Safari, if it’s scrolling in a container and not in the viewport.
Safari doesn’t use IntersectionObserver with scrollMargin (yet) for lazyloading, and won’t see the image until it becomes visible in the container.
@johannes @zachleat @kayserifserif Oh dang! TIL. But does your comment here: https://bugs.webkit.org/show_bug.cgi?id=264864 mean you're actively working on this? (if so, THANK YOU)
@eeeps @zachleat @kayserifserif I’ve filed a PR for supporting scrollMargin, but it’s currently stuck in review.
https://github.com/WebKit/WebKit/pull/40687
Once scrollMargin is supported it should be easy to switch to using that for loading=lazy.
[intersection-observer] Implement support for scrollMargin by johannesodland · Pull Request #40687 · WebKit/WebKit
09ecb0b [intersection-observer] Implement support for scrollMargin https://bugs.webkit.org/show_bug.cgi?id=263370 Reviewed by NOBODY (OOPS!) This change adds support for scrollMargin to Intersect...
@eeeps @zachleat @kayserifserif I’m not a WebKit developer, so I’m not sure if they think my patch is the right way to go.
@johannes @zachleat @kayserifserif You're submitting PRs! Seems like you're a WebKit developer to me! (but also I know what you mean; good luck)
@johannes @zachleat @kayserifserif Fantastic! (and also sorry to the half-dozen people I've given bad* carousel advice to over the past few months, because I was too lazy to test if WebKit worked like Chrome!)
—
* or at least premature