#dev 2025-04-24

2025-04-24 UTC
grufwub and duanin2 joined the channel
#
[KevinMarks] Oh right, yes, I remember that. We had a similar thing with Technorati in 2004 IIRC
oodani, sebbu2, sp1ff, strugee, Maxpm, barnabywalters, paotsaq, Guest6, nemonical, ttybitnik, kernelle, qaotsap, [qubyte], [aciccarello], geoffo, thegreekgeek, barnaby, balintm, duanin2, Salt, h4kor, [social], fluffy, cow_2001, gRegor and [snarfed] joined the channel
#
[snarfed] hey all, what's current best practice for showing two different images based on CSS prefers-color-scheme ?
#
[snarfed] I can switch in JS, but I haven't found a good event for when prefers-color-scheme changes. https://github.com/orca-scan/appearance-changed-event looks usable but hacky
#
Loqi [preview] [orca-scan] appearance-changed-event: A 1k script that adds `appearance-changed` event to detect OS theme changes
#
[snarfed] I can use background-image with a media query, but I don't yet know the right way to size the containing element to the image
#
[snarfed] maybe I just do that and size manually? 🤷
#
[artlung] A picture element can be used with source elements with media queries
#
[snarfed] oh interesting, I'm not familiar with <picture>. looking...
#
[artlung] capjamesg[d] does it on his site in several pieces where he has screenshots. I think for his feedreader
#
[artlung] nice examples
#
[artlung] I don't have a dark-light mode example handy for myself. But https://artlung.com/headers/-20241206 shows a media query inline. it's a picture element, with
#
[artlung] a source tag with the media query for (min-width: 600px) which supersedes the <img> tag which is the second child element.
ttybitnik joined the channel
#
[artlung] you may be familiar with the `srcset` syntax. I really like the discreet tag syntax better
#
[snarfed] oh intersting, source's media attr is a media query that determines when to show it?
#
[artlung] right
#
[snarfed] 👍
#
[artlung] https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source
#
capjamesg [snarfed] Try toggling between light mode and dark mode on https://artemis.jamesg.blog/app
#
capjamesg [edit] [snarfed] Try toggling between light mode and dark mode on https://artemis.jamesg.blog/app
#
capjamesg The screenshots should change.
#
[artlung] `<picture>`
#
[artlung] `<source srcset="/assets/app1.webp" media="(prefers-color-scheme: light)">`
#
[artlung] `<source srcset="/assets/app1_dark.webp" media="(prefers-color-scheme: dark)">`
#
[artlung] `</picture>`
#
[artlung] `<img src="/assets/app1.webp" alt="Artemis home page">`
#
[snarfed] it works! love it, no JS, thanks
#
[artlung] Thanks for popping in capjamesg[d]++ !
#
[artlung] Yeah, good stuff. capjamesg[d]++
#
Loqi capjamesg[d] has 46 karma in this channel over the last year (208 in all channels)
strugee_ and pfych joined the channel