Polyfilling CSS with CSS Parser Extensions

In April I attended #BlinkOn, the conference for web platform contributors in the Chromium open source project. At the conference I gave a presentation about “CSS Parser Extensions”, a wild idea I have to fix CSS polyfilling once and for all.

If you didn’t know, polyfilling CSS features is extremely hard, mainly because the CSS Parser discards what it does not understand. So what if, instead of having authors write their own parser and cascade to polyfill a CSS feature, they could teach the parser some new tricks?

Read Post →

View Transitions Applied: Smoothly animating a border-radius with a View Transition

To smoothly animate things like borders as part of a View Transition, you need to duplicate that animation onto the ::view-transition-group. For best effect, have the View Transition separately capture the background and foreground of the element you’re animating.

Read Post →

View Transitions Applied: Dealing with the Snapshot Containing Block

Beware when manipulating the coordinates of the View Transition’s ::view-transition-group(*) pseudo. Depending on where you read those coordinates from, you might end up with layout jumps when writing them back. This post details the pitfalls and how to deal with them, unlocking more performant animations on the ::view-transition-group() pseudo along the way.

Read Post →