{"id":9712,"date":"2026-05-27T10:14:53","date_gmt":"2026-05-27T15:14:53","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=9712"},"modified":"2026-05-27T10:14:54","modified_gmt":"2026-05-27T15:14:54","slug":"managing-anchor-associations-with-data-attributes-and-advanced-attr","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/managing-anchor-associations-with-data-attributes-and-advanced-attr\/","title":{"rendered":"Managing Anchor Associations With Data Attributes and Advanced attr()"},"content":{"rendered":"\n

When Chrome Canary implemented the anchor<\/code> attribute, which enabled us to establish anchor relationships using HTML instead of CSS, I thought that it was an awesome idea. However, it seems that it won\u2019t be standardized, and that Chrome has removed it along with Firefox, which, it appears, was working on it. It sounds like the reason is that invokers are implicitly anchored already<\/a>, but<\/em>, what about other elements?<\/p>\n\n\n\n

In this article, I\u2019ll show you an alternative method that leverages the new, more advanced syntax for the attr()<\/code> CSS function.<\/p>\n\n\n\n

But first\u2026<\/em><\/p>\n\n\n\n

How the anchor<\/code> attribute would\u2019ve<\/em> worked<\/h2>\n\n\n\n

Instead of anchoring an element with position-anchor<\/code> to another element with anchor-name<\/code> and both of them having the same value, we\u2019d anchor an element with the anchor<\/code> attribute to another element with the id<\/code> attribute (and also the same value).<\/p>\n\n\n\n

Like this:<\/p>\n\n\n

<!-- Anchor this... (not real, anymore) --><\/span>\n<div<\/span> anchor<\/span>=\"anchorA\"<\/span>><\/span><\/div<\/span>><\/span>\n\n<!-- ...to this --><\/span>\n<div<\/span> id<\/span>=\"anchorA\"<\/span>><\/span><\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Instead of this:<\/p>\n\n\n
\/* Anchor this... (now real) *\/<\/span>\n#boatA<\/span> {\n  position-anchor<\/span>: --anchorA;\n}\n\n\/* ...to this *\/<\/span>\n#anchorA<\/span> {\n  anchor-name<\/span>: --anchorA;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
It wouldn\u2019t have been a better solution (more like an alternative for those that wanted it), but semantic HTML has always been about how elements relate to other elements, so the anchor<\/code> attribute made a lot of sense to me. Think: popovertarget<\/code> and id<\/code> (for popovers), commandfor<\/code> and id<\/code> (for the new invoker commands), interestfor<\/code> and id<\/code> (for the future interest invokers), or even the classic for<\/code> and id<\/code> (for labels). Without the anchor<\/code> attribute, anchoring a bunch of boats to a bunch of anchors looks a bit verbose, like this:<\/p>\n\n\n
#boatA<\/span> {\n  position-anchor<\/span>: --anchorA;\n}\n\n#anchorA<\/span> {\n  anchor-name<\/span>: --anchorA;\n}\n\n#boatB<\/span> {\n  position-anchor<\/span>: --anchorB;\n}\n\n#anchorB<\/span> {\n  anchor-name<\/span>: --anchorB;\n}\n\n#boatC<\/span> {\n  position-anchor<\/span>: --anchorC;\n}\n\n#anchorC<\/span> {\n  anchor-name<\/span>: --anchorC;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The anchor<\/code> attribute wouldn\u2019t have been a magic bullet, because we still would\u2019ve needed to anchor each anchor<\/code> to its corresponding id<\/code>, but it would\u2019ve been shorter and cleaner. My advanced attr()<\/code> idea isn\u2019t as elegant as the anchor<\/code> attribute would\u2019ve been, but that ship has sailed (ba dum tish!<\/em>), so let\u2019s move on.<\/p>\n\n\n\n
Setting up anchors using advanced attr()<\/code><\/h2>\n\n\n\n
My advanced attr()<\/code> idea combines both concepts. I would\u2019ve moaned about the anchor<\/code> attribute regardless, but knowing how it works is<\/em> important.<\/p>\n\n\n\n
First, instead of using the anchor<\/code> and id<\/code> attributes, use data attributes. In addition, make sure that the matching values are formatted as dashed idents (e.g., --anchorA<\/code>), since that\u2019s what position-anchor<\/code> and anchor-name<\/code> accepts.<\/p>\n\n\n
<div<\/span> data-boat<\/span>=\"--anchorA\"<\/span>><\/span>Boat A<\/div<\/span>><\/span>\n<div<\/span> data-anchor<\/span>=\"--anchorA\"<\/span>><\/span>Anchor A<\/div<\/span>><\/span>\n\n<div<\/span> data-boat<\/span>=\"--anchorB\"<\/span>><\/span>Boat B<\/div<\/span>><\/span>\n<div<\/span> data-anchor<\/span>=\"--anchorB\"<\/span>><\/span>Anchor B<\/div<\/span>><\/span>\n\n<div<\/span> data-boat<\/span>=\"--anchorC\"<\/span>><\/span>Boat C<\/div<\/span>><\/span>\n<div<\/span> data-anchor<\/span>=\"--anchorC\"<\/span>><\/span>Anchor C<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
That\u2019s right, we\u2019ll still be using position-anchor<\/code> and anchor-name<\/code>, but only once, eliminating any verbosity. In the CSS below, the position<\/code> property is basically the prerequisite for position-anchor<\/code>, whereas the inset<\/code> declaration defines where the boats are positioned relative to their anchor. Anchor positioning stuff, you know?<\/p>\n\n\n\n
Now for the magic.<\/p>\n\n\n\n
Instead of choosing a specific value for position-anchor<\/code>, we use the attr()<\/code> function to copy over the value from the data-boat<\/code> attribute. The position-anchor<\/code> syntax demands a dashed ident, which is cool because that\u2019s what we\u2019ve used (--anchorA<\/code>, --anchorB<\/code>, --anchorC<\/code>, and so on). Now every element with the data-boat<\/code> attribute has position-anchor<\/code> set to a unique value, even though we\u2019ve only written one CSS rule.<\/p>\n\n\n\n
We\u2019ve had the CSS delegate the logic to the HTML.<\/p>\n\n\n\n
Advanced attr()<\/code> is supported by Chrome, and Firefox 152 will ship it on June 16, 2026. Safari Technology Preview supports it too, but I don\u2019t know when stable<\/em> Safari will support it. My estimation is Safari 27 in September 2026, but it could drop at any moment to be honest, making it \u201cBaseline: Newly Available.\u201d<\/p>\n\n\n\n
After that, we simply do the same thing with anchor-name<\/code> (anchor-name: attr(data-anchor type(<custom-ident>))<\/code>) so that we can link the boats to the anchors. Here\u2019s the full CSS code:<\/p>\n\n\n
[data-boat]<\/span> {\n  position<\/span>: fixed;\n  inset<\/span>: anchor<\/span>(top) auto auto anchor<\/span>(right);\n  position-anchor<\/span>: attr<\/span>(data-boat type(<custom-ident>));\n}\n\n[data-anchor]<\/span> {\n  anchor-name<\/span>: attr<\/span>(data-anchor type(<custom-ident>));\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
However, by default, attr()<\/code> values are <string><\/code>s, so the declaration resolves to something like this: position-anchor: \"--anchorA\"<\/code>. That\u2019s why we use the type()<\/code> function to specify the value\u2019s data type, like this: position-anchor: attr(data-boat type(<custom-ident>))<\/code> (<custom-ident><\/code> is the appropriate data type for dashed idents). The reason for this is that the attr()<\/code> function can now be used with any CSS property, whereas it could only be used with the content<\/code> property before, which only accepted <string><\/code>s. And that, by the way, is one of the things that makes advanced attr()<\/code><\/a> more advanced.<\/p>\n\n\n\n
To be clear, I mean that every boat looks the same and every anchor looks the same, but each boat needs to be anchored to a specific anchor (think: some kind of reusable, decorative motif that can be anchored to anything). I know, I know, anchors can be scoped using anchor-scope<\/code><\/a>, but that\u2019d only work in certain circumstances.<\/p>\n\n\n\n