Editorial review: CSS anchor positioning 3: sizing and positioning part 1 #33493
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
github-actions
bot
added
Content:CSS
Preview URLs (19 pages)
Flaws (22)Note! 12 documents with no flaws that don't need to be listed. 🎉 URL:
URL:
URL:
URL:
URL:
URL:
URL:
(comment last updated: 2024-05-31 14:25:51) |
chrisdavidmills
changed the title
chrisdavidmills
changed the title
mfreed7
reviewed
May 10, 2024
chrisdavidmills
changed the title
estelle
reviewed
May 30, 2024
| @@ -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.
Suggested change
| 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.
Suggested change
| - : 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.
Suggested change
| 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
estelle
reviewed
Jun 3, 2024
| @@ -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.
| @@ -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
| @@ -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.
Suggested change
| - : 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). |
| @@ -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.
Comment on lines
+44
to
+55
| - : 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.
Suggested change
| - : 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.
| @@ -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**. | |||
| @@ -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.
| @@ -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. | |||
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; 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