files/en-us/web/api/csspositiontrydescriptors/index.md
{{APIRef("CSSOM")}}
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.
Each descriptor in the body of the corresponding {{cssxref("@position-try")}} at-rule can be accessed using either its property name in bracket notation or the camel-case version of the property name "propertyName" in 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}}
Inherits properties from its ancestor {{domxref("CSSStyleDeclaration")}}.
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
block-size or blockSize
bottom
height
inline-size or inlineSize
inset
position-area or positionArea
inset-block or insetBlock
inset-block-end or insetBlockEnd
inset-block-start or insetBlockStart
inset-inline or insetInline
inset-inline-end or insetInlineEnd
inset-inline-start or insetInlineStart
justify-self or justifySelf
left
margin
margin-block or marginBlock
margin-block-end or marginBlockEnd
margin-block-start or marginBlockStart
margin-bottom or marginBottom
margin-inline or marginInline
margin-inline-end or marginInlineEnd
margin-inline-start or marginInlineStart
margin-left or marginLeft
margin-right or marginRight
margin-top or marginTop
max-block-size or maxBlockSize
max-height or maxHeight
max-inline-size or maxInlineSize
max-width or maxWidth
min-block-size or minBlockSize
min-height or minHeight
min-inline-size or minInlineSize
min-width or minWidth
place-self or placeSelf
position-anchor or positionAnchor
right
top
width
No specific methods; inherits methods from its ancestor {{domxref("CSSStyleDeclaration")}}.
The CSS includes a @position-try at-rule with a name of --custom-right and three descriptors.
@position-try --custom-right {
position-area: right;
width: 100px;
margin-left: 10px;
}
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["position-area"]); // "right"
{{Specifications}}
{{Compat}}