What if I will tell you how we could solve fit-to-width text with pure #CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that!
Welcome my new article — “Fit-to-Width Text” — where I continue exploring the experimental implementations of the latest specs.
@pecus @bramus Yep, know about it! Can't wait for other browsers to pick this up as well :)
In the meantime — if you did not see it yet — I have a newer technique for the same result, but which is fully cross-browser (but requires text duplication): https://kizu.dev/fit-to-width/
Registered custom properties are now available in all modern browsers. Using some pre-existing techniques based on them and complex container query length units, I solved a years-long problem of fitting text to the width of a container, hopefully paving the path towards a proper native implementation.
@kizu Brilliant! So, scroll-driven animations not only gift us with, well, scroll-driven animations, but also serve as a “solution” for Scroll-triggered animation and scale-to-fit. Then in a hacky, limited fashion, they can also tackle :snapped and css toggles.
Anything else?
@johannes Well, the things from https://kizu.dev/scroll-driven-animations/#table-ofcontents-with-highlighted-current-sections — :stuck for the sticky headers, scroll shadows — basically a lot of “state queries” like checking if there is a scroll on en element at all, if it is at the start or end of it etc.
Then, I have another article that I was writing when I stumbled over the fit-to-width which have one other interesting use cases.
And some other random ideas I'll need to try from my notes :)
Stuck state for sticky headers? “Proper” solution for scrolling shadows? Highlighting the currently shown sections in a Table of Contents? All these things could become possible with the new scroll-driven animations spec. Today, I gather and explain some of my experiments with this new CSS feature.
@kizu there’s a much simpler way to implement fit to width text using plain css.
it also has wider support across browsers except may be in Safari where it is supported but a little bit corny. 🙏🏻
@kizu That must've been so much fun to figure out! I dig hacks and articles like these (even though my brain is still wondering wtf went on there).
Nice that you put in the warning about optical sizes not working as intended anymore (a sacrifice I would gladly make in exchange for fit-to-width!)
Roma Komarov
Matteo Fogli
Steve Frenzel
Antti Mattila
Manuel Matuzović
Johannes Odland
James Basoo
Ollie Boermans
Elly Loel
Kevin Marks
Gustav Lindqvist
David McCormick
Marvin Danig
catraxx 
Christian "Schepp" Schaefer
Roel Nieskens