W3cubDocs

/Web APIs

CSSPositionTryDescriptors

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The CSSPositionTryDescriptors interface defines properties that represent the list of CSS descriptors that can be set in the body of a @position-try at-rule.

Each descriptor in the body of the corresponding @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 height can be accessed using either notation: style["height"] or style.height.

Note: The CSSPositionTryRule interface represents a @position-try at-rule, and the CSSPositionTryRule.style property is an instance of this object.

Instance properties

Inherits properties from its ancestor 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: A string representing the value of an align-self descriptor.
block-size or blockSize: A string representing the value of a block-size descriptor.
bottom: A string representing the value of a bottom descriptor.
height: A string representing the value of a height descriptor.
inline-size or inlineSize: A string representing the value of an inline-size descriptor.
inset: A string representing the value of an inset descriptor.
position-area or positionArea: A string representing the value of a position-area descriptor.
inset-block or insetBlock: A string representing the value of an inset-block descriptor.
inset-block-end or insetBlockEnd: A string representing the value of an inset-block-end descriptor.
inset-block-start or insetBlockStart: A string representing the value of an inset-block-start descriptor.
inset-inline or insetInline: A string representing the value of an inset-inline descriptor.
inset-inline-end or insetInlineEnd: A string representing the value of an inset-inline-end descriptor.
inset-inline-start or insetInlineStart: A string representing the value of an inset-inline-start descriptor.
justify-self or justifySelf: A string representing the value of a justify-self descriptor.
left: A string representing the value of a left descriptor.
margin: A string representing the value of a margin descriptor.
margin-block or marginBlock: A string representing the value of a margin-block descriptor.
margin-block-end or marginBlockEnd: A string representing the value of a margin-block-end descriptor.
margin-block-start or marginBlockStart: A string representing the value of a margin-block-start descriptor.
margin-bottom or marginBottom: A string representing the value of a margin-bottom descriptor.
margin-inline or marginInline: A string representing the value of a margin-inline descriptor.
margin-inline-end or marginInlineEnd: A string representing the value of a margin-inline-end descriptor.
margin-inline-start or marginInlineStart: A string representing the value of a margin-inline-start descriptor.
margin-left or marginLeft: A string representing the value of a margin-left descriptor.
margin-right or marginRight: A string representing the value of a margin-right descriptor.
margin-top or marginTop: A string representing the value of a margin-top descriptor.
max-block-size or maxBlockSize: A string representing the value of a max-block-size descriptor.
max-height or maxHeight: A string representing the value of a max-height descriptor.
max-inline-size or maxInlineSize: A string representing the value of a max-inline-size descriptor.
max-width or maxWidth: A string representing the value of a max-width descriptor.
min-block-size or minBlockSize: A string representing the value of a min-block-size descriptor.
min-height or minHeight: A string representing the value of a min-height descriptor.
min-inline-size or minInlineSize: A string representing the value of a min-inline-size descriptor.
min-width or minWidth: A string representing the value of a min-width descriptor.
place-self or placeSelf: A string representing the value of a place-self descriptor.
position-anchor or positionAnchor: A string representing the value of a position-anchor descriptor.
right: A string representing the value of a right descriptor.
top: A string representing the value of a top descriptor.
width: A string representing the value of a width descriptor.

Instance methods

No specific methods; inherits methods from its ancestor CSSStyleDeclaration.

Examples

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

Specification
CSS Anchor Positioning> # csspositiontrydescriptors>

Browser compatibility