Editorial review: CSS anchor positioning 5: position try functionality #33609
+1,243
−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 (10 pages)
Flaws (49)URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
(comment last updated: 2024-06-04 02:08:10) |
github-actions
bot
added
size/l
github-actions
bot
added
Content:WebAPI
chrisdavidmills
requested review from
wbamberg
and removed request for
a team and
wbamberg
estelle
reviewed
May 25, 2024
|
|
||
| _Inherits properties from its ancestor {{domxref("CSSStyleDeclaration")}}._ | ||
|
|
||
| The `CSSPositionTryDescriptors` interface defines around 70 properties that represent all of the [possible CSS properties that can be set inside a `@position-try` at rule](/en-US/docs/Web/CSS/@position-try#declaration-list). It wouldn't be practical or useful to create a separate reference page for each of these properties, but you can find a full list in the [Browser compatibility](#browser_compatibility) section below. |
There was a problem hiding this comment.
There are about 35 properties, each presented in camelCase and css-case.
This
Suggested change
| The `CSSPositionTryDescriptors` interface defines around 70 properties that represent all of the [possible CSS properties that can be set inside a `@position-try` at rule](/en-US/docs/Web/CSS/@position-try#declaration-list). It wouldn't be practical or useful to create a separate reference page for each of these properties, but you can find a full list in the [Browser compatibility](#browser_compatibility) section below. | |
| The `CSSPositionTryDescriptors` interface defines 70 properties that represent the [CSS properties that can be set inside a `@position-try` at rule](/en-US/docs/Web/CSS/@position-try#declaration-list). | |
| There are 35 CSS properties that can be accessed as CSS property names or camelCase. | |
| - `CSSPositionTryDescriptors.propertyName` | |
| - : Represents the property value set in the `@position-try` at rule using the camel-cased property name. | |
| - `CSSPositionTryDescriptors["property-name"]` | |
| - : Represents the property value set in the `@position-try` at rule using the CSS property name. | |
| The instance properties are listed below: | |
| | CSS property | camelCase | property-name | | |
| |. ---- | ---- | ------ | | |
| | {{cssxref("align-self")}} | `CSSPositionTryDescriptors.alignSelf` | `CSSPositionTryDescriptors["align-self"]` | |
list all 35. Don't send people to decipher the BCD table.
There was a problem hiding this comment.
I was hoping to avoid having to do this ;-)
But yeah, you are right. I'll suck it up.
|
|
||
| - {{cssxref("@position-try")}} | ||
| - {{cssxref("position-try-options")}} | ||
| - [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) |
There was a problem hiding this comment.
Suggested change
| - [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) | |
| - [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module |
| let myRules = document.styleSheets[0].cssRules; | ||
| let tryOptionStyles = myRules[0].style; // a CSSPositionTryDescriptors object | ||
| console.log(tryOptionStyles.margin); // Logs "0 0 0 10px" to the console. | ||
| console.log(tryOptionStyles.insetArea); // Logs "right" to the console. |
There was a problem hiding this comment.
Suggested change
| console.log(tryOptionStyles.insetArea); // Logs "right" to the console. | |
| console.log(tryOptionStyles["inset-area"]); // Logs "right" to the console. |
there are 35 properties, each listed two ways, so let's include at least one example of each way of accessing the CSS property.
There was a problem hiding this comment.
Good call; done.
| - {{cssxref("@position-try")}} | ||
| - {{cssxref("position-try-options")}} | ||
| - [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) | ||
| - [Using CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) |
There was a problem hiding this comment.
Suggested change
| - [Using CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) | |
| - [Using CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) | |
| - {{DOMxRef("CSSPositionTryRule")}} |
Comment on lines
59
to
60
| - [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) | ||
| - [Using CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) |
There was a problem hiding this comment.
sentence case. add module after the module link. (for all the pages)
There was a problem hiding this comment.
Yup, done, for all the pages of this interface.
|
|
||
| #### Result | ||
|
|
||
| Scroll the page and check out the effect of these position try options as the anchor nears the edge of the viewport: |
There was a problem hiding this comment.
Suggested change
| Scroll the page and check out the effect of these position try options as the anchor nears the edge of the viewport: | |
| Scroll the page and notice the effect as different position options are applied as the anchor nears the edge of the viewport: |
There was a problem hiding this comment.
This seemed a bit awkward to me. I ended up change it to:
Scroll the page and notice the change in the positioned element's placement as the anchor nears the different edges of the viewport. This is due to different position options being applied.
|
|
||
| Let's talk through how these position options work: | ||
|
|
||
| - First of all, note that our default position is defined by `inset-area: top`, so the infobox sits above the anchor. We also give the infobox a fixed width and some bottom margin so it doesn't sit right next to the anchor. |
There was a problem hiding this comment.
Suggested change
| - First of all, note that our default position is defined by `inset-area: top`, so the infobox sits above the anchor. We also give the infobox a fixed width and some bottom margin so it doesn't sit right next to the anchor. | |
| - First of all, note that our default position is defined by `inset-area: top`; the infobox sits above the anchor when the infobox would not otherwise overflow the page in any direction. Also note that the infobox has a fixed width and bottom margin set. These values will change as different position options get applied. |
also add something to the effect of:
It's important to note that if the original position, in this case set with inset-area, isn't overflowing, the position-try-options property, and therefore the position options, are ignored.
There was a problem hiding this comment.
I've changed the suggested wording a little bit here, and included wording to cover your second point. I ended up with:
First of all, note that our default position is defined by
inset-area: top. When the infobox isn't overflowing the page in any direction, the infobox sits above the anchor, and the position try options set in theposition-try-optionsproperty are ignored. Also note that the infobox has a fixed width and bottom margin set. These values will change as different position try options are applied.
| Let's talk through how these position options work: | ||
|
|
||
| - First of all, note that our default position is defined by `inset-area: top`, so the infobox sits above the anchor. We also give the infobox a fixed width and some bottom margin so it doesn't sit right next to the anchor. | ||
| - If the infobox starts to overflow, the browser first tries the `--custom-left` position. This moves the infobox to the left of the anchor, adjusts the margin to suit, and also gives the infobox a different width as it sits alongside the anchor. |
There was a problem hiding this comment.
Suggested change
| - If the infobox starts to overflow, the browser first tries the `--custom-left` position. This moves the infobox to the left of the anchor, adjusts the margin to suit, and also gives the infobox a different width as it sits alongside the anchor. | |
| - If the infobox starts to overflow, the browser first tries the `--custom-left` position. This moves the infobox to the left of the anchor, adjusts the margin to suit, and also gives the infobox a different width when positioned to the left of the anchor. |
There was a problem hiding this comment.
I ended up cutting this sentence down to:
If the infobox starts to overflow, the browser first tries the
--custom-leftposition. This moves the infobox to the left of the anchor, adjusts the margin to suit, and also gives the infobox a different width.
We already say the infobox is positioned on the left of the anchor, earlier in the sentence.
|
|
||
| - First of all, note that our default position is defined by `inset-area: top`, so the infobox sits above the anchor. We also give the infobox a fixed width and some bottom margin so it doesn't sit right next to the anchor. | ||
| - If the infobox starts to overflow, the browser first tries the `--custom-left` position. This moves the infobox to the left of the anchor, adjusts the margin to suit, and also gives the infobox a different width as it sits alongside the anchor. | ||
| - Next, the browser tries the `--custom-bottom` position. This moves the infobox to the bottom of the anchor, and sets an appropriate margin. It doesn't set a width, so the infobox returns to its default width — 200px. |
There was a problem hiding this comment.
Suggested change
| - Next, the browser tries the `--custom-bottom` position. This moves the infobox to the bottom of the anchor, and sets an appropriate margin. It doesn't set a width, so the infobox returns to its default width — 200px. | |
| - Next, the browser tries the `--custom-bottom` position. This moves the infobox to the bottom of the anchor, and sets an appropriate margin. It doesn't include a `width` descriptor, so the infobox returns to its default width of `200px` set by the `width` property. |
There was a problem hiding this comment.
Sounds good. Updated.
| - First of all, note that our default position is defined by `inset-area: top`, so the infobox sits above the anchor. We also give the infobox a fixed width and some bottom margin so it doesn't sit right next to the anchor. | ||
| - If the infobox starts to overflow, the browser first tries the `--custom-left` position. This moves the infobox to the left of the anchor, adjusts the margin to suit, and also gives the infobox a different width as it sits alongside the anchor. | ||
| - Next, the browser tries the `--custom-bottom` position. This moves the infobox to the bottom of the anchor, and sets an appropriate margin. It doesn't set a width, so the infobox returns to its default width — 200px. | ||
| - The browser next tries the `--custom-right` position. This works much the same as the `--custom-left` position, with the same width applied, but the `inset-area` and `margin` values are mirrored to place the infobox appropriately to the right. |
There was a problem hiding this comment.
Suggested change
| - The browser next tries the `--custom-right` position. This works much the same as the `--custom-left` position, with the same width applied, but the `inset-area` and `margin` values are mirrored to place the infobox appropriately to the right. | |
| - The browser next tries the `--custom-right` position. This works much the same as the `--custom-left` position, with the same `width` descriptor value applied, but the `inset-area` and `margin` values are mirrored to place the infobox appropriately to the right. |
There was a problem hiding this comment.
Sounds good; updated
![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>
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>
|
@estelle thanks a lot for your work on this. I've answered your comments so far. |
| - [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module | ||
| - [Using CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) | ||
| - {{DOMxRef("CSSPositionTryDescriptors")}} | ||
| ``` |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
Suggested change
| ``` | |
| ``` | |
| ``` |
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
estelle
reviewed
Jun 4, 2024
|
|
||
| _Inherits properties from its ancestor {{domxref("CSSStyleDeclaration")}}._ | ||
|
|
||
| The `CSSPositionTryDescriptors` interface defines 70 properties that represent the [CSS properties that can be set inside a `@position-try` at rule](/en-US/docs/Web/CSS/@position-try#declaration-list). |
There was a problem hiding this comment.
Suggested change
| The `CSSPositionTryDescriptors` interface defines 70 properties that represent the [CSS properties that can be set inside a `@position-try` at rule](/en-US/docs/Web/CSS/@position-try#declaration-list). | |
| The `CSSPositionTryDescriptors` interface defines properties that represent the [CSS properties that can be set inside a `@position-try` at rule](/en-US/docs/Web/CSS/@position-try#declaration-list). |
70 v 35 is confusing, so let's omit it.
| The instance properties are listed below: | ||
|
|
||
| | CSS property | Camel-case | Property name | | ||
| | ---------------------------------- | --------------------------------------------- | -------------------------------------------------- | |
There was a problem hiding this comment.
should we start off with a const CSSPTD = CSSPositionTryDescriptors, so we can shorten the table?
|
|
||
| ## Examples | ||
|
|
||
| The CSS includes a `@position-try` at-rule with a name of `--custom-right` and several declarations in its body. |
There was a problem hiding this comment.
Suggested change
| The CSS includes a `@position-try` at-rule with a name of `--custom-right` and several declarations in its body. | |
| The CSS includes a `@position-try` at-rule with a name of `--custom-right` and three descriptors. |
| console.log(tryOption.style); // "[object CSSPositionTryDescriptors]" | ||
| console.log(tryOption.style.margin); // "0 0 0 10px" | ||
| console.log(tryOption.style["inset-area"]); // "right" | ||
| ``` |
There was a problem hiding this comment.
i committed this line so i could read the page
| - {{cssxref("position-try-options")}} | ||
| - [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module | ||
| - [Using CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) | ||
| - {{DOMxRef("CSSPositionTryRule")}} |
There was a problem hiding this comment.
put the API first (since we're in APIs)
| let myRules = document.styleSheets[0].cssRules; | ||
| let tryOption = myRules[0]; // a CSSPositionTryRule | ||
| console.log(tryOption.style.top); // "anchor(bottom)" | ||
| console.log(tryOption.style["min-width"]); // "100px" |
There was a problem hiding this comment.
add one that isn't declared to show what a value will look like when not set
|
|
||
| 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. | ||
|
|
||
| ## Syntax |
There was a problem hiding this comment.
change to "descriptors" and copy the https://developer.mozilla.org/en-US/docs/Web/CSS/@property format.
| @@ -0,0 +1,192 @@ | |||
| --- | |||
There was a problem hiding this comment.
use the https://developer.mozilla.org/en-US/docs/Web/CSS/@property page as a template here.
Comment on lines
+56
to
+57
| - {{cssxref("inset-area")}}, {{cssxref("position-try-options")}} | ||
| - The {{cssxref("@position-try")}} at-rule |
There was a problem hiding this comment.
Suggested change
| - {{cssxref("inset-area")}}, {{cssxref("position-try-options")}} | |
| - The {{cssxref("@position-try")}} at-rule | |
| - {{cssxref("inset-area")}} | |
| - {{cssxref("position-try-options")}} | |
| - {{cssxref("@position-try")}} at-rule |
Comment on lines
+51
to
+55
| - Predefined option | ||
| - : Referred to as a `try-tactic` in the specification, these predefined values move the positioned element by taking its computed position and transforming it across a particular axis of the anchor. Possible values are: | ||
| - `flip-block`: Flips the element's position along the block axis so that it appears the same distance away from the anchor but on the opposite side of it. To put it another way, it mirrors the element's position across an inline axis drawn through the center of the anchor. As an example, if the positioned element started to overflow at the top of the anchor, this value would flip it to the bottom. | ||
| - `flip-inline`: Flips the element's position along the inline axis so that it appears the same distance away from the anchor but on the opposite side of it. To put it another way, it mirrors the element's position across a block axis drawn through the center of the anchor. As an example, if the positioned element started to overflow at the left of the anchor, this value would flip it to the right. | ||
| - `flip-start`: Mirrors the element's position across an axis drawn diagonally through the center of the anchor, passing through the point at the intersection of the block axis start and the inline axis start, and the point at the intersection of the block axis end and the inline axis end. As an example, if the positioned element started to overflow at the left of the anchor, this value would flip it to the top. |
There was a problem hiding this comment.
Suggested change
| - Predefined option | |
| - : Referred to as a `try-tactic` in the specification, these predefined values move the positioned element by taking its computed position and transforming it across a particular axis of the anchor. Possible values are: | |
| - `flip-block`: Flips the element's position along the block axis so that it appears the same distance away from the anchor but on the opposite side of it. To put it another way, it mirrors the element's position across an inline axis drawn through the center of the anchor. As an example, if the positioned element started to overflow at the top of the anchor, this value would flip it to the bottom. | |
| - `flip-inline`: Flips the element's position along the inline axis so that it appears the same distance away from the anchor but on the opposite side of it. To put it another way, it mirrors the element's position across a block axis drawn through the center of the anchor. As an example, if the positioned element started to overflow at the left of the anchor, this value would flip it to the right. | |
| - `flip-start`: Mirrors the element's position across an axis drawn diagonally through the center of the anchor, passing through the point at the intersection of the block axis start and the inline axis start, and the point at the intersection of the block axis end and the inline axis end. As an example, if the positioned element started to overflow at the left of the anchor, this value would flip it to the top. | |
| - `<try-tactic>` | |
| - : One of three predefined options that move the positioned element by taking its computed position and transforming it across a particular axis of the anchor, including: | |
| - `flip-block` | |
| - : Flips the element's position along the block axis. | |
| - `flip-inline`: | |
| - : Flips the element's position along the inline axis. | |
| - `flip-start` | |
| - : Flips both the inline and block axis values, swapping the `start` properties with each other, and the `end` properties with each other. |
Then put the descriptions of each value in a ### try tactics section within the ## description section.
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:
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.Do not merge until #33058 is merged.
Motivation
Additional details
Related issues and pull requests