CSSPositionTryRule

Baseline 2026

Newly available

Since January 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The CSSPositionTryRule interface describes an object representing a @position-try at-rule.

Instance properties

Inherits properties from its ancestor CSSRule.

CSSPositionTryRule.name Read only: Represents the name of the position try option specified by the @position-try at-rule's <dashed-ident>.
CSSPositionTryRule.style Read only: A CSSPositionTryDescriptors object that represents the declarations set in the body of the @position-try at-rule.

Instance methods

No specific methods; inherits methods from its ancestor CSSRule.

Examples

The CSS includes a @position-try at-rule with a name of --custom-left and three descriptors.

css

@position-try --custom-left {
  position-area: left;
  width: 20%;
  max-width: 200px;
  margin-right: 10px;
}

const myRules = document.styleSheets[0].cssRules;
const tryOption = myRules[0]; // a CSSPositionTryRule
console.log(tryOption); // "[object CSSPositionTryRule]"
console.log(tryOption.name); // "--custom-left"
console.log(tryOption.style); // "[object CSSPositionTryDescriptors]"
console.log(tryOption.style.maxWidth); // "200px"