Callie 🏳️‍⚧️

104 Followers
251 Following
111 Posts
I love making the web better. From accessibility to performance, motion and more. Typically hanging out on the bleeding edge. 🌴

📝 Excited to share the interactive guide to CSS container queries.

I wrote about what container queries are, what the problems they solve, and how to use them along with interactive examples and visuals. Happy learning!

https://ishadeed.com/article/css-container-query-guide

An Interactive Guide to CSS Container Queries

Learn how to use CSS container queries today.

Changes to CSS ::backdrop inheritance  |  Blog  |  Chrome for Developers

As of Chrome 122 the `::backdrop` element inherits properties from its originating element.

Chrome for Developers

📝 New post: Handling aspect ratio changes in view transitions.

Lots of tips on customising view transitions, and of course, live demos.

https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/

View transitions: Handling aspect ratio changes

Tips and tricks to get the transition you want

👀🤩 View Transitions excitement!

https://commits.webkit.org/274906@main

[view-transitions] Enable by default · WebKit/WebKit@7d08296

https://bugs.webkit.org/show_bug.cgi?id=269632 rdar://123128491 Reviewed by Anne van Kesteren. There's a bit of work to do still, but we're getting closer to a point where this is testabl...

GitHub

📝 Fresh post:

12 Modern #CSS One-Line Upgrades

Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.

https://moderncss.dev/12-modern-css-one-line-upgrades/

12 Modern CSS One-Line Upgrades | Modern CSS Solutions

Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.

Modern CSS Solutions

Today would have been Molly Holzschlag’s 61st birthday. I want to take a moment to remember her by sharing a bit from a post she made way back in 2012.

https://www.aaron-gustafson.com/notebook/one-world-one-web-one-love/

One World, One Web, One Love :: Aaron Gustafson

Today would have been Molly Holzschlag’s 61st birthday. I want to take a moment to remember her by sharing a bit from a post she made way back in 2012 on the new defunct Pastry Box Project.

I very much like these carousels by Maxwell Barvian, powered by Scroll-Driven Animations 🤩

https://tympanus.net/codrops/2024/01/24/experimental-css-only-carousels-with-scroll-driven-animations/

(Hit the blue demo button to go to the actual demos)

Experimental CSS-Only Carousels with Scroll-Driven Animations | Codrops

Three carousel experiments made with CSS scroll-driven animations, based on Francesco Zagami's designs.

Codrops

Calling all MPA View Transitions experimenters!

Looking for your stance on https://github.com/noamr/view-transitions/blob/activation-exp/navigation-activation-explainer.md

`activationInfo` gives you quick access to the navigation type/to/from on the new page, so that you can alter the VT just before it runs.

Something you need or not?

view-transitions/navigation-activation-explainer.md at activation-exp · noamr/view-transitions

Contribute to noamr/view-transitions development by creating an account on GitHub.

GitHub
New on the blog: LH units are cool https://andy-bell.co.uk/lh-units-are-cool/
LH units are cool - Andy Bell

I’ve seen a few examples of the new(ish) lh unit out in the wild, but what I haven’t seen is examples of what I think is one of the most useful things you can do with them: sizing icons! Historically, I’ve used em, ch and ex units to size icons in contexts like buttons so […]

Andy Bell

📣 Calling all devs that use #ViewTransitions

Along with work that’s being done on MPA support, we’re looking into polishing what currently shipped.

We already identified a few points to improve but I’m most curious to hear where **you** hit a wall / encountered friction …

E.g. animating 20 items in the same way requires 20 almost identical CSS rules. This should be easier to do.

I’ll take a public reply or a DM and will take it from there.

RT = Better View Transitions for everyone 🪄