CSSPositionTryDescriptors

Limited availability

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

TheCSSPositionTryDescriptors interface defines properties that represent the list of CSS descriptors that can be set in the body of a@position-tryat-rule.

Each descriptor in the body of the corresponding@position-try at-rule can be accessed using either its property name inbracket notation or the camel-case version of the property name "propertyName" indot notation.For example, you can access the CSS property "property-name" asstyle["property-name"] orstyle.propertyName, wherestyle is aCSSPositionTryDescriptors instance.A property with a single-word name likeheight can be accessed using either notation:style["height"] orstyle.height.

Note:TheCSSPositionTryRule interface represents a@position-try at-rule, and theCSSPositionTryRule.style property is an instance of this object.

Instance properties

Inherits properties from its ancestorCSSStyleDeclaration.

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 oralignSelf: A string representing the value of analign-self descriptor.
block-size orblockSize: A string representing the value of ablock-size descriptor.
bottom: A string representing the value of abottom descriptor.
height: A string representing the value of aheight descriptor.
inline-size orinlineSize: A string representing the value of aninline-size descriptor.
inset: A string representing the value of aninset descriptor.
position-area orpositionArea: A string representing the value of aposition-area descriptor.
inset-block orinsetBlock: A string representing the value of aninset-block descriptor.
inset-block-end orinsetBlockEnd: A string representing the value of aninset-block-end descriptor.
inset-block-start orinsetBlockStart: A string representing the value of aninset-block-start descriptor.
inset-inline orinsetInline: A string representing the value of aninset-inline descriptor.
inset-inline-end orinsetInlineEnd: A string representing the value of aninset-inline-end descriptor.
inset-inline-start orinsetInlineStart: A string representing the value of aninset-inline-start descriptor.
justify-self orjustifySelf: A string representing the value of ajustify-self descriptor.
left: A string representing the value of aleft descriptor.
margin: A string representing the value of amargin descriptor.
margin-block ormarginBlock: A string representing the value of amargin-block descriptor.
margin-block-end ormarginBlockEnd: A string representing the value of amargin-block-end descriptor.
margin-block-start ormarginBlockStart: A string representing the value of amargin-block-start descriptor.
margin-bottom ormarginBottom: A string representing the value of amargin-bottom descriptor.
margin-inline ormarginInline: A string representing the value of amargin-inline descriptor.
margin-inline-end ormarginInlineEnd: A string representing the value of amargin-inline-end descriptor.
margin-inline-start ormarginInlineStart: A string representing the value of amargin-inline-start descriptor.
margin-left ormarginLeft: A string representing the value of amargin-left descriptor.
margin-right ormarginRight: A string representing the value of amargin-right descriptor.
margin-top ormarginTop: A string representing the value of amargin-top descriptor.
max-block-size ormaxBlockSize: A string representing the value of amax-block-size descriptor.
max-height ormaxHeight: A string representing the value of amax-height descriptor.
max-inline-size ormaxInlineSize: A string representing the value of amax-inline-size descriptor.
max-width ormaxWidth: A string representing the value of amax-width descriptor.
min-block-size orminBlockSize: A string representing the value of amin-block-size descriptor.
min-height orminHeight: A string representing the value of amin-height descriptor.
min-inline-size orminInlineSize: A string representing the value of amin-inline-size descriptor.
min-width orminWidth: A string representing the value of amin-width descriptor.
place-self orplaceSelf: A string representing the value of aplace-self descriptor.
position-anchor orpositionAnchor: A string representing the value of aposition-anchor descriptor.
right: A string representing the value of aright descriptor.
top: A string representing the value of atop descriptor.
width: A string representing the value of awidth descriptor.

Instance methods

No specific methods; inherits methods from its ancestorCSSStyleDeclaration.

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;}

const myRules = document.styleSheets[0].cssRules;const tryOption = myRules[0]; // a CSSPositionTryRuleconsole.log(tryOption.style); // "[object CSSPositionTryDescriptors]"console.log(tryOption.style.margin); // "0 0 0 10px"console.log(tryOption.style["position-area"]); // "right"