CSSPositionTryDescriptors

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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-self or alignSelf Experimental: A string representing the value of an align-self descriptor.
block-size or blockSize Experimental: A string representing the value of a block-size descriptor.
bottom Experimental: A string representing the value of a bottom descriptor.
height Experimental: A string representing the value of a height descriptor.
inline-size or inlineSize Experimental: A string representing the value of an inline-size descriptor.
inset Experimental: A string representing the value of an inset descriptor.
position-area or positionArea Experimental: A string representing the value of a position-area descriptor.
inset-block or insetBlock Experimental: A string representing the value of an inset-block descriptor.
inset-block-end or insetBlockEnd Experimental: A string representing the value of an inset-block-end descriptor.
inset-block-start or insetBlockStart Experimental: A string representing the value of an inset-block-start descriptor.
inset-inline or insetInline Experimental: A string representing the value of an inset-inline descriptor.
inset-inline-end or insetInlineEnd Experimental: A string representing the value of an inset-inline-end descriptor.
inset-inline-start or insetInlineStart Experimental: A string representing the value of an inset-inline-start descriptor.
justify-self or justifySelf Experimental: A string representing the value of a justify-self descriptor.
left Experimental: A string representing the value of a left descriptor.
margin Experimental: A string representing the value of a margin descriptor.
margin-block or marginBlock Experimental: A string representing the value of a margin-block descriptor.
margin-block-end or marginBlockEnd Experimental: A string representing the value of a margin-block-end descriptor.
margin-block-start or marginBlockStart Experimental: A string representing the value of a margin-block-start descriptor.
margin-bottom or marginBottom Experimental: A string representing the value of a margin-bottom descriptor.
margin-inline or marginInline Experimental: A string representing the value of a margin-inline descriptor.
margin-inline-end or marginInlineEnd Experimental: A string representing the value of a margin-inline-end descriptor.
margin-inline-start or marginInlineStart Experimental: A string representing the value of a margin-inline-start descriptor.
margin-left or marginLeft Experimental: A string representing the value of a margin-left descriptor.
margin-right or marginRight Experimental: A string representing the value of a margin-right descriptor.
margin-top or marginTop Experimental: A string representing the value of a margin-top descriptor.
max-block-size or maxBlockSize Experimental: A string representing the value of a max-block-size descriptor.
max-height or maxHeight Experimental: A string representing the value of a max-height descriptor.
max-inline-size or maxInlineSize Experimental: A string representing the value of a max-inline-size descriptor.
max-width or maxWidth Experimental: A string representing the value of a max-width descriptor.
min-block-size or minBlockSize Experimental: A string representing the value of a min-block-size descriptor.
min-height or minHeight Experimental: A string representing the value of a min-height descriptor.
min-inline-size or minInlineSize Experimental: A string representing the value of a min-inline-size descriptor.
min-width or minWidth Experimental: A string representing the value of a min-width descriptor.
place-self or placeSelf Experimental: A string representing the value of a place-self descriptor.
position-anchor or positionAnchor Experimental: A string representing the value of a position-anchor descriptor.
right Experimental: A string representing the value of a right descriptor.
top Experimental: A string representing the value of a top descriptor.
width Experimental: A string representing the value of a width descriptor.

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: 0 0 0 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

Specification
CSS Anchor Positioning # csspositiontrydescriptors

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSPositionTryDescriptors
Experimental
align-self
Experimental
alignSelf
Experimental
block-size
Experimental
blockSize
Experimental
bottom
Experimental
height
Experimental
inline-size
Experimental
inlineSize
Experimental
inset
Experimental
inset-block
Experimental
inset-block-end
Experimental
inset-block-start
Experimental
inset-inline
Experimental
inset-inline-end
Experimental
inset-inline-start
Experimental
insetBlock
Experimental
insetBlockEnd
Experimental
insetBlockStart
Experimental
insetInline
Experimental
insetInlineEnd
Experimental
insetInlineStart
Experimental
justify-self
Experimental
justifySelf
Experimental
left
Experimental
margin
Experimental
margin-block
Experimental
margin-block-end
Experimental
margin-block-start
Experimental
margin-bottom
Experimental
margin-inline
Experimental
margin-inline-end
Experimental
margin-inline-start
Experimental
margin-left
Experimental
margin-right
Experimental
margin-top
Experimental
marginBlock
Experimental
marginBlockEnd
Experimental
marginBlockStart
Experimental
marginBottom
Experimental
marginInline
Experimental
marginInlineEnd
Experimental
marginInlineStart
Experimental
marginLeft
Experimental
marginRight
Experimental
marginTop
Experimental
max-block-size
Experimental
max-height
Experimental
max-inline-size
Experimental
max-width
Experimental
maxBlockSize
Experimental
maxHeight
Experimental
maxInlineSize
Experimental
maxWidth
Experimental
min-block-size
Experimental
min-height
Experimental
min-inline-size
Experimental
min-width
Experimental
minBlockSize
Experimental
minHeight
Experimental
minInlineSize
Experimental
minWidth
Experimental
place-self
Experimental
placeSelf
Experimental
position-anchor
Experimental
position-area
Experimental
positionAnchor
Experimental
positionArea
Experimental
right
Experimental
top
Experimental
width
Experimental