Editorial review: CSS Anchor Positioning landing page and guide #33058
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,79 @@ | ||||||||||
| --- | ||||||||||
| title: CSS anchor positioning | ||||||||||
| slug: Web/CSS/CSS_anchor_positioning | ||||||||||
| page-type: css-module | ||||||||||
| spec-urls: https://drafts.csswg.org/css-anchor-position-1/ | ||||||||||
| --- | ||||||||||
|
|
||||||||||
| {{CSSRef}} | ||||||||||
|
|
||||||||||
| The **CSS anchor positioning** module defines features that allow you to tether elements together — defining **anchor elements** and mechanisms by which other elements can be positioned and sized relative to them. | ||||||||||
|
|
||||||||||
| In addition, the specification provides mechanisms to: | ||||||||||
|
|
||||||||||
| - Declare conditions under which anchor-positioned elements should be hidden, to help in situations where it is not appropriate to tether them to anchor elements. | ||||||||||
| - Specify a set of alternative positions that the browser can try rendering the anchor-positioned element in, if the default rendering position causes it to overflow its containing block and/or be rendered offscreen. | ||||||||||
|
There was a problem hiding this comment.
Suggested change
moved this up There was a problem hiding this comment. I prefer it like this; I think your paragraph is a bit harder to read, as it is a big mass of text, plus you seem to miss out the information in the first bullet. I have used some of your wording in the larger bullet, so I thought it improved on my original description. I also swapped the order of the bullets as the first one is more important. |
||||||||||
|
|
||||||||||
| ## Reference | ||||||||||
chrisdavidmills marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||
|
|
||||||||||
| ### Properties | ||||||||||
|
|
||||||||||
| - {{cssxref("anchor-name")}} | ||||||||||
| - {{cssxref("anchor-scope")}} | ||||||||||
| - {{cssxref("inset-area")}} | ||||||||||
| - {{cssxref("position-anchor")}} | ||||||||||
| - {{cssxref("position-try")}} | ||||||||||
| - {{cssxref("position-try-options")}} | ||||||||||
| - {{cssxref("position-try-order")}} | ||||||||||
| - {{cssxref("position-visibility")}} | ||||||||||
|
|
||||||||||
| ### At-rules and descriptors | ||||||||||
|
|
||||||||||
| - {{cssxref("@position-try")}} | ||||||||||
|
There was a problem hiding this comment. if the There was a problem hiding this comment. They can be used as both CSS properties and descriptors. The thing is, there are about another 40 properties that can also be used as descriptors inside @position-try. Do we really need to list them all here? I feel like it would be confusing. There was a problem hiding this comment. I'll let you know when i get to that page ;) |
||||||||||
|
|
||||||||||
| ### Functions | ||||||||||
|
|
||||||||||
| - [`anchor()`](/en-US/docs/Web/CSS/anchor) | ||||||||||
| - [`anchor-size()`](/en-US/docs/Web/CSS/anchor-size) | ||||||||||
| - [`inset-area()`](/en-US/docs/Web/CSS/inset-area_function) | ||||||||||
|
|
||||||||||
estelle marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||
| ### Interfaces | ||||||||||
|
|
||||||||||
| - {{domxref("CSSPositionTryRule")}} | ||||||||||
|
|
||||||||||
| ## Guides | ||||||||||
|
|
||||||||||
| - [Using CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) | ||||||||||
| - : A introductory guide to using all the features of the CSS Anchor Positioning specification. | ||||||||||
|
|
||||||||||
| ## Related concepts | ||||||||||
|
|
||||||||||
| - Positioning properties that can take an [`anchor()`](/en-US/docs/Web/CSS/anchor) function as a value: | ||||||||||
| - The {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("bottom")}}, and {{cssxref("right")}} physical properties. | ||||||||||
| - The {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, and {{cssxref("inset-inline-end")}} logical properties. | ||||||||||
| - The {{cssxref("inset-block")}}, {{cssxref("inset-inline")}}, and {{cssxref("inset")}} shorthand properties. | ||||||||||
chrisdavidmills marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||
| - Alignment properties that can take the `anchor-center` value: | ||||||||||
| - {{cssxref("align-items")}} | ||||||||||
| - {{cssxref("align-self")}} | ||||||||||
| - {{cssxref("justify-items")}} | ||||||||||
| - {{cssxref("justify-self")}} | ||||||||||
estelle marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||
| - Sizing properties that can take an [`anchor-size()`](/en-US/docs/Web/CSS/anchor) function as a value: | ||||||||||
| - The {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, and {{cssxref("max-height")}} physical properties. | ||||||||||
| - The {{cssxref("block-size")}}, {{cssxref("inline-size")}}, {{cssxref("min-block-size")}}, {{cssxref("min-inline-size")}}, {{cssxref("max-block-size")}}, and {{cssxref("max-inline-size")}} logical properties. | ||||||||||
chrisdavidmills marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||
|
|
||||||||||
| ### Non-standard features | ||||||||||
|
|
||||||||||
| - The HTML [`anchor`](/en-US/docs/Web/HTML/Global_attributes/anchor) attribute, which provides an alternative mechanism for associating positioned elements with anchor elements. | ||||||||||
| - The {{domxref("Element.anchorElement")}} property, which returns a reference to an positioned element's anchor element. | ||||||||||
|
There was a problem hiding this comment. Delete this section, and put the features in the standard template sections. i.e. put anchorElement under Interfaces, but as a sentence as a not on the bottom using https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_sizing as a template (there's a note there under properties and datatypes.) There's an example HTML attributes at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_shadow_parts |
||||||||||
|
|
||||||||||
| > **Note:** The `anchor` attribute and the associated `anchorElement` property are currently disabled by default in supporting browsers. See the compatibility data on their linked reference pages for information on how to enable them for testing purposes. | ||||||||||
|
|
||||||||||
| ## Specifications | ||||||||||
|
|
||||||||||
| {{Specifications}} | ||||||||||
|
|
||||||||||
| ## See also | ||||||||||
|
|
||||||||||
| - [Positioning](/en-US/docs/Learn/CSS/CSS_layout/Positioning) | ||||||||||
| - [CSS logical properties and values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) | ||||||||||
| - [Sizing items in CSS](/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) | ||||||||||
chrisdavidmills marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
reducing the reading level and coloquializing it to better help the reader comprehend the utility of the spec upfront.
If there's a good example, we can add a "see x module in action"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK, I don't agree with getting rid of tether — it is a precise word that describes perfectly what is going on. I think describing what is going on without using it will become really awkward if we have to do it everywhere tether is used, and will actually make the sentences more difficult to understand. I also concisely describe what is going on in the second sentence.
I have used some of your wording, where I think it improves things, and I have also provided a definition of tether in a note below the opening text. I suspect it will make sense to turn that into a glossary entry so we can link it everywhere tether is used. Let me know if you agree, and I will do that.