CSSPositionTryDescriptors

Limited availability

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

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

css

@position-try --custom-right {
  position-area: right;
  width: 100px;
  margin: 0 0 0 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

BCD tables only load in the browser