CSSPositionTryDescriptors
{{APIRef("CSSOM")}}
{{SeeCompatTable}}
The CSSPositionTryDescriptors
interface defines properties that represent the list of CSS descriptors that can be set in the body of a {{cssxref("@position-try")}}
at-rule.
Each descriptor in the body of the corresponding {{cssxref("@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 {{cssxref("height")}}
can be accessed using either notation: style["height"]
or style.height
.
[!NOTE] The
{{domxref("CSSPositionTryRule")}}
interface represents a{{cssxref("@position-try")}}
at-rule, and the{{domxref("CSSPositionTryRule.style")}}
property is an instance of this object.
{{InheritanceDiagram}}
Instance properties
Inherits properties from its ancestor {{domxref("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
oralignSelf
{{experimental_inline}}
- : A string representing the value of an
{{cssxref("align-self")}}
descriptor.
- : A string representing the value of an
block-size
orblockSize
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("block-size")}}
descriptor.
- : A string representing the value of a
bottom
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("bottom")}}
descriptor.
- : A string representing the value of a
height
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("height")}}
descriptor.
- : A string representing the value of a
inline-size
orinlineSize
{{experimental_inline}}
- : A string representing the value of an
{{cssxref("inline-size")}}
descriptor.
- : A string representing the value of an
inset
{{experimental_inline}}
- : A string representing the value of an
{{cssxref("inset")}}
descriptor.
- : A string representing the value of an
position-area
orpositionArea
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("position-area")}}
descriptor.
- : A string representing the value of a
inset-block
orinsetBlock
{{experimental_inline}}
- : A string representing the value of an
{{cssxref("inset-block")}}
descriptor.
- : A string representing the value of an
inset-block-end
orinsetBlockEnd
{{experimental_inline}}
- : A string representing the value of an
{{cssxref("inset-block-end")}}
descriptor.
- : A string representing the value of an
inset-block-start
orinsetBlockStart
{{experimental_inline}}
- : A string representing the value of an
{{cssxref("inset-block-start")}}
descriptor.
- : A string representing the value of an
inset-inline
orinsetInline
{{experimental_inline}}
- : A string representing the value of an
{{cssxref("inset-inline")}}
descriptor.
- : A string representing the value of an
inset-inline-end
orinsetInlineEnd
{{experimental_inline}}
- : A string representing the value of an
{{cssxref("inset-inline-end")}}
descriptor.
- : A string representing the value of an
inset-inline-start
orinsetInlineStart
{{experimental_inline}}
- : A string representing the value of an
{{cssxref("inset-inline-start")}}
descriptor.
- : A string representing the value of an
justify-self
orjustifySelf
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("justify-self")}}
descriptor.
- : A string representing the value of a
left
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("left")}}
descriptor.
- : A string representing the value of a
margin
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("margin")}}
descriptor.
- : A string representing the value of a
margin-block
ormarginBlock
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("margin-block")}}
descriptor.
- : A string representing the value of a
margin-block-end
ormarginBlockEnd
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("margin-block-end")}}
descriptor.
- : A string representing the value of a
margin-block-start
ormarginBlockStart
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("margin-block-start")}}
descriptor.
- : A string representing the value of a
margin-bottom
ormarginBottom
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("margin-bottom")}}
descriptor.
- : A string representing the value of a
margin-inline
ormarginInline
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("margin-inline")}}
descriptor.
- : A string representing the value of a
margin-inline-end
ormarginInlineEnd
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("margin-inline-end")}}
descriptor.
- : A string representing the value of a
margin-inline-start
ormarginInlineStart
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("margin-inline-start")}}
descriptor.
- : A string representing the value of a
margin-left
ormarginLeft
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("margin-left")}}
descriptor.
- : A string representing the value of a
margin-right
ormarginRight
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("margin-right")}}
descriptor.
- : A string representing the value of a
margin-top
ormarginTop
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("margin-top")}}
descriptor.
- : A string representing the value of a
max-block-size
ormaxBlockSize
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("max-block-size")}}
descriptor.
- : A string representing the value of a
max-height
ormaxHeight
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("max-height")}}
descriptor.
- : A string representing the value of a
max-inline-size
ormaxInlineSize
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("max-inline-size")}}
descriptor.
- : A string representing the value of a
max-width
ormaxWidth
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("max-width")}}
descriptor.
- : A string representing the value of a
min-block-size
orminBlockSize
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("min-block-size")}}
descriptor.
- : A string representing the value of a
min-height
orminHeight
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("min-height")}}
descriptor.
- : A string representing the value of a
min-inline-size
orminInlineSize
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("min-inline-size")}}
descriptor.
- : A string representing the value of a
min-width
orminWidth
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("min-width")}}
descriptor.
- : A string representing the value of a
place-self
orplaceSelf
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("place-self")}}
descriptor.
- : A string representing the value of a
position-anchor
orpositionAnchor
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("position-anchor")}}
descriptor.
- : A string representing the value of a
right
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("right")}}
descriptor.
- : A string representing the value of a
top
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("top")}}
descriptor.
- : A string representing the value of a
width
{{experimental_inline}}
- : A string representing the value of a
{{cssxref("width")}}
descriptor.
- : A string representing the value of a
Instance methods
No specific methods; inherits methods from its ancestor {{domxref("CSSStyleDeclaration")}}
.
Examples
The CSS includes a @position-try
at-rule with a name of --custom-right
and three descriptors.
@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
{{Specifications}}
Browser compatibility
{{Compat}}
See also
{{DOMxRef("CSSPositionTryRule")}}
{{cssxref("@position-try")}}
{{cssxref("position-try-fallbacks")}}
- CSS anchor positioning module
- Using CSS anchor positioning
- Handling overflow: try options and conditional hiding