Una Kravets

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

18.9K followers281 following769 posts

Mesh gradients!!! This is something I’ve personally wanted in CSS since I started giving talks on mixing layered gradients with blend modes in 2016

Josh Tumath@joshtumath.uk

After the CSSWG resolved to explore mesh gradients, the chair also made me an editor of the CSS Images 5 spec. 😱 FYI, I have absolutely no idea what I'm doing, but thankfully I have help from some very clever people. Sadly I will have to spec what happens if someone makes a mesh gradient like this:

Had one of those intensely vivid pregnancy dreams but it was about responsive UI patterns for supportive context… (weirdo) Might write a blog post. Might have a baby. Which will come first? 🫣

Una Kravets reposted

Big news! For the past 9 months I’ve been running a fully-autonomous local agent for a pretty complex body building project. And I’m almost ready to deploy (any day now 🙂)! Wish me luck for the launch 🙏

Una Kravets reposted

I've been using React's <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗> throughout my Next.js SPA series to make the demos smoother and more alive. Here are the patterns I use most: 1. Suspense reveals 2. Morphing content into place 3. Page transitions See each pattern, plus the guide and Skill ↓

Una Kravets reposted

Finally 😁 Throwing Confetti with CSS Random | Throwing some confetti while exploring the CSS random() function through its specification and its current implementations, finding both the beauty and the pitfalls along the way. | schalkneethling.com/posts/throwi...

schalkneethling.comThrowing Confetti with CSS RandomThrowing some confetti while exploring the CSS random() function through its specification and its current implementations, finding both the beauty and the pitfalls along the way.

Una Kravets reposted

One of the things that we at Chrome have been thinking about is a way to do declarative route and navigation matching **in CSS**. Together with @nomster.bsky.social and @dbaron.org I’ve been working on it for the past few months, and next week we’ll be presenting our work at the CSSWG F2F meeting.

Did I mention that `flex-wrap: balance` landed in Chrome stable last month!? 👀👀👀

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

Una Kravets reposted

Hi! I'm working on a new HTML feature: filterable select There are two proposed API shapes so far: 1. Nesting <input> in <select> 2. Sibling <input> for listbox <select> w/id ref Option 1 is more ergonomic, but would break selects in older browsers Thoughts? (Both currently in Canary w/flag)

I literally had this blog post in my drafts since March 😆 But then I was waiting for browser support and then event season happened. HERE IT IS THOUGH. As promised at #CSSDay

With style queries now in all browsers, here's my take on the best way to do dynamic color theming with modern CSS: - Custom properties - light-dark() - contrast-color() - Style queries - Relative color syntax (^Features available in all modern browsers) Read about it ⬇️⬇️ una.im/modern-css-t...

Una Kravets reposted

As @una.im just mentioned in her #cssday talk, the CSS WG recently resolved to insert a ⓘ after EVERY SINGLE INTEREST INVOKER on touchscreens. Here’s a mock of what this would look like for bsky. This is the issue to let the CSS WG know what you think: github.com/w3c/csswg-dr...

Filterable select is coming, and it’s going to be a game changer 🎉

Brecht De Ruyte@utilitybend.com

On the side at #CSSday I've been tinkering with the filterable select. It's still in very early stages in Chrome Canary, but I can't help being a little bit excited. @jakearchibald.com gave a talk yesterday on how the customizable select came to life. It's amazing how many doors are being opened.

Una Kravets reposted

This has been a common theme today at #cssday and it’s true: complaining about broken stuff in browsers is a great way to get them fixed! Don’t silent. Let us know. Have a new idea: write a blog post!

Kevin Babbitt@kevinbcmu.bsky.social

This is now fixed, thank you @osamdavis.bsky.social! crrev.com/c/7902436

Truly blessed that I can always ping @bram.us when I can’t figure out why a view transition isn’t working 😆 Such a great talk! Love the explode view slides (not pictured) #cssday

Anchor pos & interest invokers are awesome! The "taller" tooltips don't fit in the viewport below the link so the position flips. All w/a few lines of CSS, a couple of HTML attributes, and it's a progressive enhancement so the existing experience doesn't change. (still working on the animations)

Wowow @rebane2001.bsky.social is blowing everyone’s minds at #cssday 🤯 Obsessed with her and this talk! Next time someone tells me CSS isn’t a programming language I’m going to send them the video from this talk 😆 Check out lyra.horse for more goodies

We’re ready for #CSSDay! Come hang with the Chrome crew upstairs! We’ve got keychains, stickers, and some good sessions planned downstairs too 🎉

Had a blast #FutureFrontend! And tomorrow I’m headed to Amsterdam for #CSSDay 🎉🎉 Will I see you there? 👀

Una Kravets reposted

CSS position: sticky now sticks to the nearest scroller on a per axis basis! | If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain. You’d think a simple position: sticky with top: 0 and ... | www.bram.us/2026/03/30/c...

bram.usCSS position: sticky now sticks to the nearest scroller on a per axis basis!If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain. You’d think a simple position: sticky with top: 0 and left: 0 would be enough, but the rea...

✅ Nice lil btn scale-down 🙈 Layout change bc the scroll bar disappears 🙈 No light dismiss These UX problems can easily be solved with: - closedby="any" - overscroll-behavior: contain

Wow 🤯

CSS by T. Afif@css-only.dev

What about a straight line that bends when the circles get closer and stretches when they get farther. It's surely not possible using pure CSS, right? Right!? 👀 css-tip.com/bending-line/ Probably my new favorite demo, powered by the modern features. CSS is awesome! 😍

Jamming out to my favorite high school music 🎶 singing all the words out loud 🎶 making some new CSS demos 💻 watching my baby sleep peacefully on the monitor 👶🏻 The dopamine is hitting 💕

I have been eagerly anticipating this! Style queries just landed in Firefox 🎉🎉

Firefox for Web Developers@webdevs.firefox.com

CSS style() queries landed in Firefox 151 making them newly available across engines. Here's how they work:

Una Kravets reposted

So here's an interesting little thing or 2 @nomster.bsky.social , @foolip.org , and myself have been cooking up—along with lots of help from others!: developer.chrome.com/blog/declara... This could lead to some VERY interesting changes in how we write web pages. Would love to hear your thoughts!

developer.chrome.comDeclarative partial updates  |  Blog  |  Chrome for DevelopersLearn about new out-of-order streaming capabilities and the renewed HTML insertion and streaming methods available for testing from Chrome 148

Ooh fun transition

Josh@joshsaintjacque.com

Had so much fun making this. The View Transition API is so powerful. #css #js #rails