Editorial review: CSS anchor positioning 3: sizing and positioning part 1 #33493
Conversation
github-actions
bot
added
Content:CSS
Preview URLs (19 pages)
Flaws (30)Note! 8 documents with no flaws that don't need to be listed. 🎉 URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
(comment last updated: 2024-06-05 08:27:11) |
chrisdavidmills
changed the title
chrisdavidmills
changed the title
chrisdavidmills
changed the title
| @@ -22,6 +22,7 @@ align-items: stretch; | |||
|
|
|||
| /* Positional alignment */ | |||
| /* align-items does not take left and right values */ | |||
| align-items: anchor-center; /* Center items with respect to an associated anchor element */ | |||
There was a problem hiding this comment.
remove all occurrences of new comments in syntax.
| align-items: anchor-center; /* Center items with respect to an associated anchor element */ | |
| align-items: anchor-center; |
There was a problem hiding this comment.
Done, for all the -items and -self properties
| @@ -79,6 +80,8 @@ align-items: unset; | |||
| - : Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were `start`. | |||
| - `unsafe` | |||
| - : Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored. | |||
| - `anchor-center` {{experimental_inline}} | |||
| - : In the case of **anchor-positioned** elements (see [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning)), the `anchor-center` value is used to align the items to the center of the associated anchor element in the block direction. | |||
There was a problem hiding this comment.
| - : In the case of **anchor-positioned** elements (see [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning)), the `anchor-center` value is used to align the items to the center of the associated anchor element in the block direction. | |
| - : In the case of **anchor-positioned** elements (see [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/USING/ANCHOR CENTER)), aligns the items to the center of the associated anchor element in the block direction. |
- Change the case of links to all articles / blogs / modules / guides / etc. to sentence case
- when possible, link to relevant section
- don't repeat value name in value description unless necessary: just define the value succinctly
There was a problem hiding this comment.
done, done, and done
files/en-us/web/css/anchor/index.md
Outdated
|
|
||
| {{CSSRef}} | ||
|
|
||
| The **`anchor()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) can be used as a value for an **anchor-positioned** element's [inset properties](#properties_that_accept_anchor_function_values), to position it relative to the edges of its associated **anchor element**. |
There was a problem hiding this comment.
| The **`anchor()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) can be used as a value for an **anchor-positioned** element's [inset properties](#properties_that_accept_anchor_function_values), to position it relative to the edges of its associated **anchor element**. | |
| The **`anchor()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) is used as a value for [inset properties](#properties_that_accept_anchor_function_values) on elements that are absolutely positioned. The {{cssxref("length")}} value returned positions the element that distance, in the direction of the inset property, relative to the edges of its associated **anchor element** or the XXX if the element is not tethered to an anchor element. |
My feedback in made in the form of a suggestion, but is not a suggestion. These are the topics that need to be covered in this summary sentence / paragraph. But my mind is fuzzy, so the suggestion is not well written..
- we need to create an inset properties page
- if used on an absolute / fixed element that doesn't have an anchor, what is the effect?
- The inset properties section below - i edited that section in a different PR. Apply that edit here too.
There was a problem hiding this comment.
I think it is a bit overkill to try to explain all this upfront in the first paragraph. It is all explained further down the page, and I'd prefer to make the opening paragraph a concise description of the property's function.
I've added a description of what happens if there is no anchor element associated with the positioned element to the Description section.
I've also updated the list of inset properties to be presented in the same way as in the guide page you looked at previously.
files/en-us/web/css/anchor/index.md
Outdated
| The specification also defines `inside` and `outside` values, which are currently not supported by any browser. | ||
|
|
||
| - {{cssxref("length-percentage")}} {{optional_inline}} | ||
| - : This is a fallback value that specifies what the function should return if the `anchor()` function is invalid. |
There was a problem hiding this comment.
if something is invalid, it's ignored. i fixed this on another page, but right now i can't remember the verbiage.
There was a problem hiding this comment.
Found it:
Specifies a fallback value the function should resolve to if the
anchor()function would otherwise be invalid.
I'll use the same wording form for anchor-size() too
| @@ -22,6 +22,7 @@ align-items: stretch; | |||
|
|
|||
| /* Positional alignment */ | |||
| /* align-items does not take left and right values */ | |||
| align-items: anchor-center; | |||
There was a problem hiding this comment.
make this last within this first group as, of these values, for this property, it is the least supported, and right now would be the least used option.
There was a problem hiding this comment.
Done, for all six properties that accept this value.
| @@ -79,6 +80,8 @@ align-items: unset; | |||
| - : Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were `start`. | |||
| - `unsafe` | |||
| - : Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored. | |||
| - `anchor-center` {{experimental_inline}} | |||
There was a problem hiding this comment.
put before safe if safe anchor-center is a valid value
There was a problem hiding this comment.
Yup, that's valid. Done, for all four of the relevant align/justify values.
| @@ -79,6 +80,8 @@ align-items: unset; | |||
| - : Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were `start`. | |||
| - `unsafe` | |||
| - : Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored. | |||
| - `anchor-center` {{experimental_inline}} | |||
| - : In the case of **anchor-positioned** elements (see [Centering on the anchor using `anchor-center`](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#centering_on_the_anchor_using_anchor-center)), aligns the items to the center of the associated anchor element in the block direction. | |||
There was a problem hiding this comment.
| - : In the case of **anchor-positioned** elements (see [Centering on the anchor using `anchor-center`](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#centering_on_the_anchor_using_anchor-center)), aligns the items to the center of the associated anchor element in the block direction. | |
| - : In the case of [**anchor-positioned**](link to module) elements, aligns the items to the center of the associated anchor element in the block direction. 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.
Updated here, and made the equivalent changes to the other 4 places it appears too.
| @@ -22,6 +22,7 @@ align-items: stretch; | |||
|
|
|||
There was a problem hiding this comment.
reviews for this page apply to align, place and justify pages.
files/en-us/web/css/anchor/index.md
Outdated
| - : Specifies the side of the anchor element that the side of the positioned element denoted by the inset property will be positioned relative to. This can be expressed using the following values: | ||
|
|
||
| - Physical values: | ||
| - `top`: The top of the anchor element. | ||
| - `right`: The right of the anchor element. | ||
| - `bottom`: The bottom of the anchor element. | ||
| - `left`: The left of the anchor element | ||
| - Logical values: | ||
| - `start`: The logical start of the anchor element's block axis. | ||
| - `end`: The logical end of the anchor element's block axis. | ||
| - `self-start`: The logical start of the anchor element's inline axis. | ||
| - `self-end`: The logical end of the anchor element's inline axis. |
There was a problem hiding this comment.
| - : Specifies the side of the anchor element that the side of the positioned element denoted by the inset property will be positioned relative to. This can be expressed using the following values: | |
| - Physical values: | |
| - `top`: The top of the anchor element. | |
| - `right`: The right of the anchor element. | |
| - `bottom`: The bottom of the anchor element. | |
| - `left`: The left of the anchor element | |
| - Logical values: | |
| - `start`: The logical start of the anchor element's block axis. | |
| - `end`: The logical end of the anchor element's block axis. | |
| - `self-start`: The logical start of the anchor element's inline axis. | |
| - `self-end`: The logical end of the anchor element's inline axis. | |
| - : Specifies the side of the anchor element that the side of the positioned element denoted by the inset property will be positioned relative to. Valid values include: | |
| - `top`: The top of the anchor element. | |
| - `right`: The right of the anchor element. | |
| - `bottom`: The bottom of the anchor element. | |
| - `left`: The left of the anchor element | |
| - `start`: The logical start of the anchor element's block axis. | |
| - `end`: The logical end of the anchor element's block axis. | |
| - `self-start`: The logical start of the anchor element's inline axis. | |
| - `self-end`: The logical end of the anchor element's inline axis. | |
| - `center`: The center of the axis of the inset property on which the `anchor()` function is set. | |
| - {{cssxref("percentage")}}: Specifies the distance, as a percentage, from the start of the axis of the inset property on which the `anchor()` function is set. | |
| For {{glossary("physical properties", "physical")}}, inset values, any physical anchor side value uses has to be along the same axis as the inset value being set. |
preferably as a DL
There was a problem hiding this comment.
move everything else to description
| ```css | ||
| /* property: anchor(anchor-side) */ | ||
| top: anchor(bottom); | ||
| inset-block-end: anchor(start); |
There was a problem hiding this comment.
add a % value.
Also used anchor in a calc fuctnion.
There was a problem hiding this comment.
done and done
files/en-us/web/css/bottom/index.md
Outdated
| @@ -59,6 +63,10 @@ bottom: unset; | |||
| - for _absolutely positioned elements_, the position of the element is based on the {{Cssxref("top")}} property, while `height: auto` is treated as a height based on the content; or if `top` is also `auto`, the element is positioned where it should vertically be positioned if it were a static element. | |||
| - for _relatively positioned elements_, the distance of the element from its normal position is based on the {{Cssxref("top")}} property; or if `top` is also `auto`, the element is not moved vertically at all. | |||
|
|
|||
| - {{cssxref("anchor()")}} {{experimental_inline}} | |||
|
|
|||
| - : Resolves to a {{cssxref("<length>")}} value relative to the position of the top and/or bottom edges of an absolutely- or fixed-positioned element's associated **anchor element**. | |||
There was a problem hiding this comment.
done, on all relevant pages
| @@ -329,6 +329,17 @@ The following functions are used as a value of different `animation-timeline` pr | |||
| - {{cssxref("animation-timeline/view", "view()")}} | |||
| - : Sets the {{cssxref("animation-timeline")}} of an element to an _anonymous view progress timeline_. | |||
|
|
|||
| ## Anchor positioning functions | |||
|
|
|||
| The following functions are used when positioning and sizing **anchor-positioned elements** relative to the location and size of their associated **anchor elements**, and defining **position try options**. For more details and usage information, 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. | |||
There was a problem hiding this comment.
put the "for more info" after the functions.
| @@ -44,6 +48,8 @@ inset-block: unset; | |||
|
|
|||
| The `inset-block` property takes the same values as the {{cssxref("left")}} property. | |||
|
|
|||
| Note that setting the same {{cssxref("anchor()")}} value for both constituent properties (for example, `inset-block: anchor(start)`) may produce strange or unexpected results, as the values will both be relative to a single line on an anchor element (e.g. one of its sides) rather than two separate sides of the viewport or a containing block. | |||
There was a problem hiding this comment.
this is kind of "out of the blue" here, and doesn't make sense as a stand alone.
There was a problem hiding this comment.
Deleted, here and in the other shorthand inset pages.
I'm going to leave these notes for now. It is hard to explain what I mean, and to fully explain it would require me to add a weird example to each page that I am not convinced would be very useful. I don't think it is actually that important. It won't stop anyone from using anchor positioning; at worst, they might experience some weird behavior in a very small number of cases, which they can easily fix.
If it does end up being an issue, we can revisit it later.
| @@ -44,6 +48,8 @@ inset-inline: unset; | |||
|
|
|||
| The `inset-inline` property takes the same values as the {{cssxref("left")}} property. | |||
|
|
|||
| Note that setting the same {{cssxref("anchor()")}} value for both constituent properties (for example, `inset-inline: anchor(start)`) may produce strange or unexpected results, as the values will both be relative to a single line on an anchor element (e.g. one of its sides) rather than two separate sides of the viewport or a containing block. | |||
There was a problem hiding this comment.
See above comment.
![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>
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:
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-selfDo not merge until #33058 is merged.
Motivation
Additional details
Related issues and pull requests