CSSPositionTryDescriptors
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 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 CSSPositionTryRule.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-selforalignSelf-
A string representing the value of an
align-selfdescriptor. block-sizeorblockSize-
A string representing the value of a
block-sizedescriptor. bottom-
A string representing the value of a
bottomdescriptor. height-
A string representing the value of a
heightdescriptor. inline-sizeorinlineSize-
A string representing the value of an
inline-sizedescriptor. inset-
A string representing the value of an
insetdescriptor. position-areaorpositionArea-
A string representing the value of a
position-areadescriptor. inset-blockorinsetBlock-
A string representing the value of an
inset-blockdescriptor. inset-block-endorinsetBlockEnd-
A string representing the value of an
inset-block-enddescriptor. inset-block-startorinsetBlockStart-
A string representing the value of an
inset-block-startdescriptor. inset-inlineorinsetInline-
A string representing the value of an
inset-inlinedescriptor. inset-inline-endorinsetInlineEnd-
A string representing the value of an
inset-inline-enddescriptor. inset-inline-startorinsetInlineStart-
A string representing the value of an
inset-inline-startdescriptor. justify-selforjustifySelf-
A string representing the value of a
justify-selfdescriptor. left-
A string representing the value of a
leftdescriptor. margin-
A string representing the value of a
margindescriptor. margin-blockormarginBlock-
A string representing the value of a
margin-blockdescriptor. margin-block-endormarginBlockEnd-
A string representing the value of a
margin-block-enddescriptor. margin-block-startormarginBlockStart-
A string representing the value of a
margin-block-startdescriptor. margin-bottomormarginBottom-
A string representing the value of a
margin-bottomdescriptor. margin-inlineormarginInline-
A string representing the value of a
margin-inlinedescriptor. margin-inline-endormarginInlineEnd-
A string representing the value of a
margin-inline-enddescriptor. margin-inline-startormarginInlineStart-
A string representing the value of a
margin-inline-startdescriptor. margin-leftormarginLeft-
A string representing the value of a
margin-leftdescriptor. margin-rightormarginRight-
A string representing the value of a
margin-rightdescriptor. margin-topormarginTop-
A string representing the value of a
margin-topdescriptor. max-block-sizeormaxBlockSize-
A string representing the value of a
max-block-sizedescriptor. max-heightormaxHeight-
A string representing the value of a
max-heightdescriptor. max-inline-sizeormaxInlineSize-
A string representing the value of a
max-inline-sizedescriptor. max-widthormaxWidth-
A string representing the value of a
max-widthdescriptor. min-block-sizeorminBlockSize-
A string representing the value of a
min-block-sizedescriptor. min-heightorminHeight-
A string representing the value of a
min-heightdescriptor. min-inline-sizeorminInlineSize-
A string representing the value of a
min-inline-sizedescriptor. min-widthorminWidth-
A string representing the value of a
min-widthdescriptor. place-selforplaceSelf-
A string representing the value of a
place-selfdescriptor. position-anchororpositionAnchor-
A string representing the value of a
position-anchordescriptor. right-
A string representing the value of a
rightdescriptor. top-
A string representing the value of a
topdescriptor. width-
A string representing the value of a
widthdescriptor.
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.
css
@position-try --custom-right {
position-area: right;
width: 100px;
margin-left: 10px;
}
js
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
| Specification |
|---|
| CSS Anchor Positioning Module Level 1 # csspositiontrydescriptors |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSPositionTryDescriptors
|
|
|
|
|
|
|
|
|
|
|
|
|
align-self
|
|
|
|
|
|
|
|
|
|
|
|
|
alignSelf
|
|
|
|
|
|
|
|
|
|
|
|
|
block-size
|
|
|
|
|
|
|
|
|
|
|
|
|
blockSize
|
|
|
|
|
|
|
|
|
|
|
|
|
bottom
|
|
|
|
|
|
|
|
|
|
|
|
|
height
|
|
|
|
|
|
|
|
|
|
|
|
|
inline-size
|
|
|
|
|
|
|
|
|
|
|
|
|
inlineSize
|
|
|
|
|
|
|
|
|
|
|
|
|
inset
|
|
|
|
|
|
|
|
|
|
|
|
|
inset-block
|
|
|
|
|
|
|
|
|
|
|
|
|
inset-block-end
|
|
|
|
|
|
|
|
|
|
|
|
|
inset-block-start
|
|
|
|
|
|
|
|
|
|
|
|
|
inset-inline
|
|
|
|
|
|
|
|
|
|
|
|
|
inset-inline-end
|
|
|
|
|
|
|
|
|
|
|
|
|
inset-inline-start
|
|
|
|
|
|
|
|
|
|
|
|
|
insetBlock
|
|
|
|
|
|
|
|
|
|
|
|
|
insetBlockEnd
|
|
|
|
|
|
|
|
|
|
|
|
|
insetBlockStart
|
|
|
|
|
|
|
|
|
|
|
|
|
insetInline
|
|
|
|
|
|
|
|
|
|
|
|
|
insetInlineEnd
|
|
|
|
|
|
|
|
|
|
|
|
|
insetInlineStart
|
|
|
|
|
|
|
|
|
|
|
|
|
justify-self
|
|
|
|
|
|
|
|
|
|
|
|
|
justifySelf
|
|
|
|
|
|
|
|
|
|
|
|
|
left
|
|
|
|
|
|
|
|
|
|
|
|
|
margin
|
|
|
|
|
|
|
|
|
|
|
|
|
margin-block
|
|
|
|
|
|
|
|
|
|
|
|
|
margin-block-end
|
|
|
|
|
|
|
|
|
|
|
|
|
margin-block-start
|
|
|
|
|
|
|
|
|
|
|
|
|
margin-bottom
|
|
|
|
|
|
|
|
|
|
|
|
|
margin-inline
|
|
|
|
|
|
|
|
|
|
|
|
|
margin-inline-end
|
|
|
|
|
|
|
|
|
|
|
|
|
margin-inline-start
|
|
|
|
|
|
|
|
|
|
|
|
|
margin-left
|
|
|
|
|
|
|
|
|
|
|
|
|
margin-right
|
|
|
|
|
|
|
|
|
|
|
|
|
margin-top
|
|
|
|
|
|
|
|
|
|
|
|
|
marginBlock
|
|
|
|
|
|
|
|
|
|
|
|
|
marginBlockEnd
|
|
|
|
|
|
|
|
|
|
|
|
|
marginBlockStart
|
|
|
|
|
|
|
|
|
|
|
|
|
marginBottom
|
|
|
|
|
|
|
|
|
|
|
|
|
marginInline
|
|
|
|
|
|
|
|
|
|
|
|
|
marginInlineEnd
|
|
|
|
|
|
|
|
|
|
|
|
|
marginInlineStart
|
|
|
|
|
|
|
|
|
|
|
|
|
marginLeft
|
|
|
|
|
|
|
|
|
|
|
|
|
marginRight
|
|
|
|
|
|
|
|
|
|
|
|
|
marginTop
|
|
|
|
|
|
|
|
|
|
|
|
|
max-block-size
|
|
|
|
|
|
|
|
|
|
|
|
|
max-height
|
|
|
|
|
|
|
|
|
|
|
|
|
max-inline-size
|
|
|
|
|
|
|
|
|
|
|
|
|
max-width
|
|
|
|
|
|
|
|
|
|
|
|
|
maxBlockSize
|
|
|
|
|
|
|
|
|
|
|
|
|
maxHeight
|
|
|
|
|
|
|
|
|
|
|
|
|
maxInlineSize
|
|
|
|
|
|
|
|
|
|
|
|
|
maxWidth
|
|
|
|
|
|
|
|
|
|
|
|
|
min-block-size
|
|
|
|
|
|
|
|
|
|
|
|
|
min-height
|
|
|
|
|
|
|
|
|
|
|
|
|
min-inline-size
|
|
|
|
|
|
|
|
|
|
|
|
|
min-width
|
|
|
|
|
|
|
|
|
|
|
|
|
minBlockSize
|
|
|
|
|
|
|
|
|
|
|
|
|
minHeight
|
|
|
|
|
|
|
|
|
|
|
|
|
minInlineSize
|
|
|
|
|
|
|
|
|
|
|
|
|
minWidth
|
|
|
|
|
|
|
|
|
|
|
|
|
place-self
|
|
|
|
|
|
|
|
|
|
|
|
|
placeSelf
|
|
|
|
|
|
|
|
|
|
|
|
|
position-anchor
|
|
|
|
|
|
|
|
|
|
|
|
|
position-area
|
|
|
|
|
|
|
|
|
|
|
|
|
positionAnchor
|
|
|
|
|
|
|
|
|
|
|
|
|
positionArea
|
|
|
|
|
|
|
|
|
|
|
|
|
right
|
|
|
|
|
|
|
|
|
|
|
|
|
top
|
|
|
|
|
|
|
|
|
|
|
|
|
width
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Uses a non-standard name
- Has more compatibility info.