mdn · chrisdavidmills · May 14, 2024 · May 15, 2024 · May 15, 2024 · May 15, 2024
@@ -32,8 +32,11 @@ The values of CSS are represented untyped, that is using {{JSxRef("String")}} ob
 - {{DOMxRef("CSSMediaRule")}}
 - {{DOMxRef("CSSNamespaceRule")}}
 - {{DOMxRef("CSSPageRule")}}
+- {{DOMxRef("CSSPositionTryRule")}}
+- {{DOMxRef("CSSPositionTryDescriptors")}}
 - {{DOMxRef("CSSRule")}}
 - {{DOMxRef("CSSRuleList")}}
+- {{DOMxRef("CSSStartingStyleRule")}}
 - {{DOMxRef("CSSStyleDeclaration")}}
 - {{DOMxRef("CSSStyleSheet")}}
 - {{DOMxRef("CSSStyleRule")}}

@@ -0,0 +1,112 @@
+---
+title: CSSPositionTryDescriptors
+slug: Web/API/CSSPositionTryDescriptors
+page-type: web-api-interface
+status:
+ - experimental
+browser-compat: api.CSSPositionTryDescriptors
+---
+
+{{APIRef("CSSOM")}}
+
+The **`CSSPositionTryDescriptors`** interface describes an object representing a {{cssxref("@position-try")}} [at-rule](/en-US/docs/Web/CSS/At-rule).
+
+{{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 `@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 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("inset-area")}} | `CSSPositionTryDescriptors.insetArea` | `CSSPositionTryDescriptors["inset-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"]` |
+
+## Instance methods
+
+_No specific methods; inherits methods from its ancestor {{domxref("CSSStyleDeclaration")}}._
+
+## Examples
+
+The CSS includes a `@position-try` at-rule with a name of `--custom-right` and three descriptors.
+
+```css
+@position-try --custom-right {
+ inset-area: right;
+ width: 100px;
+ margin: 0 0 0 10px;
+}
+```
+
+```js
+const myRules = document.styleSheets[0].cssRules;
+const tryOption = myRules[0]; // a CSSPositionTryRule
+console.log(tryOption.style); // "[object CSSPositionTryDescriptors]"
+console.log(tryOption.style.margin); // "0 0 0 10px"
+console.log(tryOption.style["inset-area"]); // "right"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{DOMxRef("CSSPositionTryRule")}}
+- {{cssxref("@position-try")}}
+- {{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)
+- [Handling overflow: try options and conditional hiding](/en-US/docs/Web/CSS/CSS_anchor_positioning/Try_options_hiding)
@@ -0,0 +1,66 @@
+---
+title: CSSPositionTryRule
+slug: Web/API/CSSPositionTryRule
+page-type: web-api-interface
+status:
+ - experimental
+browser-compat: api.CSSPositionTryRule
+---
+
+{{APIRef("CSSOM")}}
+
+The **`CSSPositionTryRule`** interface describes an object representing a {{cssxref("@position-try")}} [at-rule](/en-US/docs/Web/CSS/At-rule).
+
+{{InheritanceDiagram}}
+
+## Instance properties
+
+_Inherits properties from its ancestor {{domxref("CSSRule")}}._
+
+- {{domxref("CSSPositionTryRule.name")}} {{ReadOnlyInline}}
+ - : Represents the name of the position try option specified by the `@position-try` at-rule's {{cssxref("dashed-ident")}}.
+- {{domxref("CSSPositionTryRule.style")}} {{ReadOnlyInline}}
+ - : Returns a {{domxref("CSSPositionTryDescriptors")}} object representing the declarations set in the body of the `@position-try` at-rule.
+
+## Instance methods
+
+_No specific methods; inherits methods from its ancestor {{domxref("CSSRule")}}._
+
+## Examples
+
+The CSS includes a `@position-try` at-rule with a name of `--custom-left` and three descriptors.
+
+```css
+@position-try --custom-left {
+ inset-area: left;
+ width: 20%;
+ max-width: 200px;
+ margin: 0 10px 0 0;
+}
+```
+
+```js
+const myRules = document.styleSheets[0].cssRules;
+const tryOption = myRules[0]; // a CSSPositionTryRule
+console.log(tryOption); // "[object CSSPositionTryRule]"
+console.log(tryOption.name); // "--custom-left"
+console.log(tryOption.style); // "[object CSSPositionTryDescriptors]"
+console.log(tryOption.style.maxWidth); // "200px"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{DOMxRef("CSSPositionTryDescriptors")}}
+- {{cssxref("@position-try")}}
+- {{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)
+- [Handling overflow: try options and conditional hiding](/en-US/docs/Web/CSS/CSS_anchor_positioning/Try_options_hiding)
@@ -0,0 +1,50 @@
+---
+title: "CSSPositionTryRule: name property"
+short-title: name
+slug: Web/API/CSSPositionTryRule/name
+page-type: web-api-instance-property
+browser-compat: api.CSSPositionTryRule.name
+---
+
+{{APIRef("CSSOM") }}
+
+The **`name`** read-only property of the {{domxref("CSSPositionTryRule")}} interface represents the name of the position try option specified by the `@position-try` at-rule's {{cssxref("dashed-ident")}}.
+
+## Value
+
+A string.
+
+## Examples
+
+The CSS includes a `@position-try` at-rule with a name of `--custom-bottom` and three descriptors.
+
+```css
+@position-try --custom-bottom {
+ top: anchor(bottom);
+ min-width: 100px;
+ margin: 10px 0 0 0;
+}
+```
+
+```js
+const myRules = document.styleSheets[0].cssRules;
+const tryOption = myRules[0]; // a CSSPositionTryRule
+console.log(tryOption.name); // "--custom-bottom"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{DOMxRef("CSSPositionTryDescriptors")}}
+- {{cssxref("@position-try")}}
+- {{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)
+- [Handling overflow: try options and conditional hiding](/en-US/docs/Web/CSS/CSS_anchor_positioning/Try_options_hiding)
@@ -0,0 +1,52 @@
+---
+title: "CSSPositionTryRule: style property"
+short-title: style
+slug: Web/API/CSSPositionTryRule/style
+page-type: web-api-instance-property
+browser-compat: api.CSSPositionTryRule.style
+---
+
+{{ APIRef("CSSOM") }}
+
+The **`style`** read-only property of the {{domxref("CSSPositionTryRule")}} interface returns a {{domxref("CSSPositionTryDescriptors")}} object representing the declarations set in the body of the `@position-try` at-rule.
+
+## Value
+
+A {{domxref("CSSPositionTryDescriptors")}} object.
+
+## Examples
+
+The CSS includes a `@position-try` at-rule with a name of `--custom-right` and three descriptors.
+
+```css
+@position-try --custom-bottom {
+ top: anchor(bottom);
+ min-width: 100px;
+ margin: 10px 0 0 0;
+}
+```
+
+```js
+const myRules = document.styleSheets[0].cssRules;
+const tryOption = myRules[0]; // a CSSPositionTryRule
+console.log(tryOption.style.top); // "anchor(bottom)"
+console.log(tryOption.style["min-width"]); // "100px"
+console.log(tryOption.style.insetArea); // ""; no inset-area specified
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{DOMxRef("CSSPositionTryDescriptors")}}
+- {{cssxref("@position-try")}}
+- {{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)
+- [Handling overflow: try options and conditional hiding](/en-US/docs/Web/CSS/CSS_anchor_positioning/Try_options_hiding)