This week marks the final sprint towards Google I/O next week … I’m very much looking forward to my talk “What’s new in Web UI” together with @una.im. io.google/2026/explore... Lots of tweaking and rehearsing, but we’re getting there :) (Yes, the talk is getting recorded) #GoogleIO #ChromeDevRel

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 codepen.io/una/full/ogz... *(just let me have my Mom joke)

✨ I just published a brand-new blog post! It digs into one of my favourite modern CSS features, the Animation Timeline API. We explore how to create rich scroll-driven animations without JS. I share the little gotchas to watch out for + some of the more advanced things you can do with this API. 😄

Blink: Intent to Ship: CSS Gap Decorations

7 years at Google today!? Wow time flies. So much has changed but I'm still grateful to be doing meaningful work on a product that impacts billions of users with an awesome team 💙 This much hasn't changed 😊

If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain: the reality was that only one of both would stick. A recent change to CSS fixes this: `position: sticky` now plays nice with _single-axis scrollers_.

Real DOM content in a canvas: fully searchable, translatable, inspectable. You can have forms, add WebGL effects & much more. Imagine if this was a customizable select 🤯 A little WIP exploration (not finished) for a very exciting API. github.com/WICG/html-in...

Wowowow epic talk by @kubekhrm.bsky.social about building liquid glass with SVG and CSS #ReactParis Check out his post about it! kube.io/blog/liquid-... And a library coming soon 🎉

Super excited to kick off #ReactParis tomorrow! We're going to have some fun @bejs.bsky.social! react.paris#schedule

Curious about custom <select>? I wrote about some of my recent demos over at @css-tricks.com! Take a look ✨ css-tricks.com/abusing-cust...

While contrast-color() only returns black or white, there are workarounds! Register a custom property & you can use style queries for full color palette customization (test the contrast yourself!) You can also use the contrast value inside color-mix() to make a color tint. una.im/advanced-con...

Tomorrow I'll show you some contrast-color() hacks for better control over your color palette selection

contrast-color() is landing in Chrome 147, making it Baseline Newly Available in all modern browsers It takes any color value and returns either black or white: whichever provides the highest contrast against the input Works great with generated colors, state changes, etc. una.im/contrast-color

It seems we can now customize the select element, right? right?! Demo: codepen.io/t_afif/pen/P... via @codepen.io

Open UI has been working on speccing out the focusgroup attribute: a declarative way to support roving focus & add keyboard nav to composite widgets like toolbars/menus We'd love your feedback! Learn more & see open questions: developer.chrome.com/blog/focusgr... H/t to Edge folks for prototyping

Chrome is moving to a 2-week release schedule! (previously 4 weeks) developer.chrome.com/blog/chrome-...

Officially shipping in Chrome 147 🎉

I've been experimenting with an upcoming CSS feature called border-shape lately. It's really cool what you can do with it: lots of practical applications + it opens a lot of doors for non-rectangular UIs! Try it in Canary w/experimental web platform features on, & read more: una.im/border-shape

I've been experimenting with an upcoming CSS feature called border-shape lately. It's really cool what you can do with it: lots of practical applications + it opens a lot of doors for non-rectangular UIs! Try it in Canary w/experimental web platform features on, & read more: una.im/border-shape

Today we announce the following speakers: - @patrickbrosset.com (Microsoft) - @una.im (Google) - and @nerdy.dev (CSS) See our full line-up at cssday.nl

Element-Scoped View Transitions are gonna be **SO GOOD** There’s still some details to settle, but the main thing is there: run VTs on a subtree of the DOM, allowing parallel VTs. And with `view-transition-scope` you can limit the scope of `view-transition-name` values, allowing VTs to be nested.

#Interop2026 is here! Lots of new CSS coming your way: - style queries - anchor positioning improvements (already crossbrowser) - advanced attr() - popover & dialog improvements like lightdismiss - scroll-driven animations - better scroll-snap capabilities wpt.fyi/interop-2026

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