CSSPositionTryDescriptors

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.

CSSStyleDeclarationCSSPositionTryDescriptors

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-left: 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

See also