anchor-scope
Limits where an anchor name can be 'seen.' This prevents anchor names from leaking into other parts of the page, allowing you to reuse the same anchor names in different components safely.
Quick example
.card-container {
/* Anchor names inside this card won't be visible outside it */
anchor-scope: --card-anchor;
}Quick facts
Initial value
noneInherited
No
Applies to
all elements
Animation type
discrete
Values
noneall anchor-scope Browser Support
Limited availability 76% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
131+
131+