Recent CSS Bookmarks 21: Anchor Positioning
- Published on:
- Categories:
- Anchor Positioning 2, CSS 61, bookmarks 21
- 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.