This feature is not Baseline because it does not work in some of the most widely-used browsers.
The style read-only property of the CSSPositionTryRule interface returns a CSSPositionTryDescriptors object representing the declarations set in the body of the @position-try at-rule.
A CSSPositionTryDescriptors object.
The CSS includes a @position-try at-rule with a name of --custom-right and three descriptors.
@position-try --custom-bottom {
top: anchor(bottom);
min-width: 100px;
margin-top: 10px;
}
const myRules = document.styleSheets[0].cssRules; const tryOption = myRules[0]; // a CSSPositionTryRule console.log(tryOption.style.top); // "anchor(bottom)" console.log(tryOption.style["min-width"]); // "100px" console.log(tryOption.style.positionArea); // ""; no position-area specified
| Specification |
|---|
| CSS Anchor Positioning> # dom-csspositiontryrule-style> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
style |
125 | 125 | 131 | 111 | 26 | 125 | No | 83 | 26 | 27.0 | 125 | 26 |
CSSPositionTryDescriptors@position-tryposition-try-fallbacks
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSPositionTryRule/style