alloyed

Unironically needed to see what you did to "switch pages" with radio inputs and CSS as an example to implement a basic CSS-only gallery on my own site, thank you for posting this it will genuinely help me. I have something kinda-sorta working but I need to test on some older browsers and try other ways to select the right elements

godspeed you! big animal @niss9/26/2024, 10:07 AM

it is in fact possible to do this in a way that even firefox esr (and qutebrowser) can understand using ~, if you flatten the markup a bit

<!-- no form, no main, so the buttons and the
     sections are direct descendants of <body> -->
<input type=radio name=page id=r-one>
<input type=radio name=page id=r-two>

<section id=one> 1111111111111111 </section>
<section id=two> 2222222222222222 </section>

body > section { display: none; }

#r-one:checked ~ #one { display: block; }
#r-two:checked ~ #two { display: block; }

this just wouldn't work in my case because i needed the sections to be inside some container to serve as the spinning cube (which even in the final version is needed for the animation). but if your transition of choice is like, a crossfade or something, this could work! edit: actually, that's not the problem. you could still say something like #r-one:checked ~ #cube #one { … }. the actual issue is that the boxes are in a container. (since the general problem that :has() solves is matching one part of the document tree, then jumping back up and styling a different part.) so this might actually apply to most pages. (tho you could still do some grid layout stuff to avoid it, maybe…)

Lapis the Nevrean @lapisnev9/26/2024, 1:42 PM

Thanks for taking the time to write this out! This is apparently one of the clunkier problems to solve that people might want to commonly implement and I dove in ass-first because of course X3

Pinned Tags