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.nameRead only-
Represents the name of the position try option specified by the
@position-tryat-rule's<dashed-ident>. CSSPositionTryRule.styleRead only-
A
CSSPositionTryDescriptorsobject that represents the declarations set in the body of the@position-tryat-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;
}
js
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"
Specifications
| Specification |
|---|
| CSS Anchor Positioning Module Level 1 # csspositiontryrule |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSPositionTryRule
|
|
|
|
|
|
|
|
|
|
|
|
|
name
|
|
|
|
|
|
|
|
|
|
|
|
|
style
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support