docs.rodeo

MDN Web Docs mirror

CSSPositionTryDescriptors

{{APIRef("CSSOM")}} 

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

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

[!NOTE] The {{domxref("CSSPositionTryRule")}}  interface represents a {{cssxref("@position-try")}}  at-rule, and the {{domxref("CSSPositionTryRule.style")}}  property is an instance of this object.

{{InheritanceDiagram}} 

Instance properties

Inherits properties from its ancestor {{domxref("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:

Instance methods

No specific methods; inherits methods from its ancestor {{domxref("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

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN