Volvo Cars moved away CSS-in-JS to … CSS
Category Archives: Elsewhere
CSS Wrapped 2023
Catch the end-of-year writeup I wrote together with my Chrome DevRel colleagues Una and Adam!
LearnWithJason: CSS-Only Scroll-Driven Animations
I was a guest on Jason Lengstorf’s “Learn With Jason” stream. We talked about Scroll-Driven Animations.
Style Recalculation Secrets They Don’t Want You To Know | Patrick Brosset | CSS Day 2023
This talk by Patrick Brosset is one of my favorite talks from this year’s CSS Day Conference. How do browsers actually recalculate styles when webpages change? Can the way you write CSS impact the speed of the recalculation process? In this talk, we’ll go through the details of how browser engines react to DOM changes …
How Blink invalidates styles when :has() in use?
Great post on style invalidation in Blink, written by Byungwoo who implemented :has() in Blink.
Cyclic Dependency Space Toggles
Brilliant work by Roman Komarov. Using the cyclic dependency invalidation and space toggles to select one value from an entire list. Cyclic Dependency Space Toggles →
Syntax: Supper Club × Bramus Van Damme on CSS
CSS Trigonometric Functions land in Chrome 111
Put your CSS calc() hat on because sin(), cos(), tan(), and friends are available in Chrome 111!
Scroll-Linked Animations with ScrollTimeline and ViewTimeline
🚨 UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite. The contents of this video are mostly correct, yet some minor things have changed. Please refer to https://developer.chrome.com/articles/scroll-driven-animations/ for an article and examples that use the latest version of the syntax. In the latest episode of HTTP 203 I share …
Continue reading “Scroll-Linked Animations with ScrollTimeline and ViewTimeline”
CSS Type Grinding: Casting Tokens (sm|md|etc) into Useful Values (aka Style Queries without Style Queries thanks to @property)
My favorite use case for Style Queries is the ability to change a bunch of styles based on the value of a so called “higher-order variable”. You use that variable as a switch to change a bunch of properties. @container style(–theme: dark) { .card { background: royalblue; border-color: navy; color: white; } .card button { …