The Cascade is a blog about the past, present, and future of CSS.

Howdy—Robin Rendle here.

This blog keeps me in the loop with everything that’s possible with CSS lately but it’s also a reminder to celebrate the people doing the hard work building stuff for the web.

You can subscribe to The Cascade via RSS, shoot me an email if you absolutely must, or follow the feed. This project is directly supported by readers and the membership program.

Right now the newsletter is taking a bit of a break whilst I figure out a healthy publishing cadence, but you can subscribe below:

An intro to CSS anchor positioning

Update: inset-area has been renamed to position-area since this post was published! You can read more about these syntax changes here.

I’ve been half-ignoring anchor positioning but patiently waiting for it to land in browsers for a while now. But this explanation by Brecht yesterday reminded me to buckle up and learn it all properly since it just landed in the latest version of Chrome and Edge.

One thing I hadn’t heard of before Brecht’s post was the inset-area property which sure is handy. As he explains, it lets you draw a grid around an element and then position something left/right/up/down within it:

.anchored {
  position: absolute;
  position-anchor: --anchortome;
  position-area: top span-all;
}

This feels like how I’d anchor-position something like a tooltip maybe 95% of the time which is neat. But! Although anchor positioning sure is going to be amazing for tooltips, it goes far beyond that. Re-reading Roman Komarov’s post from last year made me spit-take again:

It becomes possible to highlight something in a completely different place on the page, allowing elements to “know of each other”.

Not only does that sound punk rock and strangely ominious, I think that’s what anchor positioning really opens up.