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.

CSSStyleDeclaration CSSPositionTryDescriptors

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.

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.

css
@position-try --custom-right {
  position-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["position-area"]); // "right"

Specifications

Specification
CSS Anchor Positioning
# csspositiontrydescriptors

Browser compatibility

BCD tables only load in the browser

See also