Editorial review: CSS anchor positioning 2: mostly association properties #33467
Conversation
Preview URLs (7 pages)Flaws (31)Note! 1 document with no flaws that don't need to be listed. 🎉 URL:
URL:
URL:
URL:
URL:
URL:
External URLs (2)URL:
URL:
(comment last updated: 2024-05-31 13:23:30) |
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
chrisdavidmills
requested review from
estelle
and removed request for
dipikabh and
mfreed7
chrisdavidmills
changed the title
|
Technical review now complete; thanks @mfreed7! I'm now moving this one onto the editorial review stage. |
| @@ -21,6 +21,8 @@ In addition to the basic HTML global attributes, the following global attributes | |||
|
|
|||
| - [`accesskey`](/en-US/docs/Web/HTML/Global_attributes/accesskey) | |||
| - : Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout. | |||
| - [`anchor`](/en-US/docs/Web/HTML/Global_attributes/anchor) {{non-standard_inline}} | |||
| - : Associates a positioned element with an anchor element. The anchor element is given an [`id`](/en-US/docs/Web/HTML/Global_attributes/id), and the positioned element is given an `anchor` attribute, the value of which is the anchor element's `id`. | |||
There was a problem hiding this comment.
| - : Associates a positioned element with an anchor element. The anchor element is given an [`id`](/en-US/docs/Web/HTML/Global_attributes/id), and the positioned element is given an `anchor` attribute, the value of which is the anchor element's `id`. | |
| - : Associates a positioned element with an anchor element. The element can be positioned using [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using). The attribute value is the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) value of its associated anchor element. |
describe the element with the attribute, not the element without it. Added "The element can be positioned using CSS anchor positioning.", but we can remove that if you prefer.
There was a problem hiding this comment.
I like this. I've mostly used it, except that I've recorded it slightly:
Associates a positioned element with an anchor element. The attribute's value is the
idvalue of the element you want to anchor the positioned element to. The element can then be positioned using CSS anchor positioning.
I've also made the equivalent changes on the attribute page.
|
|
||
| The **`anchor`** [global attribute](/en-US/docs/Web/HTML/Global_attributes) is used to associate a positioned element with an anchor element. The anchor element is given an [`id`](/en-US/docs/Web/HTML/Global_attributes/id), and the positioned element is given an `anchor` attribute, the value of which is the anchor element's `id`. | ||
|
|
||
| You can also associate a positioned element with an anchor element via CSS, using the {{cssxref("anchor-name")}} and {{cssxref("position-anchor")}} properties. |
There was a problem hiding this comment.
| You can also associate a positioned element with an anchor element via CSS, using the {{cssxref("anchor-name")}} and {{cssxref("position-anchor")}} properties. | |
| You can also associate a positioned element with an anchor element via CSS, using the {{cssxref("anchor-name")}} and {{cssxref("position-anchor")}} properties, instead. |
if the user does both, and there's a mismatch, which takes precedence
There was a problem hiding this comment.
I decided to change the text to this, to fix the problem:
Alternatively, you can associate a positioned element with an anchor element via CSS, using the {{cssxref("anchor-name")}} and {{cssxref("position-anchor")}} properties.
I also made it into a note.
And, I tested the techniques together to see which one would take precedence when both were applied to an element at the same time; i.e. I tried anchoring the same positioned element to two anchor elements, one using HTML, and one using CSS. Turns out it is the CSS that takes precedence, regardless of which anchor element appears first in the source order.
I therefore added the following sentence to the existing note, to cover that:
If both anchoring techniques are used on the same element, the CSS technique takes precedence over the HTML technique.
WDYT?
|
|
||
| #### HTML | ||
|
|
||
| In the HTML, we create a {{htmlelement("div")}} element with an `id` of `example-anchor`. This will be our anchor element. We then include another `<div>` with a class of `infobox` and an `anchor` attribute set to `example-anchor`. This designates the first `<div>` as the second `<div>`'s anchor, associating the two together. |
There was a problem hiding this comment.
| In the HTML, we create a {{htmlelement("div")}} element with an `id` of `example-anchor`. This will be our anchor element. We then include another `<div>` with a class of `infobox` and an `anchor` attribute set to `example-anchor`. This designates the first `<div>` as the second `<div>`'s anchor, associating the two together. | |
| We create a {{htmlelement("div")}} element with an `id` of `example-anchor`. This is our anchor element. We then include another `<div>` with a class of `infobox` and an `anchor` attribute set to `example-anchor`. This designates the first `<div>` as the anchor for the second `<div>`, associating the two together. |
There was a problem hiding this comment.
I like this; used verbatim
|
|
||
| #### Result | ||
|
|
||
| The result is as follows. Try scrolling the page to demonstrate how the infobox is tethered to the anchor. |
There was a problem hiding this comment.
| The result is as follows. Try scrolling the page to demonstrate how the infobox is tethered to the anchor. | |
| Scroll the example to see how the infobox is tethered to the anchor. When supported, the infobox will be fixed to the right of the anchor. If not supported, the infobox will be fixed to the viewport. |
There was a problem hiding this comment.
Like it; used.
|
|
||
| ## Specifications | ||
|
|
||
| This attribute is not currently a part of any specification. See [https://github.com/whatwg/html/pull/9144](https://github.com/whatwg/html/pull/9144) for an ongoing discussion about it. |
There was a problem hiding this comment.
| This attribute is not currently a part of any specification. See [https://github.com/whatwg/html/pull/9144](https://github.com/whatwg/html/pull/9144) for an ongoing discussion about it. | |
| This attribute is not currently part of the HTML specification. Read the discussion about adding the `anchor` attribute at [https://github.com/whatwg/html/pull/9144](https://github.com/whatwg/html/pull/9144). |
or "See the WHATWG discussion regarding adding the anchor attribute.
There was a problem hiding this comment.
Like it; used.
|
|
||
| #### Result | ||
|
|
||
| The result looks like this. Try scrolling the page to demonstrate how the infobox is tethered to the anchor. |
There was a problem hiding this comment.
| The result looks like this. Try scrolling the page to demonstrate how the infobox is tethered to the anchor. | |
| Try scrolling the page to demonstrate how the infobox is tethered to the anchor. |
same as position-visibility comment
|
|
||
| ## Specifications | ||
|
|
||
| This property is not currently a part of any specification. See [https://github.com/whatwg/html/pull/9144](https://github.com/whatwg/html/pull/9144) for an ongoing discussion about it. |
There was a problem hiding this comment.
Good call; updated
| ```js | ||
| const posElem = document.querySelector(".infobox"); | ||
| const outputElem = document.querySelector(".output"); | ||
| outputElem.textContent = `The positioned element's anchor element is the ${posElem.anchorElement.id}.`; |
There was a problem hiding this comment.
I'm not sure what you mean by this. Can you expand on it?
There was a problem hiding this comment.
check that posElem.anchorElement.id is defined. (as anchorElement is not fully supported and experimental i think
There was a problem hiding this comment.
Ah, good call. Yeah, try/catch works. Added.
…/content into css-anchor-positioning-2
![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>
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>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
|
||
| ### Basic `anchor` attribute usage | ||
|
|
||
| The following example associates a positioned element with an anchor, and tethers the positioned element to the right of the anchor. |
There was a problem hiding this comment.
| The following example associates a positioned element with an anchor, and tethers the positioned element to the right of the anchor. | |
| The following example uses HTML to associate a positioned element with an anchor. CSS is then used to tether the positioned element to the right of the anchor. |
There was a problem hiding this comment.
clarify that the tethering requires CSS
|
|
||
| #### HTML | ||
|
|
||
| We create a {{htmlelement("div")}} element with an `id` of `example-anchor`. This is our anchor element. We then include another `<div>` with a class of `infobox` and an `anchor` attribute set to `example-anchor`. This designates the first `<div>` as the anchor for the second `<div>`, associating the two together. |
There was a problem hiding this comment.
| We create a {{htmlelement("div")}} element with an `id` of `example-anchor`. This is our anchor element. We then include another `<div>` with a class of `infobox` and an `anchor` attribute set to `example-anchor`. This designates the first `<div>` as the anchor for the second `<div>`, associating the two together. | |
| We create a {{htmlelement("div")}} element with an `id` of `example-anchor`. This is our anchor element. We then include another `<div>` with its an `anchor` attribute set to `example-anchor`. This designates the first `<div>` as the anchor for the second `<div>`, associating the two together. |
the class name is not important to the page, so lets' remove it.
There was a problem hiding this comment.
That's fair. Updated.
|
|
||
| We create a {{htmlelement("div")}} element with an `id` of `example-anchor`. This is our anchor element. We then include another `<div>` with a class of `infobox` and an `anchor` attribute set to `example-anchor`. This designates the first `<div>` as the anchor for the second `<div>`, associating the two together. | ||
|
|
||
| We also include some filler text around the two `<div>`s to make the {{htmlelement("body")}} taller so that it will scroll. |
There was a problem hiding this comment.
| We also include some filler text around the two `<div>`s to make the {{htmlelement("body")}} taller so that it will scroll. | |
| We also added classes and included some filler text around the two `<div>`s to make the {{htmlelement("body")}} taller so that it will scroll. |
Optional. if you want to mention the classses
There was a problem hiding this comment.
Nah, I'm going to leave this; it sounds a bit weird and I don't think it is needed.
|
|
||
| In the CSS, we set the `infobox`'s: | ||
|
|
||
| - {{cssxref("position")}} property to `fixed`, so it can be positioned relative to the anchor's position in the page. |
There was a problem hiding this comment.
| - {{cssxref("position")}} property to `fixed`, so it can be positioned relative to the anchor's position in the page. | |
| - {{cssxref("position")}} property to `fixed`, so it can be positioned relative to the anchor's position in the page. This converts the element to a **positioned element**. |
There was a problem hiding this comment.
I thought about this a bit and ended up using:
- {{cssxref("position")}} property to
fixed, converting it to a positioned element so it can be positioned relative to the anchor's position on the page.
| In the CSS, we set the `infobox`'s: | ||
|
|
||
| - {{cssxref("position")}} property to `fixed`, so it can be positioned relative to the anchor's position in the page. | ||
| - {{cssxref("left")}} property to an {{cssxref("anchor()")}} function with a value of `right` — this has the effect of positioning the infobox's left edge flush to the right edge of its anchor. |
There was a problem hiding this comment.
| - {{cssxref("left")}} property to an {{cssxref("anchor()")}} function with a value of `right` — this has the effect of positioning the infobox's left edge flush to the right edge of its anchor. | |
| - {{cssxref("left")}} property to an {{cssxref("anchor()")}} function with a value of `right` — this tethers a positioned element to it's anchor and has the effect of positioning the infobox's left edge flush to the right edge of its anchor. |
There was a problem hiding this comment.
I ended up using this:
- {{cssxref("left")}} property to an {{cssxref("anchor()")}} function with a value of
right— this tethers the positioned element to its anchor, positioning its left edge flush to the anchor's right edge.
| - {{cssxref("position")}} property to `fixed`, so it can be positioned relative to the anchor's position in the page. | ||
| - {{cssxref("left")}} property to an {{cssxref("anchor()")}} function with a value of `right` — this has the effect of positioning the infobox's left edge flush to the right edge of its anchor. | ||
| - {{cssxref("align-self")}} property to [`anchor-center`](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#centering_on_the_anchor_using_anchor-center). This causes the infobox to be aligned centrally to the center of the anchor in the inline direction. | ||
| - {{cssxref("margin-left")}} to `10px` to create space between the infobox and its anchor. |
There was a problem hiding this comment.
| - {{cssxref("margin-left")}} to `10px` to create space between the infobox and its anchor. | |
| - {{cssxref("margin-left")}} to `10px` to create space between the anchor positioned element and its anchor. |
There was a problem hiding this comment.
Nice; updated
There was a problem hiding this comment.
Review of APIs and first half of css anchor-name property
There are edits in anchor name that need to be applied in multiple places, so stopping this PR review to work on the next one.
The HTML section and APIs are basically good (minor edits). The CSS properties will need a full review once updated.
|
|
||
| {{APIRef("HTML DOM")}}{{Non-standard_Header}} | ||
|
|
||
| The **`anchorElement`** property of the {{domxref("HTMLElement")}} interface returns a reference to the element's anchor element. This works only in the case of elements associated with their anchors via the [`anchor`](/en-US/docs/Web/HTML/Global_attributes/anchor) HTML attribute, not elements associated with their anchors via the {{cssxref("anchor-name")}} and {{cssxref("position-anchor")}} CSS properties. |
There was a problem hiding this comment.
| The **`anchorElement`** property of the {{domxref("HTMLElement")}} interface returns a reference to the element's anchor element. This works only in the case of elements associated with their anchors via the [`anchor`](/en-US/docs/Web/HTML/Global_attributes/anchor) HTML attribute, not elements associated with their anchors via the {{cssxref("anchor-name")}} and {{cssxref("position-anchor")}} CSS properties. | |
| The **`anchorElement`** property of the {{domxref("HTMLElement")}} interface returns a reference to the element's anchor element. This works only in the case of elements associated with their anchors via the [`anchor`](/en-US/docs/Web/HTML/Global_attributes/anchor) HTML attribute, not elements associated with their anchors via the CSS {{cssxref("anchor-name")}} and {{cssxref("position-anchor")}} properties. |
|
|
||
| The **`anchorElement`** property of the {{domxref("HTMLElement")}} interface returns a reference to the element's anchor element. This works only in the case of elements associated with their anchors via the [`anchor`](/en-US/docs/Web/HTML/Global_attributes/anchor) HTML attribute, not elements associated with their anchors via the {{cssxref("anchor-name")}} and {{cssxref("position-anchor")}} CSS properties. | ||
|
|
||
| For detailed information on anchor usage, see the [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module landing page. |
There was a problem hiding this comment.
| For detailed information on anchor usage, see the [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module landing page. | |
| For detailed information on anchor features and usage, see the [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module landing page and the [Using CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) guide. |
links on MDN are now sentence case (no longer title case).
the module lists the features. the guide is the usage.
There was a problem hiding this comment.
I did know this; I don't know why I wrote this as title case. Updated.
|
|
||
| #### HTML | ||
|
|
||
| In the HTML, we create a {{htmlelement("div")}} element with an [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of `example-anchor`. This will be our anchor element. We then include another `<div>` with a class of `infobox` and an [`anchor`](/en-US/docs/Web/HTML/Global_attributes/anchor) attribute set to `example-anchor`. This designates the first `<div>` as the second `<div>`'s anchor, associating the two together. |
There was a problem hiding this comment.
| In the HTML, we create a {{htmlelement("div")}} element with an [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of `example-anchor`. This will be our anchor element. We then include another `<div>` with a class of `infobox` and an [`anchor`](/en-US/docs/Web/HTML/Global_attributes/anchor) attribute set to `example-anchor`. This designates the first `<div>` as the second `<div>`'s anchor, associating the two together. | |
| In the HTML, we create a {{htmlelement("div")}} element with an [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of `example-anchor`. This will be our anchor element. We then include another `<div>` with a class of `infobox` and an [`anchor`](/en-US/docs/Web/HTML/Global_attributes/anchor) attribute set to `example-anchor`. This designates the first `<div>` as the anchor of the second `<div>`, associating the two together. |
- got rid of 's by switching word order.
| ```js | ||
| const posElem = document.querySelector(".infobox"); | ||
| const outputElem = document.querySelector(".output"); | ||
| outputElem.textContent = `The positioned element's anchor element is the ${posElem.anchorElement.id}.`; |
| ### Values | ||
|
|
||
| - `none` | ||
| - : The default value. Setting `anchor-name: none` on an element means that it is not identified as an anchor element, and the property therefore has no effect. |
There was a problem hiding this comment.
| - : The default value. Setting `anchor-name: none` on an element means that it is not identified as an anchor element, and the property therefore has no effect. | |
| - : The default value. Indicates the element is not an anchor element, disassociating the element from an anchor positioned elements. |
I am not 100% sure this is true, but my guess would be that if an element has an id, and a positioned element has a an anchor attribute, this would disassocate them. It can also be used with higher specificity to remove inhertied values. therefore it DOES have an effect.
There was a problem hiding this comment.
Bloody pedant ;-)
You do have a point tho, this does give none a use. I've updated the text to:
The default value. Setting
anchor-name: noneon an element means that it is not defined as an anchor element. If the element was previously defined as an anchor and associated with a positioned element, settinganchor-name: nonedisassociates the two.
|
|
||
| The positioned element needs to be placed after the anchor element in the DOM, or be a descendant of it, for this association to work. This `position` will be relative to the anchor rather than to the nearest ancestor positioned element. | ||
|
|
||
| If multiple anchor elements have the same anchor name set on them, and that name is referenced by a positioned element in its `position-anchor` property, it will be associated with the last anchor element in the source order. |
There was a problem hiding this comment.
| If multiple anchor elements have the same anchor name set on them, and that name is referenced by a positioned element in its `position-anchor` property, it will be associated with the last anchor element in the source order. | |
| If multiple anchor elements have the same anchor name set on them, and that name is referenced as the `position-anchor` property value of a positioned element, that positioned element will be associated with the last anchor element with that anchor name in the source order. |
|
|
||
| If multiple anchor elements have the same anchor name set on them, and that name is referenced by a positioned element in its `position-anchor` property, it will be associated with the last anchor element in the source order. | ||
|
|
||
| To place the positioned element in a specific location relative to the anchor element, a feature such as the {{cssxref("anchor()")}} function or the {{cssxref("inset-area")}} property is needed. |
There was a problem hiding this comment.
| To place the positioned element in a specific location relative to the anchor element, a feature such as the {{cssxref("anchor()")}} function or the {{cssxref("inset-area")}} property is needed. | |
| To tether and place a positioned element in a specific location relative to an anchor element, an anchor positioning feature such as the {{cssxref("anchor()")}} function or the {{cssxref("inset-area")}} property is needed. |
|
|
||
| ### Basic usage | ||
|
|
||
| The following example associates a positioned element with an anchor, and tethers the positioned element to the right of the anchor. |
There was a problem hiding this comment.
| The following example associates a positioned element with an anchor, and tethers the positioned element to the right of the anchor. | |
| This example associates and tethers a positioned element with an anchor, positioning the element to the right of the anchor. |
i think the "tether" isn't the location just that it is positioned somewhere, so detaching the "position" from the "tether" phrase.
There was a problem hiding this comment.
I agree, but I don't think we need to mention the association here; it is just a step on the way to the tethering, which is the ultimate goal. I've therefore updated the sentence to:
This example tethers a positioned element to an anchor, positioning the element to the right of the anchor.
Shorter, and reads better.
|
|
||
| ```css | ||
| .anchor { | ||
| anchor-name: --infobox; |
There was a problem hiding this comment.
| anchor-name: --infobox; | |
| anchor-name: --myAnchor; |
naming the anchor the class of the positioned element is going to confuse people. Let's change this is all chases.
There was a problem hiding this comment.
Awww man, this is gonna be a total pain. You are right, of course ;-)
I will go through now and update them in every page
|
|
||
| In addition, we set the `infobox`'s: | ||
|
|
||
| - {{cssxref("position")}} property to `fixed`, so it can be positioned relative to the anchor's position in the page. |
There was a problem hiding this comment.
see the comments near https://github.com/mdn/content/pull/33467/files#r1621290357; apply those here and in the other related pages. Please make each example a bit different so readers can see different inset property use cases and different anchor values in use.
There was a problem hiding this comment.
I've updated all these lines in the same way across all the different pages.
I don't want to go through and modify all the examples to be a bit different. There are plenty of different examples in other places, and I've got enough work to do on this as it is.
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
|
||
| try { | ||
| outputElem.textContent = `The positioned element's anchor element is the ${posElem.anchorElement.id}.`; | ||
| } catch(e) { |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
| } catch(e) { | |
| } catch (e) { |
| @@ -19,6 +19,8 @@ _Also inherits properties from its parent, {{DOMxRef("Element")}}._ | |||
| - : A string representing the access key assigned to the element. | |||
| - {{DOMxRef("HTMLElement.accessKeyLabel")}} {{ReadOnlyInline}} | |||
| - : Returns a string containing the element's assigned access key. | |||
| - {{DOMxRef("HTMLElement.anchorElement")}} {{ReadOnlyInline}} {{non-standard_inline}} | |||
There was a problem hiding this comment.
is the needed/intentional?
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