CSSPositionTryDescriptors

Limited availability

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

Das CSSPositionTryDescriptors-Interface definiert Eigenschaften, die die Liste von CSS-Deskriptoren darstellen, die im Hauptteil einer @position-try At-Regel gesetzt werden können.

Jeder Deskriptor im Hauptteil der entsprechenden @position-try At-Regel kann sowohl mit seinem Eigenschaftsnamen in Klammernotation als auch mit der camelCase-Version des Eigenschaftsnamens "propertyName" in Punktnotation zugegriffen werden. Sie können zum Beispiel 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 ein-Wort-Namen wie height kann mit beiden Notationen aufgerufen werden: style["height"] oder style.height.

Hinweis: Das CSSPositionTryRule Interface 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 (über Klammernotation angesprochen) und camelCase (über Punktnotation angesprochen) repräsentieren jeweils den Wert eines Deskriptors in der entsprechenden @position-try At-Regel:

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

Instanz-Methoden

Keine spezifischen Methoden; erbt Methoden von seinem Vorfahren CSSStyleDeclaration.

Beispiele

Das CSS enthält eine @position-try At-Regel mit einem Namen von --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