Una Kravets
@una.im
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
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
(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
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
(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
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...
PRETTY COOL IMO!
Link (needs Canary + experimental-web-platform-features flag): codepen.io/una/pen/ZYWP...
December 12, 2025 at 4:34 PM
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...
PRETTY COOL IMO!
Link (needs Canary + experimental-web-platform-features flag): codepen.io/una/pen/ZYWP...
Festive little office touches 🥰🎄
December 8, 2025 at 4:12 PM
Festive little office touches 🥰🎄
Oooh that’s why my back hurts
December 4, 2025 at 4:36 PM
Oooh that’s why my back hurts
🚨 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...
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
🚨 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...
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...
November 18, 2025 at 6:02 PM
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
The joy of CSS is that it doesn't error your application out, it just ignores the unsupported line.
*whispers* corner-shape 🤫👂
🟢 round
scoop
📐 bevel
⛏️ notch
⬛️ square
🐿️ squircle
🦹🏻♀️ superellipse
*Pass it on*
codepen.io/una/pen/PwNo...
🟢 round
scoop
📐 bevel
⛏️ notch
⬛️ square
🐿️ squircle
🦹🏻♀️ superellipse
*Pass it on*
codepen.io/una/pen/PwNo...
November 17, 2025 at 7:53 PM
*whispers* corner-shape 🤫👂
🟢 round
scoop
📐 bevel
⛏️ notch
⬛️ square
🐿️ squircle
🦹🏻♀️ superellipse
*Pass it on*
codepen.io/una/pen/PwNo...
🟢 round
scoop
📐 bevel
⛏️ notch
⬛️ square
🐿️ squircle
🦹🏻♀️ superellipse
*Pass it on*
codepen.io/una/pen/PwNo...
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...
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
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...
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...
October 21, 2025 at 5:25 PM
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)
: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
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)
:target-current {
background: black;
}
:target-before {
background: lavender;
}
:target-after {
outline: 1px solid gray;
}
Lands in Chrome 142 (stable in 2 weeks)
@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 💜
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 💜
October 3, 2025 at 10:20 PM
@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 💜
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 💜
Such a fun talk about web fonts! #nordicjs @nordicjs.com
October 3, 2025 at 3:33 PM
Such a fun talk about web fonts! #nordicjs @nordicjs.com
October 2, 2025 at 11:49 AM
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...
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...
September 30, 2025 at 9:34 PM
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...
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...
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
😠
- 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
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
😠
- 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
😠
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?
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
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?
Is this something you've had to do before?
Would you adopt the native browser API if it shipped cross-browser?
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...
.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
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...
.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...
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
August 25, 2025 at 8:23 PM
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
Now do LePen because 😅 this is what I spend my adult money on
August 25, 2025 at 7:08 PM
Now do LePen because 😅 this is what I spend my adult money on
Create a larger, invisible hit area around the element, making it easier to click without layout shift!
How? Use a pseudo element with `position: absolute` + `inset: -{value}px`
Demo to play with: codepen.io/una/pen/gbaWdmy
(Tip from dmytro on X, who I can't find on Bsky: x.com/pqoqubbw/sta...)
How? Use a pseudo element with `position: absolute` + `inset: -{value}px`
Demo to play with: codepen.io/una/pen/gbaWdmy
(Tip from dmytro on X, who I can't find on Bsky: x.com/pqoqubbw/sta...)
August 5, 2025 at 2:56 PM
Create a larger, invisible hit area around the element, making it easier to click without layout shift!
How? Use a pseudo element with `position: absolute` + `inset: -{value}px`
Demo to play with: codepen.io/una/pen/gbaWdmy
(Tip from dmytro on X, who I can't find on Bsky: x.com/pqoqubbw/sta...)
How? Use a pseudo element with `position: absolute` + `inset: -{value}px`
Demo to play with: codepen.io/una/pen/gbaWdmy
(Tip from dmytro on X, who I can't find on Bsky: x.com/pqoqubbw/sta...)
Got a little wig for my microphone 🥰
July 15, 2025 at 8:37 PM
Got a little wig for my microphone 🥰
Feeling lucky i got to see @kelseyhightower.com give a keynote. Phenomenal speaker and human!
Writing is thinking—train your own model. #RenderATL
Writing is thinking—train your own model. #RenderATL
June 12, 2025 at 3:57 PM
Feeling lucky i got to see @kelseyhightower.com give a keynote. Phenomenal speaker and human!
Writing is thinking—train your own model. #RenderATL
Writing is thinking—train your own model. #RenderATL
Conference branded room keys?! I’m sorry WHAT?!
Can’t say I’ve ever seen this before. The attention to detail is wild.
Also: I’M HERE @renderatl.com #RenderATl
Can’t say I’ve ever seen this before. The attention to detail is wild.
Also: I’M HERE @renderatl.com #RenderATl
June 11, 2025 at 7:02 PM
Conference branded room keys?! I’m sorry WHAT?!
Can’t say I’ve ever seen this before. The attention to detail is wild.
Also: I’M HERE @renderatl.com #RenderATl
Can’t say I’ve ever seen this before. The attention to detail is wild.
Also: I’M HERE @renderatl.com #RenderATl