Recent CSS Bookmarks 21: Anchor Positioning

Published on:: November 21, 2024
Categories:: Anchor Positioning², CSS⁵⁶, bookmarks²¹
Current music:: toe — グッドバイ
Current drink:: Peppermint Tea

Anchor positioning is cool! And there were many articles and posts about anchor positioning since I last mentioned it in my bookmark posts. Here they are!

“Let’s hang! An intro to CSS Anchor Positioning with basic examples” by Brecht De Ruyte — a good introductory article about anchor positioning that compares two different ways we can achieve the same thing, and looks into some other details.
“Anchoreum” by Thomas Park — a fun game that teaches anchor positioning. I did not yet finish it, but it might be a good way to learn how some of its aspects work if you’re not yet familiar with it.
“Layered positioning” by Christoph Päper — a CSSWG issue about how we could make an anchored element match the layer of its anchor. I commented there today with two small proposals, the ideas for which I got after a mastodon thread started by Mayank. Check out the thread itself for a demo of another anchor positioning use case: animated focus ring. I mentioned this use case in my CSSDay talk, but did not have an opportunity to finish a draft of an article about it yet.
“Anchor Positioning Is Disruptive” by James Stuckey Weber — a post about an interesting use case for anchor positioning, a bit similar to the one with the sidenotes. See also “Another Anchor Positioning Demo: Multiple Anchors” by Michelle Barker, Nuclear Anchored Sidenotes by Eric Meyer, and the “Sidenotes Layout” section of my old “Future CSS: Anchor Positioning” article.
“Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations” by Temani Afif — an article about how we can target pseudo-elements of the range slider with both scroll-driven animations and anchor positioning. The result is very impressive and even uses the technique from the “Solved by CSS Scroll-Driven Animations: Style an element based on the active Scroll Direction and Scroll Speed” article by Bramus. I am glad that we now have a proper exploration of this concept, which I shared a year ago in my “Observation: Range Input’s Thumb and Emerging CSS” post.
“Custom Progress Element Using Anchor Positioning & Scroll-Driven Animations” by Temani Afif — a continuation of the previous article, this time applying this method to the <progress> HTML element.
“Front-End solution: Eyebrow heading dots” by Andy Bell — a post about a challenge for placing elements on two sides of a wrapping element with a solution that builds on top of my “The Shrinkwrap Problem: Possible Future Solutions” article that I shared with the author.
“Anchor Positioning and the Popover API for a JS-Free Site Menu ” by Michelle Barker — an article that looks at various aspects of how we could use anchor positioning with popover API, including a site menu use case.
“Progressively Enhanced Popover Toggletips” by Michelle Barker — an article about using anchor positioning to progressivly enhance footnotes.
“Web components + anchor positioning + popover API = I love the platform” by Jim Schofield — a post that looks at how we could build a popover with anchor positioning as a custom element.
“Flow Charts with CSS Anchor Positioning” by Cory Rylan — a post that looks at the flow charts use case for anchor positioning. See also: the “Using the Connections” section of my old “Future CSS: Anchor Positioning” article.