Firefox Tomorrow

web api interface

CSSPositionTryDescriptors

View on MDN ↗

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 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
  • inset-block-start or insetBlockStart
  • inset-inline or insetInline
    • : A string representing the value of an inset-inline descriptor.
  • inset-inline-end or insetInlineEnd
  • inset-inline-start or insetInlineStart
  • 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
  • margin-block-start or marginBlockStart
  • 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
  • margin-inline-start or marginInlineStart
  • 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
  • max-height or maxHeight
    • : A string representing the value of a max-height descriptor.
  • max-inline-size or maxInlineSize
  • max-width or maxWidth
    • : A string representing the value of a max-width descriptor.
  • min-block-size or minBlockSize
  • min-height or minHeight
    • : A string representing the value of a min-height descriptor.
  • min-inline-size or minInlineSize
  • 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
  • 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

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also