Editorial review: CSS anchor positioning 2: mostly association properties #33467
Conversation
Preview URLs (8 pages)
Flaws (27)Note! 3 documents with no flaws that don't need to be listed. 🎉 URL:
URL:
URL:
URL:
URL:
External URLs (2)URL:
URL:
(comment last updated: 2024-06-25 11:14:56) |
chrisdavidmills
changed the title
chrisdavidmills
changed the title
github-actions
bot
added
Content:CSS
chrisdavidmills
requested review from
sideshowbarker and
dipikabh
and removed request for
a team
chrisdavidmills
changed the title
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
AP PR2: api and html pages only
AP PR2: CSS pages
github-actions
bot
added
size/xl
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
There was a problem hiding this comment.
REVIEW:
APPROVED: HTMLElement.anchorElement property page
APPROVED: HTMLElementpage
anchor-name page:
has an issue in the description.
also suggested simplifications for the examples; removing border-radius and margin, and only using inset properties. This is one of the first pages people will read when learning this, so want to make it as simple as possible, so the only thing their confused about is anchor-name, anchor-position, and top/left/right/bottom.
position-anchor page:
- remove the border-radius and margin on the examples
- Is the space between the position-anchor and position intentional?
Other than that, this is good to go.
Sumbitting this review, but will work on it again tomorrow.
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} |
There was a problem hiding this comment.
Not a blocker, just a question: why does chrome say "canary" in blue and others just have flag with red X? If four browsers support it behind a flag, shouldn't they all appear somewhat similar?
There was a problem hiding this comment.
I am not sure. Something to bring up with the BCD team?
|
|
||
| ## Description | ||
|
|
||
| To position an element relative to an anchor element, the positioned element requires three features: an association, a position, and a location. The `anchor-name` and {{cssxref("position-anchor")}} properties provide the association. The anchor element accepts one or more `<dashed-ident>` anchor names set on it via the `anchor-name` property. When one of those names is then set as the value of the positioned element's `position-anchor` property, the two elements are associated. The two elements become tethered by setting a {{cssxref("position")}} of `absolute` or `fixed` on the associated element, making it an "anchor-positioned" element. |
There was a problem hiding this comment.
| To position an element relative to an anchor element, the positioned element requires three features: an association, a position, and a location. The `anchor-name` and {{cssxref("position-anchor")}} properties provide the association. The anchor element accepts one or more `<dashed-ident>` anchor names set on it via the `anchor-name` property. When one of those names is then set as the value of the positioned element's `position-anchor` property, the two elements are associated. The two elements become tethered by setting a {{cssxref("position")}} of `absolute` or `fixed` on the associated element, making it an "anchor-positioned" element. | |
| To position an element relative to an anchor element, the positioned element requires three features: an association, a position, and a location. The `anchor-name` and {{cssxref("position-anchor")}} properties provide the association. | |
| The anchor element accepts one or more `<dashed-ident>` anchor names set on it via the `anchor-name` property. When one of those names is then set as the value of the `position-anchor` property of an element that has its {{cssxref("position")}} set to `absolute` or `fixed`, the two elements are associated. The two elements become tethered by setting a location on the associated element relative to the anchor, making it an "anchor-positioned" element. |
I think we may have gotten it wrong originally. If my 2nd paragraph edit is wrong, still add the paragraph return.
There was a problem hiding this comment.
Yup, this is right; good catch.
|
|
||
| Anchor positioning changes the [containing block](/en-US/docs/Web/CSS/Containing_block) of anchor-positioned elements, making its `position` relative to its anchor rather than to the nearest positioned ancestor element. | ||
|
|
||
| To tether and place a positioned element in a specific location relative to an anchor element, an anchor positioning feature is needed, such as the {{cssxref("anchor()")}} function (set as a value on {{glossary("inset properties")}}) or the {{cssxref("inset-area")}} property. |
There was a problem hiding this comment.
| To tether and place a positioned element in a specific location relative to an anchor element, an anchor positioning feature is needed, such as the {{cssxref("anchor()")}} function (set as a value on {{glossary("inset properties")}}) or the {{cssxref("inset-area")}} property. | |
| To tether and place a positioned element in a specific location relative to an anchor element, an anchor positioning feature is needed, such as the {{cssxref("anchor()")}} function (set within an {{glossary("inset properties", "inset property's")}} value) or the {{cssxref("inset-area")}} property. |
| text-shadow: 1px 1px 1px black; | ||
| background-color: hsl(240 100% 75%); | ||
| width: fit-content; | ||
| border-radius: 10px; |
There was a problem hiding this comment.
| border-radius: 10px; |
Let's kill the rounded corners so corners touch based on position.
There was a problem hiding this comment.
As I said, I don't want to start messing with the example styling now; it will be a complete pain to keep consistent across all the new pages. If we really feel it is important after publication, let's do it as follow-up work.
I personally don't think this makes any difference.
| - {{cssxref("left")}} property to an {{cssxref("anchor()")}} function with a value of `right`, tethering the positioned element to it's anchor. This positions the infobox's left edge flush to the right edge of its anchor. | ||
| - {{cssxref("align-self")}} property to `anchor-center`, centrally aligning the infobox to the center of the anchor in the inline direction. | ||
| - {{cssxref("margin-left")}} to `10px`, creating space between the anchor positioned element and its anchor. |
There was a problem hiding this comment.
| - {{cssxref("left")}} property to an {{cssxref("anchor()")}} function with a value of `right`, tethering the positioned element to it's anchor. This positions the infobox's left edge flush to the right edge of its anchor. | |
| - {{cssxref("align-self")}} property to `anchor-center`, centrally aligning the infobox to the center of the anchor in the inline direction. | |
| - {{cssxref("margin-left")}} to `10px`, creating space between the anchor positioned element and its anchor. | |
| - {{cssxref("left")}} and {{cssxref("top")}} properties to an {{cssxref("anchor()")}} function with a value of `right` and `top` respectively, tethering the positioned element to it's anchor. This positions the infobox's left edge flush to the right edge it's top edge flush to the top enge of its anchor. |
let's omit margin and aligning center to keep this example as basic as possible; only including the features required and mentioned in the intro (we don't discuss align-self or anchor center)
There was a problem hiding this comment.
Again, I don't want to start editing the demos at this point; I just want to get this published. MDN readers are not stupid; including a couple of other properties won't destroy their understanding of the example. On the contrary, I think it is useful to introduce a couple of features that they might want to go on to learn more about.
Also, at the start of this example, we say "positioning the element to the right of the anchor" - this code is part of that positioning.
| background-color: azure; | ||
| border: 1px solid #ddd; | ||
| padding: 10px; | ||
| border-radius: 10px; |
There was a problem hiding this comment.
| border-radius: 10px; |
| #infobox1 { | ||
| left: anchor(right); | ||
| align-self: anchor-center; | ||
| margin-left: 10px; | ||
| } | ||
|
|
||
| #infobox2 { | ||
| bottom: anchor(top); | ||
| justify-self: anchor-center; | ||
| margin-bottom: 15px; | ||
| } |
There was a problem hiding this comment.
| #infobox1 { | |
| left: anchor(right); | |
| align-self: anchor-center; | |
| margin-left: 10px; | |
| } | |
| #infobox2 { | |
| bottom: anchor(top); | |
| justify-self: anchor-center; | |
| margin-bottom: 15px; | |
| } | |
| #infobox1 { | |
| left: anchor(right); | |
| top: anchor(top); | |
| } | |
| #infobox2 { | |
| bottom: anchor(top); | |
| right: anchor(right); | |
| } |
let's get rid of the border radius and centering. this makes it easier to understanding the example
There was a problem hiding this comment.
No; I don't want to start fiddling with all the examples at this late stage.
| } | ||
| ``` | ||
|
|
||
| Each of the two positioned elements are associated with the anchor element by setting its anchor name as the positioned element's {{cssxref("position-anchor")}} property value. Both are also given `fixed` positioning, making them **anchor positioned elements**. The positioned elements are then positioned in different places relative to the anchor using a combination of inset, alignment, and margin properties. |
There was a problem hiding this comment.
| Each of the two positioned elements are associated with the anchor element by setting its anchor name as the positioned element's {{cssxref("position-anchor")}} property value. Both are also given `fixed` positioning, making them **anchor positioned elements**. The positioned elements are then positioned in different places relative to the anchor using a combination of inset, alignment, and margin properties. | |
| Each of the two positioned elements are associated with the anchor element by setting its anchor name as the positioned element's {{cssxref("position-anchor")}} property value. Both are also given `fixed` positioning, making them **anchor positioned elements**. The positioned elements are then positioned in different places relative to the anchor using inset properties. |
| .anchor { | ||
| font-size: 1.8rem; | ||
| color: white; | ||
| text-shadow: 1px 1px 1px black; | ||
| background-color: hsl(240 100% 75%); | ||
| width: fit-content; | ||
| border-radius: 10px; | ||
| border: 1px solid black; | ||
| padding: 3px; | ||
| } | ||
|
|
||
| .infobox { | ||
| color: darkblue; | ||
| background-color: azure; | ||
| border: 1px solid #ddd; | ||
| padding: 10px; | ||
| border-radius: 10px; | ||
| font-size: 1rem; | ||
| } |
There was a problem hiding this comment.
| .anchor { | |
| font-size: 1.8rem; | |
| color: white; | |
| text-shadow: 1px 1px 1px black; | |
| background-color: hsl(240 100% 75%); | |
| width: fit-content; | |
| border-radius: 10px; | |
| border: 1px solid black; | |
| padding: 3px; | |
| } | |
| .infobox { | |
| color: darkblue; | |
| background-color: azure; | |
| border: 1px solid #ddd; | |
| padding: 10px; | |
| border-radius: 10px; | |
| font-size: 1rem; | |
| } | |
| .anchor { | |
| font-size: 1.8rem; | |
| color: white; | |
| text-shadow: 1px 1px 1px black; | |
| background-color: hsl(240 100% 75%); | |
| width: fit-content; | |
| border: 1px solid black; | |
| padding: 3px; | |
| } | |
| .infobox { | |
| color: darkblue; | |
| background-color: azure; | |
| border: 1px solid #ddd; | |
| padding: 10px; | |
| font-size: 1rem; | |
| } |
There was a problem hiding this comment.
looks long, but i just remove border radius
There was a problem hiding this comment.
It's hidden from the reader anyway, so it doesn't matter. No change.
| position-anchor: --anchor1; | ||
| left: anchor(right); | ||
| align-self: anchor-center; | ||
| margin-left: 10px; | ||
| } | ||
|
|
||
| #infobox2 { | ||
| position-anchor: --anchor2; | ||
| bottom: anchor(top); | ||
| justify-self: anchor-center; | ||
| margin-bottom: 15px; |
There was a problem hiding this comment.
| position-anchor: --anchor1; | |
| left: anchor(right); | |
| align-self: anchor-center; | |
| margin-left: 10px; | |
| } | |
| #infobox2 { | |
| position-anchor: --anchor2; | |
| bottom: anchor(top); | |
| justify-self: anchor-center; | |
| margin-bottom: 15px; | |
| position-anchor: --anchor1; | |
| left: anchor(right); | |
| top: anchor(top); | |
| } | |
| #infobox2 { | |
| position-anchor: --anchor2; | |
| bottom: anchor(top); | |
| left: anchor(right); |
| ```css | ||
| #infobox1 { | ||
| position-anchor: --myAnchor1; | ||
|
|
There was a problem hiding this comment.
are these empty lines intentional?
There was a problem hiding this comment.
Nope; they look a bit weird. Removed!
|
|
||
| #### JavaScript | ||
|
|
||
| We dynamically change the `anchor-name` values set on the anchor elements in response to different anchors being selected in the positioned elements' `<select>` menus. The key functionality here is the [`change`](/en-US/docs/Web/API/HTMLElement/change_event) event handler, `updateAnchorNames()`. It sets both anchor names on one anchor, if the anchors chosen in the two `<select>` menus are the same. Otherwise, it sets a single anchor name on two separate anchors as appropriate. |
There was a problem hiding this comment.
| We dynamically change the `anchor-name` values set on the anchor elements in response to different anchors being selected in the positioned elements' `<select>` menus. The key functionality here is the [`change`](/en-US/docs/Web/API/HTMLElement/change_event) event handler, `updateAnchorNames()`. It sets both anchor names on one anchor, if the anchors chosen in the two `<select>` menus are the same. Otherwise, it sets a single anchor name on two separate anchors as appropriate. | |
| We dynamically change which of the `.anchor` elements has an `anchor-name` value set on it in response to different anchors being selected in the positioned elements' `<select>` menus. The key functionality here is the [`change`](/en-US/docs/Web/API/HTMLElement/change_event) event handler, `updateAnchorNames()`. It sets both anchor names on one anchor, if the anchors chosen in the two `<select>` menus are the same. Otherwise, it sets a single anchor name on two separate anchors as appropriate. |
There was a problem hiding this comment.
I can see what you are getting at here, but it didn't seem quite right to me. I ended up changing the first sentence to:
We dynamically change which anchor elements the
anchor-namevalues are set on in response to different anchors being selected in the positioned elements'<select>menus.
| - `always` | ||
| - : The positioned element is always displayed. | ||
| - `anchors-visible` | ||
| - : If the anchor is completely hidden, either by overflowing its containing element (or the viewport) or being covered by other elements, the positioned element will be **strongly hidden**. |
There was a problem hiding this comment.
| - : If the anchor is completely hidden, either by overflowing its containing element (or the viewport) or being covered by other elements, the positioned element will be **strongly hidden**. | |
| - : If the anchor is completely hidden, either by overflowing its containing element (or the viewport) or being covered by other elements, the positioned element will be strongly hidden. |
it's bold below, so we don't need to bold it here.
There was a problem hiding this comment.
Makes sense; updated in next commit
| `position-visibility` should only be used in situations in which hiding the positioned element altogether is preferred. In most cases, it makes more sense to attempt to change the placement of positioned elements when they start to overflow, to keep them on-screen and usable. This can be be done with the {{cssxref("position-try-options")}} property and {{cssxref("@position-try")}} at-rule. | ||
|
|
||
| For detailed information on anchor features and usage, see the [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module landing page, the [Using CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) guide, and [Handling overflow: try options and conditional hiding](/en-US/docs/Web/CSS/CSS_anchor_positioning/Try_options_hiding). |
There was a problem hiding this comment.
| `position-visibility` should only be used in situations in which hiding the positioned element altogether is preferred. In most cases, it makes more sense to attempt to change the placement of positioned elements when they start to overflow, to keep them on-screen and usable. This can be be done with the {{cssxref("position-try-options")}} property and {{cssxref("@position-try")}} at-rule. | |
| For detailed information on anchor features and usage, see the [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module landing page, the [Using CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) guide, and [Handling overflow: try options and conditional hiding](/en-US/docs/Web/CSS/CSS_anchor_positioning/Try_options_hiding). | |
| `position-visibility` should only be used in situations in which hiding the positioned element altogether is preferred. In most cases, it makes more sense to attempt to change the placement of positioned elements when they start to overflow, to keep them on-screen and usable. This can be be done with the {{cssxref("position-try-options")}} property and {{cssxref("@position-try")}} at-rule. See the [Handling overflow: try options and conditional hiding](/en-US/docs/Web/CSS/CSS_anchor_positioning/Try_options_hiding) for more information. |
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Description
CSS Anchor Positioning is set to be released in Chrome 125 (see the associated Chrome Status entry).
This PR (part of a series; see the first PR here) adds the following content:
anchorattribute, used to declare the ID of an element that you want this element to be anchored to (i.e. its anchor element).Element.anchorElementproperty, used to access a reference to an element's anchor element.anchor-namepropertyposition-anchorpropertyposition-visibilitypropertyDo not merge until #33058 is merged.
Motivation
Additional details
Related issues and pull requests