CSSPositionTryDescriptors

Limited availability

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

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Die CSSPositionTryDescriptors-Schnittstelle definiert Eigenschaften, die die Liste der CSS-Deskriptoren repräsentieren, die im Körper einer @position-try at-rule festgelegt werden können.

Jeder Deskriptor im Körper der entsprechenden @position-try-At-Regel kann entweder mit seinem Eigenschaftsnamen in der Klammernotation oder der camelCase-Version des Eigenschaftennamens "propertyName" in der Punktnotation aufgerufen werden. Zum Beispiel können Sie auf die CSS-Eigenschaft "property-name" als style["property-name"] oder style.propertyName zugreifen, wobei style eine Instanz von CSSPositionTryDescriptors ist. Eine Eigenschaft mit einem einwortigen Namen wie height kann mit beiden Notationen aufgerufen werden: style["height"] oder style.height.

Hinweis: Die CSSPositionTryRule-Schnittstelle repräsentiert eine @position-try-At-Regel, und die CSSPositionTryRule.style-Eigenschaft ist eine Instanz dieses Objekts.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Vorfahren CSSStyleDeclaration.

Die folgenden Eigenschaftsnamen, in snake-case (Zugriff über Klammernotation) und camel-case (Zugriff über Punktnotation), repräsentieren jeweils den Wert eines Deskriptors in der entsprechenden @position-try-At-Regel:

align-self oder alignSelf Experimentell: Ein String, der den Wert eines align-self-Deskriptors repräsentiert.
block-size oder blockSize Experimentell: Ein String, der den Wert eines block-size-Deskriptors repräsentiert.
bottom Experimentell: Ein String, der den Wert eines bottom-Deskriptors repräsentiert.
height Experimentell: Ein String, der den Wert eines height-Deskriptors repräsentiert.
inline-size oder inlineSize Experimentell: Ein String, der den Wert eines inline-size-Deskriptors repräsentiert.
inset Experimentell: Ein String, der den Wert eines inset-Deskriptors repräsentiert.
position-area oder positionArea Experimentell: Ein String, der den Wert eines position-area-Deskriptors repräsentiert.
inset-block oder insetBlock Experimentell: Ein String, der den Wert eines inset-block-Deskriptors repräsentiert.
inset-block-end oder insetBlockEnd Experimentell: Ein String, der den Wert eines inset-block-end-Deskriptors repräsentiert.
inset-block-start oder insetBlockStart Experimentell: Ein String, der den Wert eines inset-block-start-Deskriptors repräsentiert.
inset-inline oder insetInline Experimentell: Ein String, der den Wert eines inset-inline-Deskriptors repräsentiert.
inset-inline-end oder insetInlineEnd Experimentell: Ein String, der den Wert eines inset-inline-end-Deskriptors repräsentiert.
inset-inline-start oder insetInlineStart Experimentell: Ein String, der den Wert eines inset-inline-start-Deskriptors repräsentiert.
justify-self oder justifySelf Experimentell: Ein String, der den Wert eines justify-self-Deskriptors repräsentiert.
left Experimentell: Ein String, der den Wert eines left-Deskriptors repräsentiert.
margin Experimentell: Ein String, der den Wert eines margin-Deskriptors repräsentiert.
margin-block oder marginBlock Experimentell: Ein String, der den Wert eines margin-block-Deskriptors repräsentiert.
margin-block-end oder marginBlockEnd Experimentell: Ein String, der den Wert eines margin-block-end-Deskriptors repräsentiert.
margin-block-start oder marginBlockStart Experimentell: Ein String, der den Wert eines margin-block-start-Deskriptors repräsentiert.
margin-bottom oder marginBottom Experimentell: Ein String, der den Wert eines margin-bottom-Deskriptors repräsentiert.
margin-inline oder marginInline Experimentell: Ein String, der den Wert eines margin-inline-Deskriptors repräsentiert.
margin-inline-end oder marginInlineEnd Experimentell: Ein String, der den Wert eines margin-inline-end-Deskriptors repräsentiert.
margin-inline-start oder marginInlineStart Experimentell: Ein String, der den Wert eines margin-inline-start-Deskriptors repräsentiert.
margin-left oder marginLeft Experimentell: Ein String, der den Wert eines margin-left-Deskriptors repräsentiert.
margin-right oder marginRight Experimentell: Ein String, der den Wert eines margin-right-Deskriptors repräsentiert.
margin-top oder marginTop Experimentell: Ein String, der den Wert eines margin-top-Deskriptors repräsentiert.
max-block-size oder maxBlockSize Experimentell: Ein String, der den Wert eines max-block-size-Deskriptors repräsentiert.
max-height oder maxHeight Experimentell: Ein String, der den Wert eines max-height-Deskriptors repräsentiert.
max-inline-size oder maxInlineSize Experimentell: Ein String, der den Wert eines max-inline-size-Deskriptors repräsentiert.
max-width oder maxWidth Experimentell: Ein String, der den Wert eines max-width-Deskriptors repräsentiert.
min-block-size oder minBlockSize Experimentell: Ein String, der den Wert eines min-block-size-Deskriptors repräsentiert.
min-height oder minHeight Experimentell: Ein String, der den Wert eines min-height-Deskriptors repräsentiert.
min-inline-size oder minInlineSize Experimentell: Ein String, der den Wert eines min-inline-size-Deskriptors repräsentiert.
min-width oder minWidth Experimentell: Ein String, der den Wert eines min-width-Deskriptors repräsentiert.
place-self oder placeSelf Experimentell: Ein String, der den Wert eines place-self-Deskriptors repräsentiert.
position-anchor oder positionAnchor Experimentell: Ein String, der den Wert eines position-anchor-Deskriptors repräsentiert.
right Experimentell: Ein String, der den Wert eines right-Deskriptors repräsentiert.
top Experimentell: Ein String, der den Wert eines top-Deskriptors repräsentiert.
width Experimentell: Ein String, der den Wert eines width-Deskriptors repräsentiert.

Instanz-Methoden

Keine spezifischen Methoden; erbt Methoden von seinem Vorfahren CSSStyleDeclaration.

Beispiele

Die CSS umfasst eine @position-try-At-Regel mit dem Namen --custom-right und drei Deskriptoren.

css

@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"

Spezifikationen

Specification
CSS Anchor Positioning # csspositiontrydescriptors

Browser-Kompatibilität

BCD tables only load in the browser