diff --git a/files/en-us/web/css/guides/anchor_positioning/index.md b/files/en-us/web/css/guides/anchor_positioning/index.md index 2669cb071d965e0..dcedeea344e8260 100644 --- a/files/en-us/web/css/guides/anchor_positioning/index.md +++ b/files/en-us/web/css/guides/anchor_positioning/index.md @@ -18,6 +18,7 @@ In addition, the specification provides CSS-only mechanisms to: ### Properties +- {{cssxref("anchor-scope")}} - {{cssxref("anchor-name")}} - {{cssxref("position-anchor")}} - {{cssxref("position-area")}} @@ -26,8 +27,6 @@ In addition, the specification provides CSS-only mechanisms to: - {{cssxref("position-try")}} shorthand - {{cssxref("position-visibility")}} -The CSS anchor positioning module also introduces the `anchor-scope` property. Currently, no browsers support this feature. - ### At-rules and descriptors - {{cssxref("@position-try")}} diff --git a/files/en-us/web/css/guides/anchor_positioning/using/index.md b/files/en-us/web/css/guides/anchor_positioning/using/index.md index 6e00e93c628020d..e96ea938656bc97 100644 --- a/files/en-us/web/css/guides/anchor_positioning/using/index.md +++ b/files/en-us/web/css/guides/anchor_positioning/using/index.md @@ -119,9 +119,74 @@ For example, to stop a customizable ``](/en-US/docs/Web/HTML/Reference/Elements/input/radio) elements to allow different `anchor-scope` values to be set on the `
` elements. + +```html live-sample___comparing-values +
+
⚓︎
+
Positioned 1
+
+ +
+
⚓︎
+
Positioned 1
+
+ +
+
⚓︎
+
Positioned 1
+
+ +
Positioned 2
+ +
+
+ Select anchor-scope + + + + + + + +
+
+``` + +#### CSS + +We start by specifying our anchor elements as anchors by giving them two {{cssxref("anchor-name")}} values: ‑‑my-anchor and `--another-anchor`. + +```css hidden live-sample___comparing-values +body { + display: flex; + justify-content: center; + gap: 50px; + margin-top: 5px; +} + +.scoped { + padding: 20px; + background: #eee; + border: 2px solid #ddd; + border-radius: 10px; + width: 100px; + height: 100px; +} + +.anchor { + font-size: 1.8rem; + color: white; + text-shadow: 1px 1px 1px black; + background-color: blue; + width: fit-content; + padding: 3px; +} + +.positioned, +.positioned2 { + background: orange; + border: 2px solid #ddd; + border-radius: 3px; + width: fit-content; + padding: 3px; +} + +form { + position: absolute; + bottom: 5px; + right: 5px; +} +``` + +```css live-sample___comparing-values +.anchor { + anchor-name: --my-anchor, --another-anchor; +} +``` + +Next, we position our `.positioned` elements relative to an anchor element. We absolutely position them, give them a {{cssxref("position-anchor")}} value of `--my-anchor` to associate them with an anchor, and position them relative to the anchor with a {{cssxref("position-area")}} value of `right`. + +The `.positioned2` element is positioned in a similar way, except that it is given the other available anchor name as its `position-anchor` value — `--another-anchor` — and it is positioned to the `bottom` of the anchor instead. We also give it a {{cssxref("bottom")}} value of `5px`, so that if the anchor positioning is not working, it will be positioned to the bottom of the ``. + +```css live-sample___comparing-values +.positioned { + position: absolute; + position-anchor: --my-anchor; + position-area: right; +} + +.positioned2 { + position: absolute; + bottom: 5px; + position-anchor: --another-anchor; + position-area: bottom; +} +``` + +#### JavaScript + +We handle setting `anchor-scope` on the `
` elements using JavaScript. First of all, we grab references to the `
` and `
` elements. We then add an `input` event listener to the form so that when any of its descendant radio inputs are selected, the `anchor-scope` of all the `
` elements is set to the radio input value. + +Finally, we set the `anchor-scope` of all the `
` elements to `all` on page load as an initial value (that is also the initial selected radio button value). + +```js live-sample___comparing-values +const sections = document.querySelectorAll("section"); +const form = document.querySelector("form"); + +form.addEventListener("input", (e) => { + sections.forEach((section) => (section.style.anchorScope = e.target.value)); +}); + +sections.forEach((section) => (section.style.anchorScope = "all")); +``` + +#### Result + +The example renders as follows: + +{{ EmbedLiveSample("comparing-values", "100%", "225") }} + +Check out the initial positioning effect applied to the positioned elements with `anchor-scope: all` set on the `
` elements, and then try selecting the other available `anchor-scope` values to see what their effect is. You should observe the following: + +- `all`: The scope for positioning elements relative to anchor elements that are descendants of the `
` elements is limited to positioned elements that are themselves descendants of the `
` elements, regardless of the `anchor-name` value used to associate them. As a result, the positioned elements inside the `
` elements ("Positioned 1") are anchor-positioned as expected, but the positioned element outside the `
` elements ("Positioned 2") is not anchor-positioned. It is out of scope. +- `--my-anchor`: The scope for positioning elements relative to anchor elements that are descendants of the `
` elements is limited to positioned elements that are themselves descendants of the `
` elements, only if the `--my-anchor` `anchor-name` is used to associate them. As a result, the positioned elements inside the `
` elements ("Positioned 1") are anchor-positioned as expected, and the positioned element outside the `
` elements ("Positioned 2") is also anchor-positioned as expected. In the former case, the positioned elements are inside the set scope, and in the latter case, the positioned element is not affected by the set scope, as it is using an anchor name outside the scope (‑‑another-anchor). The "Positioned 2" element is positioned relative to the last anchor element in the source that has the matching anchor name. +- `none`: No anchor scope is set on the `
` elements. As a result, all of the positioned elements are positioned relative to the last anchor element in the source order. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("anchor-name")}} +- {{cssxref("position-anchor")}} +- [CSS anchor positioning](/en-US/docs/Web/CSS/Guides/Anchor_positioning) module +- [Using CSS anchor positioning](/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using) guide diff --git a/files/en-us/web/css/reference/properties/position-anchor/index.md b/files/en-us/web/css/reference/properties/position-anchor/index.md index 86e6e506f86ef98..6bc9aa510aaa22a 100644 --- a/files/en-us/web/css/reference/properties/position-anchor/index.md +++ b/files/en-us/web/css/reference/properties/position-anchor/index.md @@ -297,6 +297,7 @@ Select different values from the drop-down menus to change the anchors that the ## See also +- {{cssxref("anchor-scope")}} - {{cssxref("anchor-name")}} - HTML [`anchor`](/en-US/docs/Web/HTML/Reference/Global_attributes/anchor) attribute - [CSS anchor positioning](/en-US/docs/Web/CSS/Guides/Anchor_positioning) module