Nice Jizzmas tree 😬

The pudding or the terrier? 🤔

Keep those lists coming! 🤩

I read that post in a Michael McIntyre voice, to give it some extra panache. 😁

When we first reviewed JPEG XL, as far as we could see no other browser engine wanted it. Our judgement was the benefit wasn't worth the cost. Then Safari decided otherwise and shipped it. Once Mozilla expressed their openness to shipping, it was inevitable that Chromium would too.

I also asked it to build a demo for me and it got it right on the 1st try (without using any React or Tailwind as well).

codepen.io/bramus/full/...

It took a few nudges into the right direction, but out came a an actual TypeScript class.

I then continued with Gemini Code Assist in VS Code to create the package structure and some other related files.

And look: github.com/bramus/stick...

The “I can’t believe that worked” at the end is the cherry on top 😄

I read it when your newsletter got sent and had it bookmarked to leave a reply. But by the looks of it you’ve got it figured out :)

The prefers-colors-scheme media query does not replace color-scheme, but it goes hand-in-hand with it.

Set `color-scheme: light dark` on `:root`, and its used value ends up being either `light` or `dark`, based on your preference.

(Could it be that the post got updated? Because it mentions this)

Winging back to the initial snap thing: Here’s a reworked version that uses either `scroll-initial-target` or the animation hack.

A subtle difference though, is that the animation uses a `from` keyframe. That way you don’t need a permanently-fill-forward-animation.

gist.github.com/bramus/94b0e...

The problem is that you can introduce cycles that way, so you need the parent-child relationship.

As an alternative you can use inline if(), which has built-in protection for cycles.

Nice work!

Everything from Scroll-Driven Animations, and soon Scroll-Triggered Animations.

(Although some require 2 lines of CSS … but that still beats +100 of lines of JS)

Scroll detection nowadays can be done with Scroll-State Queries: developer.chrome.com/blog/css-scr...

But browser support for Scroll-Driven Animations is better than that for Scroll-State Queries, so perhaps better to stick to SDA (for now).

This is how it should have worked from the start, as the spec says it applies to a “scroll container” without making a distinction between a scrollable or non-scrollable one.

There are links to bugs with other vendors in the post, so feel free to star/+1 those bugs to indicate interest.

Yeah, the styles have to be in the stylesheet in the Shadow Root.

codepen.io/bramus/pen/J...

/me mumbles something about shadow-piercing selectors …