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

It looks like style() container queries are enabled in @firefoxnightly.bsky.social - this is one of the features I'm looking forward to most. Especially with range queries starting to roll out. @ container style(--progress > 80%) { background: green; } bugzilla.mozilla.org/show_bug.cgi...

My favorite part of @nerdy.dev's customizable select is the sticky section headers 😍 nerdy.dev/nice-select

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

One more custom <select> demo, with a bunch of CSS transforms and animations. I can't get enough of this. So cool.

The CSSWG just resolved to add this to the spec 🥳 github.com/w3c/csswg-dr...

Soft skills and taste are more important than ever in this new era of software development.

Neat feature! Could have used this for CSS Wrapped developer.chrome.com/blog/multico...

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 🥳

Introducing the <geolocation> HTML element developer.chrome.com/blog/geoloca... Wave goodbye to more tedious JS boilerplate code. As far as I'm concerned, UI stuff should all be declarative. Save JS for business logic (or React, if you're showcasing your new loading spinner designs).

First thing I did today was update my Firefox and hit reload on a new SECRET project I built over the break. It uses anchor positioning and a popover for a little context menu, now it works in Firefox, Chrome, Safari 😁 You don’t need JS to build performant, smooth interactions. It’s easier too!

Adding customized styles to the select element just got way easier → goo.gle/45sPlFC Join @una.im and @bram.us on The CSS Podcast discuss the new customizable select and how it solves common dropdown frustrations.

Firefox 147 just landed & it's pretty huge in terms of web features: 🎉 CSS anchor positioning 🎉 The navigation API 🎉 View transition types 🎉 Brotli support in Compression/DecompressionStream 🎉 CSS module imports And more! https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147

📢 New blog post: A polyfill for the HTML switch element. Safari 17.4 added the native `<input type="checkbox" switch>` element. This post introduces a polyfill for it, covering accessibility, internationalization, styling, and its HTML spec status. blog.tomayac.com/2026/01/12/a...

Learn all about invoker commands on The CSS Podcast → goo.gle/4j07GQ3 @bram.us and @una.im explore how command and commandfor attributes declaratively open dialogs and show popovers, cover standard and custom commands, and dive into "interest invokers."

My annual year in review: 2025 edition una.im/2025-in-review

Nothing like that new year, fresh inbox feeling

My biggest productivity life hack is: writing things down

Man, I love that view transitions make things like this possible with only a few lines of code. 🥰

Directional CSS with scroll-state(scrolled). @una.im shows how the new scroll-state() container query landing in Chrome 144 will let CSS respond to scroll direction for dynamic UI effects, all without JS. #css #scroll una.im/scroll-state...

Do you remember when the entire internet could fit under 14 categories?

Landing next month in Chrome 144: scroll-state(scrolled) This new scroll query value lets you style your UI based on the most recent scroll direction. This means you can change animation-direction based on last scroll & implement directional UI like "hidey-bars" Learn more: una.im/scroll-state...

What are your biggest complaints about using the web right now?

How to use #CSS to fix the irradiation illusion / How to adjust perceived font weight in dark mode without layout shift nerdy.dev/adjust-perce...

Safari 26.2 (a selection): - command invokers - field-sizing: content - sibling-index() & sibling-count() - anchor improvements like position-try-fallbacks affecting psuedos - oklab default in color-mix() - scrollbar-color webkit.org/blog/17640/w...

Scroll-triggered animations are coming to Chrome early next year (we've been really excited about this one!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range. Learn more ⬇️

Wow! Really fun, creative use of scroll-state queries, style queries, and scroll-driven animations from Lee Meyer css-tricks.com/scrollytelli...

🚀 CSS Wrapped is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. It’s no longer just about styling documents, but about crafting dynamic, ergonomic, and robust applications. www.smashingmagazine.com/2025/12/stat...

🎉 CSS Wrapped 2025 is here! Once again, it has been an AMAZING year for CSS and UI. Go check out chrome.dev/css-wrapped-... to see all CSS/UI features Chrome shipped this year. Each features comes with a small explanation and demo for you to play with.

If you haven’t been keeping up with web platform features, this is a good resource to get you all caught up for the year!

🎉 And we're live! 🎉 We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀 This is a big one! We highlighted 22 new features to help you build better on the web. Check out: chrome.dev/css-wrapped-2025

Festive little office touches 🥰🎄

My official job title will henceforth be: <style> icon

Test it out and let us know if it solves your needs! Use the experimental-web-platform-features flag in Chrome 142+ Open questions: - Should the last line of a paragraph be scaled? - Is the current line-height behavior as expected? - Should it scale non-text parts such as inline images together?

Oooh that’s why my back hurts

About to have CSS ANCHOR POSITIONING FULLY CROSS-BROWSER!!

🎙️ The CSS Podcast is back with a new episode on anchor positioning → goo.gle/3XwW4dk @una.im and @bram.us discuss how this powerful new API revolutionizes placing UI elements like tooltips and popovers, all without complex JavaScript.

We have Custom Elements, but do we also need Custom Attributes? This was discussed at TPAC. Is it something you'd like on the platform? https://github.com/WICG/webcomponents/issues/1029

Converge 2025 talks are now available on demand! 👇 We may be biased, but these are some of our best yet. Whether you missed the conference or want to relive the highlights, you can now watch every talk. 💫 🎥 Watch now: hubs.li/Q03Wp53h0

You can now easily customize find-in-page with the new ::search-text pseudo-element, that is shipping in Chromium 144.0.7547. 🚀 Find more details on the blog post by Stephen Chenney: blogs.igalia.com/schenney/fin... Thanks to Bloomberg for sponsoring this work.

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

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

Your favorite API for smooth page transitions just got even better. In the latest CSS Podcast episode, @una.im and @bram.us deep dive into what's new with View Transitions, covering all the latest additions and changes → goo.gle/481cuAN

Woah. I've been exploring using AI to convert blog posts into a podcast format to listen to them, and this week, one of the AI cohosts is named Una 😵😆 I wasn't expecting that lol

More #CSSPodcast episodes are live! We've made it to episode 99 🤯 pod.link/thecsspodcas...

`corner-shape: squircle;` is a very easy progressive enhancement if you want squircles with rounded corners as a fallback (the default today in unsupported browsers)

*whispers* corner-shape 🤫👂 🟢 round 🪏 scoop 📐 bevel ⛏️ notch ⬛️ square 🐿️ squircle 🦹🏻‍♀️ superellipse *Pass it on* codepen.io/una/pen/PwNo...

This is a big deal!

Good news! Range syntax for style queries and if() functions has shipped in Chrome! Check it out: una.im/range-style-...

Good news! Range syntax for style queries and if() functions has shipped in Chrome! Check it out: una.im/range-style-...