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.
Usage example
.card-container {
/* Anchor names inside this card won't be visible outside it */
anchor-scope: --card-anchor;
}Initial value
none
Inherited
No
Applies to
allElements
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+