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.
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.
@position-try --custom-right {
inset-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["inset-area"]); // "right"
Specifications
Specification |
---|
CSS Anchor Positioning # csspositiontrydescriptors |
Browser compatibility
BCD tables only load in the browser