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 describes an object representing a @position-try at-rule.

CSSStyleDeclaration CSSPositionTryDescriptors

Instance properties

Inherits properties from its ancestor CSSStyleDeclaration.

The CSSPositionTryDescriptors interface defines properties that represent the CSS properties that can be set inside a @position-try at rule.

There are 35 CSS properties that can be accessed as CSS property names or camel-case. For each one:

CSSPositionTryDescriptors.propertyName

Represents the property value set in the @position-try at-rule using the camel-cased property name.

CSSPositionTryDescriptors["property-name"]

Represents the property value set in the @position-try at-rule using the CSS property name.

The instance properties are listed below:

CSS property Camel-case Property name
align-self CSSPositionTryDescriptors.alignSelf CSSPositionTryDescriptors["align-self"]
block-size CSSPositionTryDescriptors.blockSize CSSPositionTryDescriptors["block-size"]
bottom CSSPositionTryDescriptors.bottom CSSPositionTryDescriptors["bottom"]
height CSSPositionTryDescriptors.height CSSPositionTryDescriptors["height"]
inline-size CSSPositionTryDescriptors.inlineSize CSSPositionTryDescriptors["inline-size"]
inset CSSPositionTryDescriptors.inset CSSPositionTryDescriptors["inset"]
inset-area CSSPositionTryDescriptors.insetArea CSSPositionTryDescriptors["inset-area"]
inset-block CSSPositionTryDescriptors.insetBlock CSSPositionTryDescriptors["inset-block"]
inset-block-end CSSPositionTryDescriptors.insetBlockEnd CSSPositionTryDescriptors["inset-block-end"]
inset-block-start CSSPositionTryDescriptors.insetBlockStart CSSPositionTryDescriptors["inset-block-start"]
inset-inline CSSPositionTryDescriptors.insetInline CSSPositionTryDescriptors["inset-inline"]
inset-inline-end CSSPositionTryDescriptors.insetInlineEnd CSSPositionTryDescriptors["inset-inline-end"]
inset-inline-start CSSPositionTryDescriptors.insetInlineStart CSSPositionTryDescriptors["inset-inline-start"]
justify-self CSSPositionTryDescriptors.justifySelf CSSPositionTryDescriptors["justify-self"]
left CSSPositionTryDescriptors.left CSSPositionTryDescriptors["left"]
margin CSSPositionTryDescriptors.margin CSSPositionTryDescriptors["margin"]
margin-block CSSPositionTryDescriptors.marginBlock CSSPositionTryDescriptors["margin-block"]
margin-block-end CSSPositionTryDescriptors.marginBlockEnd CSSPositionTryDescriptors["margin-block-end"]
margin-block-start CSSPositionTryDescriptors.marginBlockStart CSSPositionTryDescriptors["margin-block-start"]
margin-bottom CSSPositionTryDescriptors.marginBottom CSSPositionTryDescriptors["margin-bottom"]
margin-inline CSSPositionTryDescriptors.marginInline CSSPositionTryDescriptors["margin-inline"]
margin-inline-end CSSPositionTryDescriptors.marginInlineEnd CSSPositionTryDescriptors["margin-inline-end"]
margin-inline-start CSSPositionTryDescriptors.marginInlineStart CSSPositionTryDescriptors["margin-inline-start"]
margin-left CSSPositionTryDescriptors.marginLeft CSSPositionTryDescriptors["margin-left"]
margin-right CSSPositionTryDescriptors.marginRight CSSPositionTryDescriptors["margin-right"]
margin-top CSSPositionTryDescriptors.marginTop CSSPositionTryDescriptors["margin-top"]
max-block-size CSSPositionTryDescriptors.maxBlockSize CSSPositionTryDescriptors["max-block-size"]
max-height CSSPositionTryDescriptors.maxHeight CSSPositionTryDescriptors["max-height"]
max-inline-size CSSPositionTryDescriptors.maxInlineSize CSSPositionTryDescriptors["max-inline-size"]
max-width CSSPositionTryDescriptors.maxWidth CSSPositionTryDescriptors["max-width"]
min-block-size CSSPositionTryDescriptors.minBlockSize CSSPositionTryDescriptors["min-block-size"]
min-height CSSPositionTryDescriptors.minHeight CSSPositionTryDescriptors["min-height"]
min-inline-size CSSPositionTryDescriptors.minInlineSize CSSPositionTryDescriptors["min-inline-size"]
min-width CSSPositionTryDescriptors.minWidth CSSPositionTryDescriptors["min-width"]
place-self CSSPositionTryDescriptors.placeSelf CSSPositionTryDescriptors["place-self"]
position-anchor CSSPositionTryDescriptors.positionAnchor CSSPositionTryDescriptors["position-anchor"]
right CSSPositionTryDescriptors.right CSSPositionTryDescriptors["right"]
top CSSPositionTryDescriptors.top CSSPositionTryDescriptors["top"]
width CSSPositionTryDescriptors.width CSSPositionTryDescriptors["width"]

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 {
  inset-area: right;
  width: 100px;
  margin: 0 0 0 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["inset-area"]); // "right"

Specifications

Specification
CSS Anchor Positioning
# csspositiontrydescriptors

Browser compatibility

BCD tables only load in the browser

See also