Advertisement · 728 × 90

Posts by Penny

It’s shocking how the motivation behind almost every single bad tech bill is about hating LGBTQ people and specifically trans people

3 weeks ago 3105 603 29 16

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

4 weeks ago 12 2 1 0
Video

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).

1 month ago 46 5 5 4

Dear God, what have we done? Maybe adding this was a mistake?

But seriously clever (mis)use of this! And surprisingly little code!

1 month ago 31 1 0 0
Preview
Make custom elements behave with scoped registries  |  Blog  |  Chrome for Developers You can now encapsulate custom elements.

🎉 I'm so excited that scoped custom element registries is landing in Chrome and Edge! 🥳

This solves one of the biggest complaints with the web components APIs: the global tag name namespace.

Standards is a long game though: I first proposed this in 2017! 😲

developer.chrome.com/blog/scoped-...

1 month ago 59 15 3 0

Hell yeah, brother

1 month ago 5186 1119 27 40
Video

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.

2 months ago 226 37 5 2
Advertisement

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...

2 months ago 207 31 9 6
Try text scaling support in Chrome Canary - Josh Tumath

Excitingly, Chrome Canary recently added support for <meta name="text-scaling"> behind a flag.

What is it? It's something that we're all going to start using on our websites to improve accessibility. Here's a blog post with more info. www.joshtumath.uk/posts/2026-0...

2 months ago 51 18 3 1
Video

a powerful #CSS transition technique enters the ring:

Anchor Interpolated Morphing (AIM)
nerdy.dev/anchor-inter...

2 months ago 87 8 6 0
Post image

Any Port in a Storm

When the storm is so full on that a mere 6 seconds is bordering on over-exposing the image!
So bright. Soooo bright.

-
#Twizel, #NewZealand.
-
"Look with your eyes. See with your Soul."

#Aurora #Night #Stunday #Scape #EastCoastKin #Landscape #Nightscape #Bucketlist #Travel

4 months ago 3833 399 49 10

This is one way to trivially spot discrimination. Racism, antisemitism, transphobia, etc. the belief systems universally require a cognitive dissonance of simultaneously believing "they're terrifying and superhuman, they must be stopped!" and "these are subhumans, they must be stopped!"

4 months ago 1 0 0 0

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. ❤️

4 months ago 7 1 0 0
Preview
Scrollytelling on Steroids With Scroll-State Queries | CSS-Tricks Unconvinced of the value of scrollytelling? Alright, skeptic, let’s first warm up with some common use cases for scroll-based styling.

Wow! Really fun, creative use of scroll-state queries, style queries, and scroll-driven animations from Lee Meyer

css-tricks.com/scrollytelli...

4 months ago 16 2 0 0
Advertisement

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?

4 months ago 9 2 3 0
SPY stream presents core-web-vital summit Wednesday December 3. image of eight avatars of tech professionals.

SPY stream presents core-web-vital summit Wednesday December 3. image of eight avatars of tech professionals.

✨ Core Web Vitals Summit ✨ stream is today in just over 1hr, @ 11am, virtual doors will likely open a few minutes before. Join us! Hang out. Come hear from web performance and ux professionals.
📆 TODAY, Wed Dec 3rd
⏰ 11a EST, 5p CET
🔗 bit.ly/cwv-summit

4 months ago 5 1 0 1

A stochastic terror campaign against anyone who is trans or gender nonconforming.

We wake up with this fear, and we go to bed with this fear. And it weighs on us every minute of our lives. Exactly as intended.

And most institutions not only don't protect us, they protect the aggressors.

4 months ago 1 1 0 0
Pixel, a calico rescue cat, reveals her busy agenda.

Pixel, a calico rescue cat, reveals her busy agenda.

Screenshot of a calendar app. 

The secret to staying so beautiful when one is so busy? Lots of nap time and grooming.

Screenshot of a calendar app. The secret to staying so beautiful when one is so busy? Lots of nap time and grooming.

Master scheduler.

4 months ago 3 1 0 0
Preview
CSS subgrid  |  Articles  |  web.dev Subgrid enables grid shareability, allowing nested grids to align to ancestors and siblings.

love seeing all the #CSS subgrid excitement in my timeline!! def @joshwcomeau.com inspired 🤘🏻

now that your subgrid interest is piqued, checkout a post I made too‽ maybe even just for the long list of resource examples at the end

web.dev/articles/css...

4 months ago 42 6 1 0

Tell me this nitwit got ratio'd on this. (I'm not on the BadSite).

4 months ago 2 0 0 0
Pixel, a calico rescue cat, is done waiting for love. 

Love. Now. Human.

Pixel, a calico rescue cat, is done waiting for love. Love. Now. Human.

Trying to finish my work day be like

...

4 months ago 9 2 0 0
Preview
una.im | Range Syntax for Style Queries Learn how to use the new range syntax for CSS style queries and the if() function.

Good news!

Range syntax for style queries and if() functions has shipped in Chrome!

Check it out:

una.im/range-style-...

5 months ago 52 16 3 1
Advertisement

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?

5 months ago 44 8 14 0
Video

Good morning and happy Sunday 🐴 🥰

5 months ago 10069 1376 268 134
Selfie looking out over Kobe

Selfie looking out over Kobe

TPAC 2025!

Say hello if you see me there.

5 months ago 4 0 0 0
Courtesy flushing Calico cat

Courtesy flushing Calico cat

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!

5 months ago 6 2 0 1

We're working on fit-text-width and container shrink-to-fit proposals separately to meet these use cases. I think these are common cases, but don't solve all the use cases for wrapping detection.

5 months ago 2 0 0 0
State of JavaScript

✨ It’s that time of year! The State of JavaScript 2025 survey is currently running. 😄

I take the survey every year. It’s a great way to keep up with all of the new features and APIs that have come to browsers in the past year.

stateofjs.com/en-US

5 months ago 34 10 1 0

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?

5 months ago 34 9 15 1