Now 40% less CSS for the same result! - Minified CSS - No SVG wrapper, I was wrong, it doesn’t need it - No supports, supporting view-transitions but not mask is rare and they just get no transition - Better png encoding + No MIME type or checksum - Frames reversed when smaller

An easily accessible browser level dark mode toggle. Let it just overwrite the system preference and we can remove all that code from our sites

If you wanna use progress() but the browser support isn't good enough yet, then have I got the blog post for you

And ofc ty for you for the shout out, I appreciate it 😄

The part I think is particular cool, is the PNG mask is wrapped in an SVG, which lets you apply CSS to it! In this case image-rendering:pixelated, without it the mask would be blurry

I'm maybe an outlier in that if the CSS fallback produces the same result, I just do the fallback. I mostly save @supports for progressive enhancement where I'd do things differently based on if it's available or not. And I'm not a good enough developer to know much about tree shaking 😅

I think a lot people would find progress() easier to understand, and progress + the same atan2 fallback has the exact same browser support. Progress() has better support than the division

I'm just talking about the breakpoints, not the font-size values. I think the breakpoints should always be written in pixels anyway

Writing the division and @support is more code than needed though. We're already creating a fallback for progress. I dont want to create a 3 tier system of supports progress/supports division/everything else, when we could just do 2 tiers and be done

We have to work around the browser inconsistencies though? The whole reason we register the values is because the browser will convert them to like units. But since we know what those units will be, px in this case, we can skip registering more than we need too if we are also using pixels.

Yeah it does support unit divison but not mixed unit atan2. Where as firefox supports mixed unit atan2 but not unit divison. I think registering non-px values and using atan2 is the least code for a cross browser solution.

You can use rem's or whatever else, but you have to register more properties. And I was trying to highlight the simplest fallback for the most common use case in fluid typography

Cheers! Just a link to the post with the screenshot would be cool 🙂. Nothing more concrete publish yet