> I'm so lost, or at least, struggling. Why is modern HTML/CSS like this?
I think it's pretty neat. It allows me to build cool interactive stuff such as the post in question without having to use JavaScript.
> And also apparently clicking on the label toggles the checkbox because, it just works that way by default?
Yes, that's how semantic HTML forms work.
> And then the CSS properties can vary depending on the checkbox state, without JavaScript, because that's just built into CSS for some reason?
Yes, it makes sense to be able to style an unchecked checkbox differently from a checked one. And I'm just using CSS's `:has()` to check for the state: html:has(#foo:checked) label[for=foo] { ... }
> And two separate <feTile> tags define a filter in conjunction, one describing the region to take as a tile and the second describing where to tile it?
<feTile> is a single element filter just like all the other ones. It just tiles the current image to the desired size. If the input is bigger than the output, it functions as a crop instead. So I use two of them to achieve a crop + tile.
> And what even are these <fake-frame> and <art-frame> elements?
They're autonomous custom elements, you can just make them up instead of using div-soup.
> <feTile> is a single element filter just like all the other ones. It just tiles the current image to the desired size. If the input is bigger than the output, it functions as a crop instead. So I use two of them to achieve a crop + tile.
I coincidentally was given that link elsewhere since posting and have been reading it and clarified much of the rest as well. Amazing work on the blog overall.
I think it's pretty neat. It allows me to build cool interactive stuff such as the post in question without having to use JavaScript.
> And also apparently clicking on the label toggles the checkbox because, it just works that way by default?
Yes, that's how semantic HTML forms work.
> And then the CSS properties can vary depending on the checkbox state, without JavaScript, because that's just built into CSS for some reason?
Yes, it makes sense to be able to style an unchecked checkbox differently from a checked one. And I'm just using CSS's `:has()` to check for the state: html:has(#foo:checked) label[for=foo] { ... }
> And two separate <feTile> tags define a filter in conjunction, one describing the region to take as a tile and the second describing where to tile it?
<feTile> is a single element filter just like all the other ones. It just tiles the current image to the desired size. If the input is bigger than the output, it functions as a crop instead. So I use two of them to achieve a crop + tile.
> And what even are these <fake-frame> and <art-frame> elements?
They're autonomous custom elements, you can just make them up instead of using div-soup.
I touched on it in this post: https://lyra.horse/blog/2025/08/you-dont-need-js/