Tessera
Folgen

Penny

@digitaltransient.bsky.social

Epic nerd. 🤓 Cat lady. 😽 PM WebUI @Google Chrome Tell me what you need from HTML & CSS! Prev: co-founder @mobify

164 Posts1352 Follower684 Folgt
Bramus@bram.us · 5mo ago

The great thing about Scroll-Driven Animations is that they work with your existing CSS animations. The framework to get started is simple: 1. Take an existing animation 2. Drop the duration 3. Set the animation-timeline to view() or scroll() scroll-driven-animations.style has a free video course

Scroll-driven Animations

A bunch of demos and tools to show off Scroll-driven Animations

scroll-driven-animations.style

Daniel Schwarz@dxnny.fun · 5mo ago

This article was so fun to work on! css-tricks.com/experimentin...

Bramus@bram.us · 5mo ago

So. Anchor Positioning and DevTools … I sat together with The Hype™ tonight and this is what we built in 2 hours. Main takeaway from this experiment is that it still requires a “Subject Matter Expert” (in this case: me) to build this, instructing The Hype™ what to do (and sometimes how to do it).

Bramus@bram.us · 6mo ago

Element-Scoped View Transitions are gonna be **SO GOOD** There’s still some details to settle, but the main thing is there: run VTs on a subtree of the DOM, allowing parallel VTs. And with `view-transition-scope` you can limit the scope of `view-transition-name` values, allowing VTs to be nested.

Una Kravets@una.im · 6mo ago

border-shape can handle both insets and outsets, so you can do effects like this chevron nav (corner-shape can't do both). This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap. Demo: codepen.io/una/pen/ByzY...

Una Kravets@una.im · 6mo ago

Finally solving the tooltip arrow usecase with a new CSS property called border-shape ⚠️ WIP early-stage API, timeline TBD, more info coming soon But it brings a lil tear to my eye to see this working, border & all 🥲 This demo uses anchored container queries + border-shape + a little animation

Penny@digitaltransient.bsky.social · 8mo ago

What an amazing year it's been for CSS! 😅 I'm so proud of the team and all of our collaborators working on other engines for what's been accomplished in 2026. ❤️

Brecht De Ruyte@utilitybend.com · 8mo ago

🚀 CSS Wrapped is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. It’s no longer just about styling documents, but about crafting dynamic, ergonomic, and robust applications. www.smashingmagazine.com/2025/12/stat...

Bramus@bram.us · 8mo ago

There’s a lot of cases where I needed this, so I’m very excited to seeing `random()` come to CSS. While trying it out, however, I found the caching strategy options to be very confusing … so I am proposing to rename some of the keywords: github.com/w3c/csswg-dr... Any Hot Takes™ on this?

[css-values-5] The `<random-value-sharing>` options for `random()` are confusing · Issue #13132 · w3c/csswg-drafts

I took random() for a spin and must say I struggled quite a bit with the <random-value-sharing> options. What we have now As it currently stands, the options are: auto: Each random function in an e...

github.com

Jon Davis@jondavis.bsky.social · 12mo ago

The WebKit team published "Rolling the Dice with CSS random()". CSS random() is a new function to generate random values for CSS properties opening up a huge range of possibilities for procedurally generated layouts. Learn more on the WebKit blog: webkit.org/blog/17285/r...

Lea Verou, PhD@lea.verou.me · 9mo ago

At the CSS WG meeting, we're discussing possibly natively doing fit-text in CSS. Send us your use cases (with screenshots/links)! Do you ever need to fit multi-line text? Do you ever need to fit non-text inline elements (e.g. icons)? Do you adjust font-size, letter-spacing, or both?

Pen-a-Lope 🦌@pennystwocents.bsky.social · 9mo ago

Just witnessed Pixel, having emerged from the cat room after taking a particularly noxious dump, sniff the air dubiously then turn tail and return to her litter box to bury matters further. Thanks for the courtesy flush, Pixel!

Courtesy flushing Calico cat
Una Kravets@una.im · 9mo ago

We often hear that folks want "wrap detection" in CSS (i.e. when a flex item shifts into a position where it wraps over to the next line) What is a real-world example of a use-case you would need this for?

Bramus@bram.us · 10mo ago

I flipped the flag on this one today and it’s now enabled by default. Expect it in tomorrow’s Chrome Canary build. (If you can’t wait to try it out, you can manually flip the flag in today’s Canary/Beta/Dev builds. Go to chrome://flags and look for starting-style)

Bramus@bram.us · 10mo ago

Although it’s not a core task of my role as Chrome DevRel, I took the time to build something that I needed into DevTools: debugging support for CSS `@starting-style` rules. The feature is ready for testing in Chrome Canary.