At the end of 2021, CSS-Tricks (RIP) asked a bunch of authors “What is the one thing people can do to make their websites better?”. This here, is my submission for that end-of-year series.
Embrace the Platform
View Transitions and Scroll-Driven Animations (2023.11.16 @ Devine)
Scoped styling with CSS @scope (2023.10.19 @ Full Stack Europe)
Solved by CSS Scroll-Driven Animations: Style an element based on the active Scroll Direction and Scroll Speed
Combine Scroll-Driven Animations with @property, transition-delay, calc(), sign() and abs() … and you can do Scroll Detection using only CSS!
What’s new in CSS? (2023.10.12 @ Frontmania)
The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark()
A function that computes to the first color if the used color scheme is light or unknown, or to the second color if the used color scheme is dark.
LearnWithJason: CSS-Only Scroll-Driven Animations
I was a guest on Jason Lengstorf’s “Learn With Jason” stream. We talked about Scroll-Driven Animations.
Run a Scroll-Driven Animation only once
Animate between states with the View Transition API (2023.09.27 @ devs.gent)
Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not
Leverage Scroll-Driven Animations + a Space Toggle or State Query to selectively style an element based on it being scrollable or not.