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
oralignSelf
Experimental-
A string representing the value of an
align-self
descriptor. block-size
orblockSize
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
orinlineSize
Experimental-
A string representing the value of an
inline-size
descriptor. inset
Experimental-
A string representing the value of an
inset
descriptor. position-area
orpositionArea
Experimental-
A string representing the value of a
position-area
descriptor. inset-block
orinsetBlock
Experimental-
A string representing the value of an
inset-block
descriptor. inset-block-end
orinsetBlockEnd
Experimental-
A string representing the value of an
inset-block-end
descriptor. inset-block-start
orinsetBlockStart
Experimental-
A string representing the value of an
inset-block-start
descriptor. inset-inline
orinsetInline
Experimental-
A string representing the value of an
inset-inline
descriptor. inset-inline-end
orinsetInlineEnd
Experimental-
A string representing the value of an
inset-inline-end
descriptor. inset-inline-start
orinsetInlineStart
Experimental-
A string representing the value of an
inset-inline-start
descriptor. justify-self
orjustifySelf
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
ormarginBlock
Experimental-
A string representing the value of a
margin-block
descriptor. margin-block-end
ormarginBlockEnd
Experimental-
A string representing the value of a
margin-block-end
descriptor. margin-block-start
ormarginBlockStart
Experimental-
A string representing the value of a
margin-block-start
descriptor. margin-bottom
ormarginBottom
Experimental-
A string representing the value of a
margin-bottom
descriptor. margin-inline
ormarginInline
Experimental-
A string representing the value of a
margin-inline
descriptor. margin-inline-end
ormarginInlineEnd
Experimental-
A string representing the value of a
margin-inline-end
descriptor. margin-inline-start
ormarginInlineStart
Experimental-
A string representing the value of a
margin-inline-start
descriptor. margin-left
ormarginLeft
Experimental-
A string representing the value of a
margin-left
descriptor. margin-right
ormarginRight
Experimental-
A string representing the value of a
margin-right
descriptor. margin-top
ormarginTop
Experimental-
A string representing the value of a
margin-top
descriptor. max-block-size
ormaxBlockSize
Experimental-
A string representing the value of a
max-block-size
descriptor. max-height
ormaxHeight
Experimental-
A string representing the value of a
max-height
descriptor. max-inline-size
ormaxInlineSize
Experimental-
A string representing the value of a
max-inline-size
descriptor. max-width
ormaxWidth
Experimental-
A string representing the value of a
max-width
descriptor. min-block-size
orminBlockSize
Experimental-
A string representing the value of a
min-block-size
descriptor. min-height
orminHeight
Experimental-
A string representing the value of a
min-height
descriptor. min-inline-size
orminInlineSize
Experimental-
A string representing the value of a
min-inline-size
descriptor. min-width
orminWidth
Experimental-
A string representing the value of a
min-width
descriptor. place-self
orplaceSelf
Experimental-
A string representing the value of a
place-self
descriptor. position-anchor
orpositionAnchor
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.
@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
BCD tables only load in the browser