Dark Mode Toggle Buttons should be a browser feature. Thanks to the Web Preferences API, that might become a reality someday.
What if you had real control over Light Mode / Dark Mode on a per-site basis?
Category Archives: Original Content
CSS Foundations: What is IACVT?
Syntax Highlighting code snippets with Prism and the Custom Highlight API
Can you Syntax Highlight a code snippet on the web without overloading the DOM with a ton of <span> elements wrapped around the tokens? Thanks to the Custom Highlight API, you can!
Scroll-Driven Animations: You want overflow: clip, not overflow: hidden
If you create a scroll-driven animation and find that scroll(nearest) is not working, check for overflow: hidden elements up the DOM tree and change them to overflow: clip.
How to use a Custom Easing Function with the Web Animations API (WAAPI)
So, you’ve found a custom easing function defined in JavaScript. Great! But how do you use that with the Web Animations API (WAAPI)? Turns out that’s more difficult than you’d first expect it to be.
The mysterious case of using CSS animation-composition: accumulate on a scale transform
Embrace the Platform
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.
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!