Penny's Avatar

Penny

@digitaltransient.bsky.social

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

1,303 Followers  |  684 Following  |  164 Posts  |  Joined: 06.06.2023  |  1.9703

Latest posts by digitaltransient.bsky.social on Bluesky

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

05.02.2026 20:08 β€” πŸ‘ 205    πŸ” 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...

27.01.2026 11:12 β€” πŸ‘ 51    πŸ” 18    πŸ’¬ 3    πŸ“Œ 1
Video thumbnail

a powerful #CSS transition technique enters the ring:

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

23.01.2026 17:53 β€” πŸ‘ 85    πŸ” 8    πŸ’¬ 5    πŸ“Œ 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

14.12.2025 14:56 β€” πŸ‘ 3853    πŸ” 400    πŸ’¬ 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!"

10.12.2025 00:31 β€” πŸ‘ 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. ❀️

10.12.2025 00:20 β€” πŸ‘ 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...

09.12.2025 16:45 β€” πŸ‘ 16    πŸ” 2    πŸ’¬ 0    πŸ“Œ 0

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?

05.12.2025 14:14 β€” πŸ‘ 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

03.12.2025 14:45 β€” πŸ‘ 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.

03.12.2025 16:51 β€” πŸ‘ 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.

29.11.2025 00:44 β€” πŸ‘ 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...

27.11.2025 16:51 β€” πŸ‘ 42    πŸ” 6    πŸ’¬ 1    πŸ“Œ 0

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

25.11.2025 00:29 β€” πŸ‘ 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

...

25.11.2025 00:19 β€” πŸ‘ 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-...

12.11.2025 22:55 β€” πŸ‘ 52    πŸ” 16    πŸ’¬ 3    πŸ“Œ 1

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?

13.11.2025 01:20 β€” πŸ‘ 43    πŸ” 8    πŸ’¬ 14    πŸ“Œ 0
Video thumbnail

Good morning and happy Sunday 🐴 πŸ₯°

09.11.2025 13:18 β€” πŸ‘ 10100    πŸ” 1380    πŸ’¬ 268    πŸ“Œ 134
Selfie looking out over Kobe

Selfie looking out over Kobe

TPAC 2025!

Say hello if you see me there.

10.11.2025 00:48 β€” πŸ‘ 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!

05.11.2025 00:22 β€” πŸ‘ 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.

04.11.2025 00:26 β€” πŸ‘ 3    πŸ” 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

03.11.2025 15:45 β€” πŸ‘ 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?

03.11.2025 19:43 β€” πŸ‘ 35    πŸ” 9    πŸ’¬ 17    πŸ“Œ 0

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)

21.10.2025 18:48 β€” πŸ‘ 21    πŸ” 1    πŸ’¬ 0    πŸ“Œ 0
Brecht on stage showing some of the demos.

Brecht on stage showing some of the demos.

At #fronteers #DarkMode, @utilitybend.com proposed the <rangegroup> HTML Element.

It unlocks the multi-handle range slider, a pattern you might have already seen when picking a price-range.

Feedback Form (with links to the explainer and demos): docs.google.com/forms/u/0/d/...

03.10.2025 16:24 β€” πŸ‘ 42    πŸ” 7    πŸ’¬ 2    πŸ“Œ 0
Video thumbnail

Talk about making an entrance!! 🍰✨ @una.im

03.10.2025 08:16 β€” πŸ‘ 17    πŸ” 2    πŸ’¬ 1    πŸ“Œ 2
Preview
Web Unleashed 2025 // October 21-22 // Toronto & Online The ultimate conference for front-end dev experts

I’ll be speaking in Toronto in a couple of weeks! It’ll be on animation design, and some of the cool things we can do to make our websites/webapps more whimsical. ✨

fitc.ca/event/webu25...

02.10.2025 18:43 β€” πŸ‘ 34    πŸ” 2    πŸ’¬ 3    πŸ“Œ 0
Preview
This Month in Ladybird: September 2025 September wrapped up with 207 merged PRs from 40 contributors. Let’s take a look at some highlights: Welcoming new sponsors Ladybird is entirely funded by...

🀩 View Transitions excitement! Goooooo Ladybird!

> This month, a lot of the underlying machinery for this has been implemented. It's going to take a bit longer before it's usable, but it's a good start to an exciting new web feature.

buttondown.com/ladybird/arc...

02.10.2025 18:44 β€” πŸ‘ 16    πŸ” 5    πŸ’¬ 0    πŸ“Œ 0

It's a smile graph!

01.10.2025 22:31 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
Make accessible carousels Β |Β  Blog Β |Β  Chrome for Developers How the features in CSS Overflow 5 can help you create more accessible carousel patterns.

Accessible CSS carousels are here!

Our new post, co-authored with @flackr.bsky.social and Lucas Radaelli (x.com/lucasradaelli), walks you through building them with the new APIs.

The APIs are Interop 2026 proposals, soon on their way to all browsers. 🀞

developer.chrome.com/blog/accessi...

01.10.2025 16:52 β€” πŸ‘ 8    πŸ” 2    πŸ’¬ 1    πŸ“Œ 0

@digitaltransient is following 20 prominent accounts