Una 🇺🇦's banner

Una 🇺🇦

@Una • 88,100 subscribers

Building the web you build on @GoogleChrome ✨🎨 Web Experience DevRel Lead 🦄 @csswg + @openuicg. #CSSPodcast host 🎬 https://t.co/J9Y8U6Bz4f

Shorts

OoooOOooh! Guess what! As of Chrome 149, shape() works in shape-outside! So you can really *shape* your UI's 😉* rect() and xywh() are also supported for shape-outside in Chrome 149 *(just let me have my Mom joke)

OoooOOooh! Guess what! As of Chrome 149, shape() works in shape-outside! So you can really shape your UI's 😉* rect() and xywh() are also supported for shape-outside in Chrome 149 *(just let me have my Mom joke)

42,813 görüntüleme

No-JS hamburger menu w/the popover API: Browser handles: - clicks on hamburger & close btns - esc key to exit - tab nav - spacebar + enter key toggle (open & close) - light dismiss (click away) close How: <btn popovertarget="menu">..</> <div popover role="menu" id="menu">..</>

No-JS hamburger menu w/the popover API: Browser handles: - clicks on hamburger & close btns - esc key to exit - tab nav - spacebar + enter key toggle (open & close) - light dismiss (click away) close How: <btn popovertarget="menu">..</> <div popover role="menu" id="menu">..</>

379,627 görüntüleme

Scroll-triggered animations are coming to Chrome early next year (and we've been really excited about this one for a bit!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range, rather than relying on the scroller completion *as* the animation timeline. I got nerd-sniped 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! Bramus has a post with more info ⬇️

Scroll-triggered animations are coming to Chrome early next year (and we've been really excited about this one for a bit!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range, rather than relying on the scroller completion as the animation timeline. I got nerd-sniped 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! Bramus has a post with more info ⬇️

38,653 görüntüleme

My favorite part of Adam Argyle's customizable select is the sticky section headers 😍

My favorite part of Adam Argyle's customizable select is the sticky section headers 😍

18,240 görüntüleme

now with a visualizer for the inset-modified containing block!

now with a visualizer for the inset-modified containing block!

21,741 görüntüleme

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

Wowowow epic talk by Chris Feijoo about building liquid glass with SVG and CSS #ReactParis He has an entire post about it!

Wowowow epic talk by Chris Feijoo about building liquid glass with SVG and CSS #ReactParis He has an entire post about it!

34,971 görüntüleme • 2 ay önce

👀 An early look at transitioning to and from `display: none` in CSS 👀

👀 An early look at transitioning to and from `display: none` in CSS 👀

269,194 görüntüleme • 3 yıl önce

`text-wrap: balance` in action 🎬

`text-wrap: balance` in action 🎬

227,521 görüntüleme • 3 yıl önce

Introducing 🤯 flex-wrap: balance 🤯 Would you use this? ⚠️ Not a "real" feature yet, just something one of our engineers has been working on. (You can try it out in the latest Chrome Canary with the experimental web platform features flag though!)

Introducing 🤯 flex-wrap: balance 🤯 Would you use this? ⚠️ Not a "real" feature yet, just something one of our engineers has been working on. (You can try it out in the latest Chrome Canary with the experimental web platform features flag though!)

70,932 görüntüleme • 1 yıl önce

While contrast-color() only returns black or white, there are workarounds! If you register a new custom property, you can use style queries for full color palette customization (but make sure to test the contrast yourself!) Another technique is using the contrast-color() value inside of color-mix() to provide a tint variant. This demo shows method 1 where you can get warmer light colors and blue-tinted darks instead of pure black and white. Cons: Firefox doesn't support style queries yet so browser support is limited for now (though it is an Interop 2026 feature!).

While contrast-color() only returns black or white, there are workarounds! If you register a new custom property, you can use style queries for full color palette customization (but make sure to test the contrast yourself!) Another technique is using the contrast-color() value inside of color-mix() to provide a tint variant. This demo shows method 1 where you can get warmer light colors and blue-tinted darks instead of pure black and white. Cons: Firefox doesn't support style queries yet so browser support is limited for now (though it is an Interop 2026 feature!).

12,244 görüntüleme • 2 ay önce

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 🥳

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 🥳

17,386 görüntüleme • 4 ay önce

Giving a much-needed little facelift

Giving a much-needed little facelift

19,103 görüntüleme • 1 yıl önce

You can now play with CSS gap decorators in Chromium 139+! Learn more: Try it out (current Canary w/experimental web platform features flag):

You can now play with CSS gap decorators in Chromium 139+! Learn more: Try it out (current Canary w/experimental web platform features flag):

13,334 görüntüleme • 11 ay önce

Have you heard of scrollbar-color? It's a nice little progressive enhancement for making scrollbars feel more intentional and integrated into your UI.

Have you heard of scrollbar-color? It's a nice little progressive enhancement for making scrollbars feel more intentional and integrated into your UI.

12,637 görüntüleme • 11 ay önce

And here's that Codepen refactored as promised using sibling-index()

And here's that Codepen refactored as promised using sibling-index()

11,064 görüntüleme • 1 yıl önce

Daha fazla içerik yok.