Una Kravets
LightNews LightNews
banner
una.im
Una Kravets
@una.im
18K followers 280 following 640 posts
Making the web more stylish ✨🎨 DevRel Lead for CSS & Web UI @ Google Chrome. Cohost of the CSS Podcast & host of Designing in the Browser. 🌎 una.im
Posts Replies Media Videos
una.im
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...
February 5, 2026 at 8:08 PM
una.im
My favorite part of @nerdy.dev's customizable select is the sticky section headers 😍

nerdy.dev/nice-select
February 4, 2026 at 7:04 PM
una.im
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
January 30, 2026 at 7:12 PM
una.im
You know that annoying experience on mobile websites where you need to find the little close button and can't swipe a menu closed?

The solution is simpler than you think.

With basic CSS scroll APIs, you can get built-in interruptible swipe gestures 🥳
January 16, 2026 at 5:56 PM
una.im
I've also been looking at the intersection of scroll animations with scroll-state(scrolled)—another feature I'm stoked about 🙂

(working on a blog post)

With no JS, you can detect scroll direction! Combined w/scroll-driven/triggered animations = more natural control of element-viewport interactions
December 12, 2025 at 4:35 PM
una.im
I got nerd-sniped by @bram.us and wanted to try it out so I built this shape morphing demo to show how you can apply multiple animations to the same element over with different triggers.

PRETTY COOL IMO!

Link (needs Canary + experimental-web-platform-features flag): codepen.io/una/pen/ZYWP...
December 12, 2025 at 4:34 PM
una.im
Festive little office touches 🥰🎄
Santa hat on “this is fine” dog Punch needle coasters of a mit and hat. Festive glass cup with candy canes and trees Ribbon on my microphone
December 8, 2025 at 4:12 PM
una.im
Oooh that’s why my back hurts
Listening age: 68 for Spotify wrapped
December 4, 2025 at 4:36 PM
una.im
🚨 PSA: CSS Anchor positioning

Translation on anchor elements is now respected by positioned elements in Chrome 144+

I know this was quite frustrating if you ran into it!

chromestatus.com/feature/5201...
December 1, 2025 at 5:03 PM
una.im
More #CSSPodcast episodes are live!

We've made it to episode 99 🤯

pod.link/thecsspodcas...
November 18, 2025 at 6:02 PM
una.im
The joy of CSS is that it doesn't error your application out, it just ignores the unsupported line.
November 17, 2025 at 9:51 PM
una.im
*whispers* corner-shape 🤫👂

🟢 round
🪏 scoop
📐 bevel
⛏️ notch
⬛️ square
🐿️ squircle
🦹🏻‍♀️ superellipse

*Pass it on*

codepen.io/una/pen/PwNo...
November 17, 2025 at 7:53 PM
una.im
Did you know: you might be able to change the style of the caret in CSS soon?

See caret-shape and caret-animation in action

(there's still some discussion & this is isn't shipped yet, but you can check it out w/the experimental-web-platform-features flag in Chrome 140+)

codepen.io/una/pen/MYKL...
November 10, 2025 at 10:38 PM
una.im
Nice little details in Quiet UI 🥰

quietui.org/docs 💜
inline typography styles toast with counter softer, soft, mid, loud, louder colors
October 21, 2025 at 5:25 PM
una.im
There are 2 new pseudo classes landing for scroll-markers: :target-before and :target-after

:target-current {
background: black;
}

:target-before {
background: lavender;
}

:target-after {
outline: 1px solid gray;
}

Lands in Chrome 142 (stable in 2 weeks)
October 14, 2025 at 5:49 PM
una.im
@nordicjs.com took me back to the good old days of community tech confs infused with art, innovation, and joy.

From arranged dinners (“with 5 new friends”), to the cutest swag, Code in the Dark, laser shows, crafts, games, sauna(!) and all the installations!

You can see the love that was put in 💜
Conf venue Coffee cup Installation Code in the dark
October 3, 2025 at 10:20 PM
una.im
Such a fun talk about web fonts! #nordicjs @nordicjs.com
October 3, 2025 at 3:33 PM
una.im
I knew I’d find the CSS people here 😆

#nordicjs #nordicjsbadges
Badge decorating
October 2, 2025 at 11:49 AM
una.im
Really nice example of CSS functions from @joshwcomeau.com in his Whimsical Animations course (todays the last day to register early access!)

Immediately optimized my radial popover menu with it 🙂

Demo: codepen.io/una/pen/YPwW...
Course: t.co/14NmSUHFs3
My functions post: una.im/5-css-functi...
@ function --polar-coordinate(--angle, --dist) { result: translate( calc(cos(var(--angle)) * var(--dist)), calc(sin(var(--angle)) * var(--dist)) ); }
September 30, 2025 at 9:34 PM
una.im
This is what’s wrong with the mobile web.

- massive “download our app” callout
- header taking up a good amount of real estate
- ANOTHER DOWNLOAD OUR APP BANNER
- fixed ad on the bottom
- huge ads in between copy

😠
September 18, 2025 at 2:58 AM
una.im
How useful is it for you to be able to style select elements?

Is this something you've had to do before?

Would you adopt the native browser API if it shipped cross-browser?
September 17, 2025 at 5:41 PM
una.im
To do this with the (upcoming) interest invoker API, it's 1 line of code:

.parent:has(:interest-source) button {
interest-show-delay: 0s;
}

You have your default delay. Then, you update the interest delay when an element inside of the parent has interest (i.e. hover).

codepen.io/una/pen/LEpw...
September 15, 2025 at 7:01 PM
una.im
afk
Me in Machu Picchu
September 3, 2025 at 12:28 AM
una.im
I’d love to be a low key flower farmer 🥹 just for friends and family. Here’s some of my flowers this year from my garden
Summer bouquet Asters Spring bouquet Snapdragon
August 25, 2025 at 8:23 PM
una.im
Now do LePen because 😅 this is what I spend my adult money on
August 25, 2025 at 7:08 PM