FF131ExperFeat: CSSPositionTryRule/TryDescriptors (#35817)

* FF131ExperFeat: CSSPositionTryRule/TryDescriptors * Remove duplicate text
mdn · Sep 14, 2024 · 12d4355 · 12d4355
1 parent 92d955a
commit 12d4355
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 54 deletions.
diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md
@@ -1116,6 +1116,52 @@ The CSS [`calc()`](/en-US/docs/Web/CSS/calc) function can now parse color channe
   </tbody>
 </table>
 
+### CSS Anchor Positioning
+
+The [CSS Anchor Positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) module defines a number of features that allow elements to be defined as anchor elements, and for other elements to be positioned relative to anchor elements.
+This allows, for example, tooltips to be displayed alongside associated content as it scrolls through the viewport, moving as needed when it would overflow the viewport, and disappearing when the anchor moves offscreen.
+The set of features are being progressively rolled out behind a preference ([Firefox bug 1889561](https://bugzil.la/1889561)).
+
+The parts that have been implemented include:
+
+- [`CSSPositionTryRule`](/en-US/docs/Web/API/CSSPositionTryRule) and [`CSSPositionTryDescriptors`](/en-US/docs/Web/API/CSSPositionTryDescriptors) (Firefox 131).
+
+<table>
+  <thead>
+    <tr>
+      <th>Release channel</th>
+      <th>Version added</th>
+      <th>Enabled by default?</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>Nightly</th>
+      <td>131</td>
+      <td>No</td>
+    </tr>
+    <tr>
+      <th>Developer Edition</th>
+      <td>131</td>
+      <td>No</td>
+    </tr>
+    <tr>
+      <th>Beta</th>
+      <td>131</td>
+      <td>No</td>
+    </tr>
+    <tr>
+      <th>Release</th>
+      <td>131</td>
+      <td>No</td>
+    </tr>
+    <tr>
+      <th>Preference name</th>
+      <td colspan="2"><code>layout.css.anchor-positioning.enabled</code></td>
+    </tr>
+  </tbody>
+</table>
+
 ## SVG
 
 ### SVGPathSeg APIs

diff --git a/files/en-us/web/api/csspositiontrydescriptors/index.md b/files/en-us/web/api/csspositiontrydescriptors/index.md
@@ -9,66 +9,101 @@ browser-compat: api.CSSPositionTryDescriptors
 
 {{APIRef("CSSOM")}}{{SeeCompatTable}}
 
-The **`CSSPositionTryDescriptors`** interface describes an object representing a {{cssxref("@position-try")}} [at-rule](/en-US/docs/Web/CSS/At-rule).
+The **`CSSPositionTryDescriptors`** interface defines properties that represent the list of CSS descriptors that can be set in the body of a {{cssxref("@position-try")}} [at-rule](/en-US/docs/Web/CSS/At-rule).
+
+Each descriptor in the body of the corresponding {{cssxref("@position-try")}} at-rule can be accessed using either its property name in [bracket notation](/en-US/docs/Learn/JavaScript/Objects/Basics#bracket_notation) or the camel-case version of the property name "propertyName" in [dot notation](/en-US/docs/Learn/JavaScript/Objects/Basics#dot_notation).
+For example, you can access the CSS property "property-name" as `style["property-name"]` or `style.propertyName`, where `style` is a `CSSPositionTryDescriptors` instance.
+A property with a single-word name like {{cssxref("height")}} can be accessed using either notation: `style["height"]` or `style.height`.
+
+> [!NOTE]
+> The {{domxref("CSSPositionTryRule")}} interface represents a {{cssxref("@position-try")}} at-rule, and the {{domxref("CSSPositionTryRule.style")}} property is an instance of this object.
 
 {{InheritanceDiagram}}
 
 ## Instance properties
 
 _Inherits properties from its ancestor {{domxref("CSSStyleDeclaration")}}._
 
-The `CSSPositionTryDescriptors` interface defines properties that represent the CSS properties that can be set inside a {{cssxref("@position-try")}} at-rule.
-
-There are 35 CSS properties that can be accessed as CSS property names or camel-case. For each one:
-
-- `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&nbsp;property                  | Camel-case                                    | Property name                                      |
-| ---------------------------------- | --------------------------------------------- | -------------------------------------------------- |
-| {{cssxref("align-self")}}          | `CSSPositionTryDescriptors.alignSelf`         | `CSSPositionTryDescriptors["align-self"]`          |
-| {{cssxref("block-size")}}          | `CSSPositionTryDescriptors.blockSize`         | `CSSPositionTryDescriptors["block-size"]`          |
-| {{cssxref("bottom")}}              | `CSSPositionTryDescriptors.bottom`            | `CSSPositionTryDescriptors["bottom"]`              |
-| {{cssxref("height")}}              | `CSSPositionTryDescriptors.height`            | `CSSPositionTryDescriptors["height"]`              |
-| {{cssxref("inline-size")}}         | `CSSPositionTryDescriptors.inlineSize`        | `CSSPositionTryDescriptors["inline-size"]`         |
-| {{cssxref("inset")}}               | `CSSPositionTryDescriptors.inset`             | `CSSPositionTryDescriptors["inset"]`               |
-| {{cssxref("position-area")}}       | `CSSPositionTryDescriptors.positionArea`      | `CSSPositionTryDescriptors["position-area"]`       |
-| {{cssxref("inset-block")}}         | `CSSPositionTryDescriptors.insetBlock`        | `CSSPositionTryDescriptors["inset-block"]`         |
-| {{cssxref("inset-block-end")}}     | `CSSPositionTryDescriptors.insetBlockEnd`     | `CSSPositionTryDescriptors["inset-block-end"]`     |
-| {{cssxref("inset-block-start")}}   | `CSSPositionTryDescriptors.insetBlockStart`   | `CSSPositionTryDescriptors["inset-block-start"]`   |
-| {{cssxref("inset-inline")}}        | `CSSPositionTryDescriptors.insetInline`       | `CSSPositionTryDescriptors["inset-inline"]`        |
-| {{cssxref("inset-inline-end")}}    | `CSSPositionTryDescriptors.insetInlineEnd`    | `CSSPositionTryDescriptors["inset-inline-end"]`    |
-| {{cssxref("inset-inline-start")}}  | `CSSPositionTryDescriptors.insetInlineStart`  | `CSSPositionTryDescriptors["inset-inline-start"]`  |
-| {{cssxref("justify-self")}}        | `CSSPositionTryDescriptors.justifySelf`       | `CSSPositionTryDescriptors["justify-self"]`        |
-| {{cssxref("left")}}                | `CSSPositionTryDescriptors.left`              | `CSSPositionTryDescriptors["left"]`                |
-| {{cssxref("margin")}}              | `CSSPositionTryDescriptors.margin`            | `CSSPositionTryDescriptors["margin"]`              |
-| {{cssxref("margin-block")}}        | `CSSPositionTryDescriptors.marginBlock`       | `CSSPositionTryDescriptors["margin-block"]`        |
-| {{cssxref("margin-block-end")}}    | `CSSPositionTryDescriptors.marginBlockEnd`    | `CSSPositionTryDescriptors["margin-block-end"]`    |
-| {{cssxref("margin-block-start")}}  | `CSSPositionTryDescriptors.marginBlockStart`  | `CSSPositionTryDescriptors["margin-block-start"]`  |
-| {{cssxref("margin-bottom")}}       | `CSSPositionTryDescriptors.marginBottom`      | `CSSPositionTryDescriptors["margin-bottom"]`       |
-| {{cssxref("margin-inline")}}       | `CSSPositionTryDescriptors.marginInline`      | `CSSPositionTryDescriptors["margin-inline"]`       |
-| {{cssxref("margin-inline-end")}}   | `CSSPositionTryDescriptors.marginInlineEnd`   | `CSSPositionTryDescriptors["margin-inline-end"]`   |
-| {{cssxref("margin-inline-start")}} | `CSSPositionTryDescriptors.marginInlineStart` | `CSSPositionTryDescriptors["margin-inline-start"]` |
-| {{cssxref("margin-left")}}         | `CSSPositionTryDescriptors.marginLeft`        | `CSSPositionTryDescriptors["margin-left"]`         |
-| {{cssxref("margin-right")}}        | `CSSPositionTryDescriptors.marginRight`       | `CSSPositionTryDescriptors["margin-right"]`        |
-| {{cssxref("margin-top")}}          | `CSSPositionTryDescriptors.marginTop`         | `CSSPositionTryDescriptors["margin-top"]`          |
-| {{cssxref("max-block-size")}}      | `CSSPositionTryDescriptors.maxBlockSize`      | `CSSPositionTryDescriptors["max-block-size"]`      |
-| {{cssxref("max-height")}}          | `CSSPositionTryDescriptors.maxHeight`         | `CSSPositionTryDescriptors["max-height"]`          |
-| {{cssxref("max-inline-size")}}     | `CSSPositionTryDescriptors.maxInlineSize`     | `CSSPositionTryDescriptors["max-inline-size"]`     |
-| {{cssxref("max-width")}}           | `CSSPositionTryDescriptors.maxWidth`          | `CSSPositionTryDescriptors["max-width"]`           |
-| {{cssxref("min-block-size")}}      | `CSSPositionTryDescriptors.minBlockSize`      | `CSSPositionTryDescriptors["min-block-size"]`      |
-| {{cssxref("min-height")}}          | `CSSPositionTryDescriptors.minHeight`         | `CSSPositionTryDescriptors["min-height"]`          |
-| {{cssxref("min-inline-size")}}     | `CSSPositionTryDescriptors.minInlineSize`     | `CSSPositionTryDescriptors["min-inline-size"]`     |
-| {{cssxref("min-width")}}           | `CSSPositionTryDescriptors.minWidth`          | `CSSPositionTryDescriptors["min-width"]`           |
-| {{cssxref("place-self")}}          | `CSSPositionTryDescriptors.placeSelf`         | `CSSPositionTryDescriptors["place-self"]`          |
-| {{cssxref("position-anchor")}}     | `CSSPositionTryDescriptors.positionAnchor`    | `CSSPositionTryDescriptors["position-anchor"]`     |
-| {{cssxref("right")}}               | `CSSPositionTryDescriptors.right`             | `CSSPositionTryDescriptors["right"]`               |
-| {{cssxref("top")}}                 | `CSSPositionTryDescriptors.top`               | `CSSPositionTryDescriptors["top"]`                 |
-| {{cssxref("width")}}               | `CSSPositionTryDescriptors.width`             | `CSSPositionTryDescriptors["width"]`               |
+The following property names, in snake-case (accessed using bracket notation) and camel-case (accessed using dot notation), each represent the value of a descriptor in the corresponding `@position-try` at-rule:
+
+- `align-self` or `alignSelf`
+  - : A string representing the value of an {{cssxref("align-self")}} descriptor.
+- `block-size` or `blockSize`
+  - : A string representing the value of a {{cssxref("block-size")}} descriptor.
+- `bottom`
+  - : A string representing the value of a {{cssxref("bottom")}} descriptor.
+- `height`
+  - : A string representing the value of a {{cssxref("height")}} descriptor.
+- `inline-size` or `inlineSize`
+  - : A string representing the value of an {{cssxref("inline-size")}} descriptor.
+- `inset`
+  - : A string representing the value of an {{cssxref("inset")}} descriptor.
+- `position-area` or `positionArea`
+  - : A string representing the value of a {{cssxref("position-area")}} descriptor.
+- `inset-block` or `insetBlock`
+  - : A string representing the value of an {{cssxref("inset-block")}} descriptor.
+- `inset-block-end` or `insetBlockEnd`
+  - : A string representing the value of an {{cssxref("inset-block-end")}} descriptor.
+- `inset-block-start` or `insetBlockStart`
+  - : A string representing the value of an {{cssxref("inset-block-start")}} descriptor.
+- `inset-inline` or `insetInline`
+  - : A string representing the value of an {{cssxref("inset-inline")}} descriptor.
+- `inset-inline-end` or `insetInlineEnd`
+  - : A string representing the value of an {{cssxref("inset-inline-end")}} descriptor.
+- `inset-inline-start` or `insetInlineStart`
+  - : A string representing the value of an {{cssxref("inset-inline-start")}} descriptor.
+- `justify-self` or `justifySelf`
+  - : A string representing the value of a {{cssxref("justify-self")}} descriptor.
+- `left`
+  - : A string representing the value of a {{cssxref("left")}} descriptor.
+- `margin`
+  - : A string representing the value of a {{cssxref("margin")}} descriptor.
+- `margin-block` or `marginBlock`
+  - : A string representing the value of a {{cssxref("margin-block")}} descriptor.
+- `margin-block-end` or `marginBlockEnd`
+  - : A string representing the value of a {{cssxref("margin-block-end")}} descriptor.
+- `margin-block-start` or `marginBlockStart`
+  - : A string representing the value of a {{cssxref("margin-block-start")}} descriptor.
+- `margin-bottom` or `margiBottom`
+  - : A string representing the value of a {{cssxref("margin-bottom")}} descriptor.
+- `margin-inline` or `marginInline`
+  - : A string representing the value of a {{cssxref("margin-inline")}} descriptor.
+- `margin-inline-end` or `marginInlineEnd`
+  - : A string representing the value of a {{cssxref("margin-inline-end")}} descriptor.
+- `margin-inline-start` or `marginInlineStart`
+  - : A string representing the value of a {{cssxref("margin-inline-start")}} descriptor.
+- `margin-left` or `marginLeft`
+  - : A string representing the value of a {{cssxref("margin-left")}} descriptor.
+- `margin-right` or `marginRight`
+  - : A string representing the value of a {{cssxref("margin-right")}} descriptor.
+- `margin-top` or `marginTop`
+  - : A string representing the value of a {{cssxref("margin-top")}} descriptor.
+- `max-block-size` or `maxBlockSize`
+  - : A string representing the value of a {{cssxref("max-block-size")}} descriptor.
+- `max-height` or `maxHeight`
+  - : A string representing the value of a {{cssxref("max-height")}} descriptor.
+- `max-inline-size` or `maxInlineSize`
+  - : A string representing the value of a {{cssxref("max-inline-size")}} descriptor.
+- `max-width` or `maxWidth`
+  - : A string representing the value of a {{cssxref("max-width")}} descriptor.
+- `min-block-size` or `minBlockSize`
+  - : A string representing the value of a {{cssxref("min-block-size")}} descriptor.
+- `min-height` or `minHeight`
+  - : A string representing the value of a {{cssxref("min-height")}} descriptor.
+- `min-inline-size` or `minInlineSize`
+  - : A string representing the value of a {{cssxref("min-inline-size")}} descriptor.
+- `min-width` or `minWidth`
+  - : A string representing the value of a {{cssxref("min-width")}} descriptor.
+- `place-self` or `placeSelf`
+  - : A string representing the value of a {{cssxref("place-self")}} descriptor.
+- `position-anchor` or `positionAnchor`
+  - : A string representing the value of a {{cssxref("position-anchor")}} descriptor.
+- `right`
+  - : A string representing the value of a {{cssxref("right")}} descriptor.
+- `top`
+  - : A string representing the value of a {{cssxref("top")}} descriptor.
+- `width`
+  - : A string representing the value of a {{cssxref("width")}} descriptor.
 
 ## Instance methods
 

diff --git a/files/en-us/web/api/csspositiontryrule/index.md b/files/en-us/web/api/csspositiontryrule/index.md
@@ -20,7 +20,7 @@ _Inherits properties from its ancestor {{domxref("CSSRule")}}._
 - {{domxref("CSSPositionTryRule.name")}} {{ReadOnlyInline}} {{experimental_inline}}
   - : Represents the name of the position try option specified by the `@position-try` at-rule's {{cssxref("dashed-ident")}}.
 - {{domxref("CSSPositionTryRule.style")}} {{ReadOnlyInline}} {{experimental_inline}}
-  - : Returns a {{domxref("CSSPositionTryDescriptors")}} object representing the declarations set in the body of the `@position-try` at-rule.
+  - : A {{domxref("CSSPositionTryDescriptors")}} object that represents the declarations set in the body of the `@position-try` at-rule.
 
 ## Instance methods
 

diff --git a/files/en-us/web/css/@position-try/index.md b/files/en-us/web/css/@position-try/index.md
@@ -235,3 +235,4 @@ In some cases, we need to set values inside the custom position options to turn
 - [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) guide
 - [Handling overflow: try fallbacks and conditional hiding](/en-US/docs/Web/CSS/CSS_anchor_positioning/Try_options_hiding) guide
+- {{domxref("CSSPositionTryRule")}}