💡 CSS Tip! We've just had the release of @developer.chrome.com 147, which means border-shape was enabled by default! 👀 css-tip.com/border-shape/ Another property to create CSS shapes, but not only that! We can do a lot of fancy stuff with it. Many cool demos/articles are on the way 🤩

"Fixed Safari gesture support to prevent pages that should not be able to scroll, such as with explicit overflow: hidden, from unexpectedly scrolling. (163660111)" Sounds like a bug I've spent ages working around, 10 years ago when at Wix... I wonder if it fixes it! webkit.org/blog/17862/w...

I've created a little AI skill called "web archeologist". It helps trace back existing standards to their original discussions & rationale, rummaging through github, browser bug trackers, old W3C mailing lists, IRC logs etc. github.com/noamr/web-ar... Happy for feedback/bugs/improvements!

Let's wobble the web

I'm planning to be there!

Out of context reminder: The "CORS errors" we get when we develop a page that accesses localhost are what prevents random untrusted webpages from making calls to open HTTP ports on our computer.

Firefox is joining the shape() game 🤩 It's a good time for some blobs: css-generators.com/blob/ Or maybe a nice wavy divider: css-generators.com/wavy-divider/ And stay tuned for another generator and more shapes next week! 🤫

border-shape is coming. Enough with the rectangular web!

Blog post: some inner workings of implementing CSS corner-shape in Blink. @developer.chrome.com developer.chrome.com/blog/impleme...

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.

I've created a lot of little example for JS/HTML streaming (aka declarative partial updates). Check it out: wicg.github.io/declarative-... or source: github.com/WICG/declara... (Needs up to date chrome canary with experimental features enabled)

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

Mechanical keyboard meets 3yo

Working on some interesting stuff...

