Editorial review: CSS Anchor Positioning landing page and guide #33058
+1,526
−0
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Preview URLs
Flaws (54)URL:
URL:
URL:
(comment last updated: 2024-06-19 08:31:29) |
This comment was marked as resolved.
This comment was marked as resolved.
mfreed7
reviewed
May 4, 2024
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
5 tasks
module landing page page suggestions
Edits to the first guide
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
estelle
reviewed
Jun 15, 2024
|
|
||
| ### Setting an `inset-area` | ||
|
|
||
| The {{cssxref("inset-area")}} property provides an alternative to the `anchor()` function for positioning elements relative to anchors. The `inset-area` property works on the concept of a 3x3 grid of tiles, with the anchor element being the center tile. The `inset-area` property can be used to position the anchor positioned element in any of the nine tiles, or have it span across two or three tiles. |
There was a problem hiding this comment.
Suggested change
| The {{cssxref("inset-area")}} property provides an alternative to the `anchor()` function for positioning elements relative to anchors. The `inset-area` property works on the concept of a 3x3 grid of tiles, with the anchor element being the center tile. The `inset-area` property can be used to position the anchor positioned element in any of the nine tiles, or have it span across two or three tiles. | |
| The {{cssxref("inset-area")}} property provides an alternative to the `anchor()` function for positioning elements relative to anchors. However, unlike `anchor()`, this method cannot be used to associate the positioned element with an anchor element. | |
| The `inset-area` property works on the concept of a 3x3 grid of tiles, with the anchor element being the center tile. The `inset-area` property can be used to position the anchor positioned element in any of the nine tiles, or have it span across two or three tiles. |
There was a problem hiding this comment.
i only suggested adding a sentence, not sur what github is hilighting there.
There was a problem hiding this comment.
No change. It doesn't work.
| <mxPoint x="960" y="760" as="targetPoint" /> | ||
| </mxGeometry> | ||
| </mxCell> | ||
| </root> |
There was a problem hiding this comment.
Suggested change
| </root> | |
| </root> | |
| <mxCell id="yv88gdYzeh7OAjEL50dU-1" value="<font style="font-size: 18px;">y-start</font>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1"> | |
| <mxGeometry x="530" y="180" width="60" height="20" as="geometry" /> | |
| </mxCell> | |
| <mxCell id="yv88gdYzeh7OAjEL50dU-3" value="" style="endArrow=none;html=1;rounded=0;fillColor=#f5f5f5;strokeColor=#666666;" edge="1" parent="1" target="yv88gdYzeh7OAjEL50dU-2"> | |
| <mxGeometry width="50" height="50" relative="1" as="geometry"> | |
| <mxPoint x="560" y="920" as="sourcePoint" /> | |
| <mxPoint x="560" y="200" as="targetPoint" /> | |
| </mxGeometry> | |
| </mxCell> | |
| <mxCell id="yv88gdYzeh7OAjEL50dU-2" value="<font style="font-size: 18px;">y-end</font>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1"> | |
| <mxGeometry x="520" y="920" width="60" height="20" as="geometry" /> | |
| </mxCell> | |
| <mxCell id="yv88gdYzeh7OAjEL50dU-4" value="<font style="font-size: 18px;">x-start</font>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1"> | |
| <mxGeometry x="220" y="480" width="60" height="20" as="geometry" /> | |
| </mxCell> | |
| <mxCell id="yv88gdYzeh7OAjEL50dU-5" value="<font style="font-size: 18px;">x-end</font>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1"> | |
| <mxGeometry x="990" y="480" width="60" height="20" as="geometry" /> | |
| </mxCell> |
adds x and y start and end
There was a problem hiding this comment.
Your source edit broke the XML, so I could no longer load it in draw.io. I went in and edited the diagram in draw.io, so it now includes the coordinate values.
There was a problem hiding this comment.
ok. Noted. Next time I'll upload the drawio to slack for your use so you can see what i mean without overriding eveything (i just opened the drawio, added a bit, and saved, which rewrote the whole thing.).
Comment on lines
451
to
453
|
|
||
| // clear all the previous inline styles out to begin with | ||
| infobox.style = ""; |
There was a problem hiding this comment.
Suggested change
| // clear all the previous inline styles out to begin with | |
| infobox.style = ""; |
there are no styles, and you can only set one value for insetArea, so i don't think this is necessary, but it can add confusion
There was a problem hiding this comment.
Yeah, I've tested this again, and it doesn't seem to make any difference if I remove it. I can't remember why I added it in the first place. Removed!
Co-authored-by: Estelle Weyl <[email protected]>
Co-authored-by: Estelle Weyl <[email protected]>
Co-authored-by: Estelle Weyl <[email protected]>
Co-authored-by: Estelle Weyl <[email protected]>
Co-authored-by: Estelle Weyl <[email protected]>
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>
…awio Co-authored-by: Estelle Weyl <[email protected]>
…purpose of <anchor-element>
estelle
reviewed
Jun 18, 2024
| - : The [`anchor-name`](/en-US/docs/Web/CSS/anchor-name) property value of the anchor element you want to position the element relative to. This is a `<dashed-ident>` value. If omitted, the element's **default anchor**, which is the anchor referenced in its [`position-anchor`](/en-US/docs/Web/CSS/position-anchor) property, is used. | ||
| If included, it supersedes the anchor named in `position-anchor` | ||
| - : The [`anchor-name`](/en-US/docs/Web/CSS/anchor-name) property value of the anchor element you want to position the element's side relative to. This is a `<dashed-ident>` value. If omitted, the element's **default anchor** is used. This is the anchor referenced in its [`position-anchor`](/en-US/docs/Web/CSS/position-anchor) property, or associated with the element via the [`anchor`](/en-US/docs/Web/HTML/Global_attributes/anchor) HTML attribute. | ||
| > **Note:** Specifying an `<anchor-element>` inside an `anchor()` function cannot be used to associate an element with an anchor, only to position an element relative to an anchor. The `position-anchor` CSS property or the `anchor` HTML attribute is still needed to create the association. You can position an element relative to multiple anchors by specifying different `<anchor-element>` values inside different `anchor()` functions on the same element (see the [`anchor()`](/en-US/docs/Web/CSS/anchor) function reference page for more details and a demo). However, a positioned element needs to be associated with a single anchor, which for example is the anchor the element will scroll with when the page scrolls. |
There was a problem hiding this comment.
Suggested change
| > **Note:** Specifying an `<anchor-element>` inside an `anchor()` function cannot be used to associate an element with an anchor, only to position an element relative to an anchor. The `position-anchor` CSS property or the `anchor` HTML attribute is still needed to create the association. You can position an element relative to multiple anchors by specifying different `<anchor-element>` values inside different `anchor()` functions on the same element (see the [`anchor()`](/en-US/docs/Web/CSS/anchor) function reference page for more details and a demo). However, a positioned element needs to be associated with a single anchor, which for example is the anchor the element will scroll with when the page scrolls. | |
| > **Note:** Specifying an `<anchor-element>` positions the element relative to that anchor, but does not provide element association. Only the `position-anchor` property and `anchor` attributes create the association. While you can position an element's sides relative to multiple anchors by specifying [different `<anchor-element>` values](/en-US/docs/Web/CSS/anchor#examples) on the same element, the positioned element is only associated with a single anchor. |
There was a problem hiding this comment.
Lovely wording, much more succinct. I've used it verbatim, except that I've linked to the exact demo that demonstrates multiple <anchor-element> values in the other PR.
|
|
||
| {{CSSRef}} | ||
|
|
||
| When using [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning), an important consideration is ensuring that anchor-positioned elements will always appear in a convenient place for the user to interact with them if at all possible, regardless of where the anchor is positioned. For example, when you scroll the page, anchors and their associated positioned elements will move towards the top of the viewport. When a positioned element starts to overflow the viewport, you will want to change its position to put it back on the screen again, for example on the opposite side of the anchor. |
There was a problem hiding this comment.
Suggested change
| When using [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning), an important consideration is ensuring that anchor-positioned elements will always appear in a convenient place for the user to interact with them if at all possible, regardless of where the anchor is positioned. For example, when you scroll the page, anchors and their associated positioned elements will move towards the top of the viewport. When a positioned element starts to overflow the viewport, you will want to change its position to put it back on the screen again, for example on the opposite side of the anchor. | |
| When using [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning), an important consideration is ensuring that anchor-positioned elements always appear in a convenient place for the user to interact with them, if at all possible, regardless of where the anchor is positioned. For example, when you scroll the page, anchors and their associated positioned elements will move toward the edge of the viewport. When a positioned element starts to overflow the viewport, you will want to change its position to put it back on the screen again, for example on the opposite side of the anchor. |
|
|
||
| Alternatively, in some situations it may be preferrable to just hide overflowing positioned elements — for example, if their anchors are offsceen their content might not make sense. | ||
|
|
||
| This guide explains how to use the mechanisms CSS anchor positioning provides to manage these issues — **position try options** and **conditional hiding**. Position try options provide alternative positions for the browser to try placing elements in as they start to overflow, to keep them on-screen. Conditional hiding allows conditions to be specified under which the anchor or a postioned element will be hidden. |
There was a problem hiding this comment.
Suggested change
| This guide explains how to use the mechanisms CSS anchor positioning provides to manage these issues — **position try options** and **conditional hiding**. Position try options provide alternative positions for the browser to try placing elements in as they start to overflow, to keep them on-screen. Conditional hiding allows conditions to be specified under which the anchor or a postioned element will be hidden. | |
| This guide explains how to use CSS anchor positioning mechanisms to manage these issues — **position try options** and **conditional hiding**. Position try options provide alternative positions for the browser to try as they start to overflow, to keep them on-screen. Conditional hiding allows conditions to be specified under which the anchor or a positioned element will be hidden. |
|
|
||
| ## Feature summary | ||
|
|
||
| If a tool tip is fixed to the top-right of a UI element, if the user scrolls the content so that UI feature is in the top right corner of the viewport, that UI feature's tooltip will scroll off the screen. CSS anchor positioning solves such problems. The module's {{cssxref("position-try-options")}} property specifies one or more alternative position try options for the positioned element for the browser to try, to prevent it from overflowing. Try options can be specified using predefined try options, {{cssxref("inset-area")}} values (wrapped inside an [`inset-area()`](/en-US/docs/Web/CSS/inset-area_function) function), or custom options defined using the {{cssxref("@position-try")}} at-rule. |
There was a problem hiding this comment.
Suggested change
| If a tool tip is fixed to the top-right of a UI element, if the user scrolls the content so that UI feature is in the top right corner of the viewport, that UI feature's tooltip will scroll off the screen. CSS anchor positioning solves such problems. The module's {{cssxref("position-try-options")}} property specifies one or more alternative position try options for the positioned element for the browser to try, to prevent it from overflowing. Try options can be specified using predefined try options, {{cssxref("inset-area")}} values (wrapped inside an [`inset-area()`](/en-US/docs/Web/CSS/inset-area_function) function), or custom options defined using the {{cssxref("@position-try")}} at-rule. | |
| If a tooltip is fixed to the top-right of a UI element, when the user scrolls the content so that UI feature is in the top-right corner of the viewport, that UI feature's tooltip will have scrolled off the screen. CSS anchor positioning solves such problems. The module's {{cssxref("position-try-options")}} property specifies one or more alternative position try options for the positioned element for the browser to try to prevent it from overflowing. Try options can be specified using [predefined try option](#predefinted_try_options), [`inset-area` values](#using_inset-area_try_options) wrapped inside an `inset-area()` function, or [custom options](#custom_try_options) defined using the {{cssxref("@position-try")}} at-rule. |
let's make this kind of a table of contents instead, since we discuss them below.
There was a problem hiding this comment.
I've used your updates, but then I broke up the last part and presented it as a bulleted list, to make the paragraph a bit shorter and the different mechanisms easier to parse.
|
|
||
| In addition, the {{cssxref("position-try-order")}} property allows you to specify various options that result in an available position try option being set in preference to the element's initial positioning. For example, you might want to initially display the element in a space that has more available height or width. | ||
|
|
||
| > **Note:** The shorthand property {{cssxref("position-try")}} can be used to specify `position-try-order` and `position-try-options` values in a single declaration. |
There was a problem hiding this comment.
then let's take it out of a note, since it's just being mentioned, and not yet fully understood.
Comment on lines
254
to
256
| @position-try <dashed-ident> { | ||
| declaration-list | ||
| } |
There was a problem hiding this comment.
Suggested change
| @position-try <dashed-ident> { | |
| declaration-list | |
| } | |
| @position-try --try-option-name { | |
| descriptor-list | |
| } |
more guide like
There was a problem hiding this comment.
ok, updated
Comment on lines
259
to
267
| - {{cssxref("dashed-ident")}} | ||
| - : The developer-defined name for the position try option. This name can then be specified within a comma-separated list of try options within the {{cssxref("position-try-options")}} property value. | ||
| - `declaration-list` | ||
| - : A list of descriptors defining the behavior of the custom try option, for example, how it will result in the positioned element being placed or sized. The limited list of property descriptors allowed includes: | ||
| - {{cssxref("position-anchor")}} | ||
| - {{cssxref("inset-area")}} | ||
| - [Inset properties](/en-US/docs/Glossary/Inset_properties) | ||
| - Sizing properties ({{cssxref("width")}}, {{cssxref("block-size")}}, etc.) | ||
| - Self-alignment properties ({{cssxref("align-self")}}, {{cssxref("justify-items")}}, etc.; see [Centering on the anchor using `anchor-center`](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#centering_on_the_anchor_using_anchor-center)) |
There was a problem hiding this comment.
Suggested change
| - {{cssxref("dashed-ident")}} | |
| - : The developer-defined name for the position try option. This name can then be specified within a comma-separated list of try options within the {{cssxref("position-try-options")}} property value. | |
| - `declaration-list` | |
| - : A list of descriptors defining the behavior of the custom try option, for example, how it will result in the positioned element being placed or sized. The limited list of property descriptors allowed includes: | |
| - {{cssxref("position-anchor")}} | |
| - {{cssxref("inset-area")}} | |
| - [Inset properties](/en-US/docs/Glossary/Inset_properties) | |
| - Sizing properties ({{cssxref("width")}}, {{cssxref("block-size")}}, etc.) | |
| - Self-alignment properties ({{cssxref("align-self")}}, {{cssxref("justify-items")}}, etc.; see [Centering on the anchor using `anchor-center`](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#centering_on_the_anchor_using_anchor-center)) | |
| The try option name is a {{cssxref("dashed-ident")}} name you create. This is the name you will include within your comma-separated list of try options. If multiple `@position-try` rules have the same name, the last one in the document order overrides the others. Avoid using the anchor or custom property names; it doesn't invalidate the at-rule, but will make your CSS very difficult to follow. | |
| The descriptor list defines the property values for that individual custom try option, including how the positioned element should be placed and sized, and any margins. The limited list of property descriptors allowed includes: | |
| - inset properties | |
| - `inset-area` | |
| - margin properties | |
| - sizing properties | |
| - [self-alignment](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#centering_on_the_anchor_using_anchor-center) properties | |
| - `position-anchor` | |
| The values you include in the at-rule get applied to the positioned element if the named custom-try option gets applied. If any of the property descriptors were set were previously set on the positioned element, that property's value gets overridden by the descriptor's value. Including the named anchor if `position-anchor` is included in the at-rule. | |
| If the user scrolls, causing a different try option or no try option to be applied, all the values from the no-longer applied try option are, well, no longer applied. |
There was a problem hiding this comment.
Let's explain what it does without explaining without expounding on the details from the reference page.
I not sure about the position anchor descriptor, but it looks dangerous to me. we could append:
For this reason, you may want to omit the
position-anchordescriptor.
to the last paragraph, or
The {{cssxref("position-anchor")}} descriptor defines the anchor element this try-option will position the positioned element relative to and be associated with. Be intentional when using this descriptor; it is useful but powerful.
or
The {{cssxref("position-anchor")}} descriptor provides the name of the anchor you want the try option to try positioning the element relative to. It does not need to be the same value as the positioned element's anchor, nor does it associate the element to this anchor in this case.
i don't know what it does 🤷 and my testing isn't teaching me.
There was a problem hiding this comment.
I've done something similar to your suggestion, but with a bunch of tweaks.
I would rather not mention the gory details of setting position-anchor inside custom try options here, and maybe leave that to the @position-try page. I did try to create a demo using that to do something interesting, like position the element relative to the viewport when the anchor goes off-screen, but then position it back on the anchor when it comes back on-screen.
But, they didn't work — the element is no longer applied to the anchor so therefore the effects of the position-try option could not be reversed. I gave it to the Chrome folks to look at and I think they are investigating it. Upshot is, yes, it is pretty dangerous.
| } | ||
|
|
||
| @position-try --custom-bottom-right { | ||
| inset-area: bottom right; |
There was a problem hiding this comment.
here is an example of inset properites working: https://codepen.io/utilitybend/pen/rNgjrZo (the right: anchor(left); from the @-rule is applied when the right three radios are checked.
|
|
||
| If none of the try options succeed in stopping the positioned element from overflowing, the position will revert to the initial `inset-area: top;` value. | ||
|
|
||
| > **Note:** When a position try option is applied, its values will override the default values set on the positioned element. For example, the default `width` set on the positioned element is `200px`, but when the `--custom-right` position try option is applied, its width is set to `100px`. |
There was a problem hiding this comment.
suggest including this in the prose above (see last line of comment on line 267 going from lines 259 to 272
There was a problem hiding this comment.
I don't agree. The previous description I added covers this stuff in a more general way; the items are specific to the demo.
Comment on lines
377
to
388
| `position-try-order` has five possible values: | ||
|
|
||
| - `normal` | ||
| - : The default. No position try options will be tried when the element is first displayed. | ||
| - `most-height` | ||
| - : The position try option that gives the element's containing block the most height will be applied. | ||
| - `most-width` | ||
| - : The position try option that gives the element's containing block the most width will be applied. | ||
| - `most-block-size` | ||
| - : The position try option that gives the element's containing block the most size in the block direction will be applied. | ||
| - `most-inline-size` | ||
| - : The position try option that gives the element's containing block the most size in the inline direction will be applied. |
There was a problem hiding this comment.
Suggested change
| `position-try-order` has five possible values: | |
| - `normal` | |
| - : The default. No position try options will be tried when the element is first displayed. | |
| - `most-height` | |
| - : The position try option that gives the element's containing block the most height will be applied. | |
| - `most-width` | |
| - : The position try option that gives the element's containing block the most width will be applied. | |
| - `most-block-size` | |
| - : The position try option that gives the element's containing block the most size in the block direction will be applied. | |
| - `most-inline-size` | |
| - : The position try option that gives the element's containing block the most size in the inline direction will be applied. | |
| You can use the `position-try-order` to request that the try-option with the `most-height`, `most-width`,`most-block-size`, or `most-inline-size` gets applied, or to remove the size-choosing effects of any `position-try-order` value and be `normal`. |
shrinking to be guide-ish - can check the property page for the reference part.
There was a problem hiding this comment.
I do agree with this, but I've ended up combining your suggestion with the previous paragraph, otherwise it sounds a bit repetitious.
estelle
reviewed
Jun 19, 2024
| - `most-inline-size` | ||
| - : The position try option that gives the element's containing block the most size in the inline direction will be applied. | ||
|
|
||
| Let's have a look at a demo that shows the effect of this property. The HTML is the same as in previous demos, except that we've added a `<form>` containing radio buttons, allowing you to select different values of `position-try-order` to see what their effects are. |
There was a problem hiding this comment.
Suggested change
| Let's have a look at a demo that shows the effect of this property. The HTML is the same as in previous demos, except that we've added a `<form>` containing radio buttons, allowing you to select different values of `position-try-order` to see what their effects are. | |
| Let's have a look at a demo that shows the effect of this property. The HTML is the same as in previous examples, except that we've added a `<form>` containing radio buttons, allowing you to select different values of `position-try-order` to see their effects. |
Comment on lines
504
to
512
| In some situations, you might want to hide an anchor-positioned element. For example, if the anchor element is clipped because it's too close to the edge of the viewport, you might want to just hide its associated element altogether. The {{cssxref("position-visibility")}} property allows you to specify conditions under which positioned elements are hidden. It can take the following values: | ||
|
|
||
| - `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**. | ||
| - `no-overflow` | ||
| - : If the positioned element starts to overflow its containing element or the viewport, it will be strongly hidden. | ||
|
|
There was a problem hiding this comment.
Suggested change
| In some situations, you might want to hide an anchor-positioned element. For example, if the anchor element is clipped because it's too close to the edge of the viewport, you might want to just hide its associated element altogether. The {{cssxref("position-visibility")}} property allows you to specify conditions under which positioned elements are hidden. It can take the following values: | |
| - `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**. | |
| - `no-overflow` | |
| - : If the positioned element starts to overflow its containing element or the viewport, it will be strongly hidden. | |
| In some situations, you might want to hide an anchor-positioned element. For example, if the anchor element is clipped because it's too close to the edge of the viewport, you might want to just hide its associated element altogether. The {{cssxref("position-visibility")}} property allows you to specify conditions under which positioned elements are hidden. | |
| By default, the positioned element is `always` displayed if it can be. The `no-overflow` value will **strongly hide** the positioned element if any part of the positioned element itself overflows. With `anchors-visible`, if the anchor is at all visible, the positioned element behaves as normal; only when the anchor is completely hidden because it scrolled out of view or is covered by another element will the positioned element be strongly hidden. | |
This property is a little confusing because no-overflow is based on the full visibility of the PosEl, and anchors-visible is based on any visibility of the anchor. Trying to make that clear (I had to triple check).
There was a problem hiding this comment.
Reasonable approach, but I found your text to be a bit of a mouthful. I've written it slightly differently and separated the anchors-visible description into a separate paragraph to further accentuate that it is doing something a bit different.
| - `no-overflow` | ||
| - : If the positioned element starts to overflow its containing element or the viewport, it will be strongly hidden. | ||
|
|
||
| > **Note:** A strongly hidden element acts as though it and its descendant elements have a {{cssxref("visibility")}} value of `hidden` set, regardless of what their actual `visibility` value is. |
There was a problem hiding this comment.
this can be regular text as it's a definition. It doesn't need to be a note.
There was a problem hiding this comment.
good call; denotified!
|
|
||
| Let's see this property in action. | ||
|
|
||
| This example uses the same HTML and CSS as in the previous examples, with the infobox tethered to the anchor's bottom edge. The infobox is given `position-visibility: no-overflow;` to hide it completely when it is scrolled upwards to the point where it starts to overflow the viewport. |
There was a problem hiding this comment.
Suggested change
| This example uses the same HTML and CSS as in the previous examples, with the infobox tethered to the anchor's bottom edge. The infobox is given `position-visibility: no-overflow;` to hide it completely when it is scrolled upwards to the point where it starts to overflow the viewport. | |
| This example uses the same HTML and CSS as in the previous examples, with the infobox tethered to the anchor's bottom edge. The infobox is given `position-visibility: no-overflow;` to hide it completely when it is scrolled to the point where the anchor element starts to overflow the viewport. |
There was a problem hiding this comment.
make it clearer that it's based on the anchor's visibility not the posEl's
There was a problem hiding this comment.
This isn't correct; no-overflow hides the posEl based on its own visibility. anchors-visible hides it based on the anchor's visibility.
|
|
||
| Scroll down the page and note how the positioned element is hidden once it reaches the top of the viewport: | ||
|
|
||
| {{ EmbedLiveSample("Conditional hiding using `position-visibility`", "100%", "250") }} |
There was a problem hiding this comment.
Suggested change
| {{ EmbedLiveSample("Conditional hiding using `position-visibility`", "100%", "250") }} | |
| {{ EmbedLiveSample("Conditional hiding using `position-visibility`", "100%", "200") }} |
I think i suggested adding ipsum in a previous comment. Alternatively, we can just make the example shorter so it scrolls off in both directions.
There was a problem hiding this comment.
I don't think this is needed. It mattered more for the slightly more complex demo on the position-visibility ref page, but I fixed it there.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
CSS Anchor Positioning is set to be released in Chrome 125 (see the associated Chrome Status entry).
This PR (part of a series) adds the following content:
PR series content index
I have split this content work into multiple PRs as an experiment, to see if it makes the review process easier. They should all be merged together when they are ready.
PR1 (this PR):
PR2 (see #33467):
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-visibilitypropertyPR3 (see #33493):
anchor()functionanchor()as a value:topleftbottomrightinset-block-startinset-block-endinset-inline-startinset-inline-endinset-blockinset-inlineinsetanchor-centervalue, which is supported on the following properties:justify-selfalign-selfjustify-itemsalign-itemsplace-itemsplace-selfPR4 (see #33511)
anchor-size()functionanchor-size()as a value:widthheightmin-widthmin-heightmax-widthmax-heightblock-sizeinline-sizemin-block-sizemin-inline-sizemax-block-sizemax-inline-sizeinset-areapropertyPR5 (see #33609):
position-try-optionspropertyinset-area()function (only needs to be a short stub page)position-try-orderpropertyposition-tryshorthand property@position-tryat-ruleCSSPositionTryRuleCSSOM interface and its properties:namestyleCSSPositionTryDescriptorsCSSOM interface.Motivation
Additional details
Related issues and pull requests