The HTML `anchor` attribute was removed from standardization, leaving CSS `anchor-name` and `position-anchor` as the only way to establish anchor relationships. A workaround using the advanced `attr()` CSS function with data attributes is presented: by storing dashed ident values in `data-boat` and `data-anchor` attributes, a single CSS rule can wire up multiple anchor associations via `position-anchor: attr(data-boat type(<custom-ident>))`. The same pattern applies to scroll animation timelines. The upcoming `ident()` CSS function (not yet browser-supported) could simplify this further by converting plain strings to dashed idents inline.
Table of contents
How the anchor attribute would’ve workedSetting up anchors using advanced attr()Using advanced attr() for other types of associationsident() could make the code cleaner, tooFurther reading7.8K Impressions