Which of these is circle() square()? (Don't look at current spec, just think of what feels right) Poll: indieweb.social/@nomster/115... or x.com/nomsternom/s...

A little codepen that showcases how we approximate CSS corner-shape using cubic beziers in blink. codepen.io/noamr-the-se... Hopefully @fserb.com will explain to me at some point how he got to this. Gemini could only guess 😆 Full blog post about corner-shape weird stuff when I become less lazy.

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

If I wrote a blog post about the complexity of implementing the rendering bits of CSS corner-shape in blink would that interest anyone? I started and finding it hard to finish...

Is anybody still using xml/HTML polyglots for anything moder (Syntax that is valid in both html and xml) Wondering whether those are something that needs to be considered for future HTML enhancement or a thing of the past...

⚙️ New CSS Generator Create those fancy (random) wavy dividers using the new shape() function! 🤩 css-generators.com/wavy-divider/ Play with the settings and get the code in no time. ✅ One property ✅ Responsive ✅ Works with any element Enjoy!

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

Does this line fetch foo.png or not? new Range().createContextualFragment( '<img src="foo.png">' ); Currently, HTML standard says it doesn't, Chromium/Gecko/WebKit implementations say it does.

🎉 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

We've been working on a few proposals we'd like to bring to the web platform to make it easier to have more seamless navigations between pages. @nomster.bsky.social @foolip.org and @dbaron.org presented these at W3C TPAC annual meeting last week More details here: github.com/WICG/declara... 1/6 🧵

I do understand the appeal of this: const [loading, loading] = useState(false); <div style={backgroundColor: loading ? "yellow" : "green"}> But this, as well as utility classes, means that your scripts are bloated with style concerns.

Have you ever avoided using an a11y feature because of issues involved with IDREFs being global, or encountered bugs due to this? Please let us know! We have a meeting to discuss this next Wednesday (at TPAC) and would love to hear your stories, especially if they impacted users. cc @lea.verou.me

Calling all web developers! Browsers are all meeting up next week (www.w3.org/events/tpac/...). I want your voice to be heard! Tell me your biggest problems, and tell me what you want to see from the platform. What problems are tough to solve, but could be easier?

With all the excitement of (Same-Document) View Transitions (and more VT features) becoming Baseline Newly available (yay! 🎉), one might overlook the inclusion of the moveBefore() method. This method is a pretty big deal as it allows you to move elements around the DOM while preserving their state.

Yay another corner-shape article! Keep them coming! What Can We Actually Do With corner-shape? | CSS-Tricks share.google/sTQD2Jh8vvzE...

corner-shape documentation is now available on mdn! developer.mozilla.org/en-US/docs/W...

If you thought we were done with View Transitions, guess again! A feature Chrome is working on, is “Scoped View Transitions”, which allow you to scope a VT to a subtree of the DOM. This unlocks things like concurrent transitions and prevents layering issues. developer.chrome.com/blog/scoped-...

What if some client-side browsing features were part of the web platform? Direct CSS reflection of URL state, snappy pending/optimistic UI, URL-to-scroll-snap binding, and some basic same-document navigation use cases, with JS being only an option. github.com/WICG/declara... Inviting feedback!

Hi all 👋 We're gearing up for 2026 planning soon (UI capabilities and Interop) Do you work on a UI library or framework? I want to hear from you and your experiences/needs. Message me!

IDs in HTML are designed to be unique, yet from a quick HTTP archive query it seems like an order of magnitude of 45% of HTML responses in July 2025 had duplicates. Perhaps we should embrace that IDs being unique is a lost battle.

We're exploring streaming HTML into an element in github.com/WICG/declara... but you can already emulate it with some JS that feeds a parser of a detached document and moves elements as they appear. cc @nomster.bsky.social

Periodic reminder: a brand new DOM on top of canvas is an idea that floats every so often and would not work. The edge cases already baked into HTML are vast and reproducing all of them in a shiny new thing is futile. We can't go over it, we can't go under it, we've got to go through it.

Can you name a native mobile app that gives you the feeling of "I wouldn't be able to build this on the mobile web" from the UI / UX quality perspective? I am sure there are lots but looking for inspiration of where to look.

Reflecting on the "Extensible web manifesto" from '13 and about the balance between high/low-level web features, and what "prioritize low-level+JS polyfills" means in 2025, especially when mobile is considered. I don't know how to flatten these thoughts to a hot take, so just sharing this for now.

Just found out that some fun Typescript experiment I tinkered with ~7 years ago when at Wix was forked, productized and the fork now gets thousands of weekly npm downloads because it's a dependency of something I wasn't familiar with called "rxdb". I love open source! github.com/wix-incubato...

📝 New CSS Article! Closing this series with a fourth part where I am exploring two more shape() commands. This powerful feature will soon be available in all the browsers so don't miss the opportunity to learn about it and master it!

✨ New article: Understanding CSS corner-shape and the Power of the Superellipse! A deep dive into the new property, and a little dig into the math behind it, with lots of cool examples, but they only work on Chrome 139+. 🔗 Check it out on @frontendmasters.com: frontendmasters.com/blog/underst...

The #Palestinian & #Jewish #Israelis of @standing-together.bsky.social stand determinedly in the growing space between binary positions, building a better future of #Justice, #Equality & #Peace from the grassroots. Learn about the movement at this event in #Brighton on 13.07.25 @ukfost.bsky.social

📝 New CSS Article! Guess who's writing again about CSS shapes? 🫣 This time, I am exploring the corner-shape property. A new tool to easily draw shapes. frontendmasters.com/blog/drawing... ⚠️ No browser support yet but a good opportunity to know about this powerful feature and get ready for it!

💡 CSS Tip! Save this code for the future. It will be the easiest way to create hexagon shapes and ... 🥁🥁🥁 ... it works with border! 🤩 css-tip.com/hexagon/ The magic? The new corner-shape property!

Blink: Intent to Ship: CSS Corner shaping (corner-shape, superellipse, squircle)

The CSS shape() function's arc and curve commands might produce similar looking results at first glance, but they're quite different and there's a big "it depends" when you use one or the other. @css-only.dev with a great explanation and examples, as always… css-tricks.com/better-css-s...

📝 New CSS Article! The fun continues using shape()! For this second part, we are drawing more CSS shapes while exploring the arc command. It's a very tricky command if you don't fully understand it. 👇

Move Modal in on a… shape() Got an old "modal" design? Now might be the time to upgrade it to a , as we can do both open & close animations now.

There's a lot to unpack with the Long Animation Frames (LoAF) API! This excellent guide from @andydavies.me includes: 🎞️ Why animation frame rate matters for #webperf & #ux 🎞️ Anatomy of a LoAF 🎞️ How to get started! www.speedcurve.com/blog/guide-l... #corewebvitals #sitespeed #pagespeed

Jotting down a few notes on the new CSS shape() function and the commands it supports. It's incredible how dense this stuff is, but it's still a lot easier to grok than working with SVG paths by hand! css-tricks.com/css-shape-co...