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 vor der Verwendung auf produktiven Webseiten.

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

Jeder Deskriptor im Body der entsprechenden @position-try At-Regel kann entweder mit seinem Eigenschaftsnamen in der Bracket-Notation oder der Camel-Case-Version des Eigenschaftsnamens "propertyName" in der Punkt-Notation aufgerufen werden. Zum Beispiel können Sie die CSS-Eigenschaft "property-name" als style["property-name"] oder style.propertyName aufrufen, wobei style eine CSSPositionTryDescriptors-Instanz ist. Eine Eigenschaft mit einem einteiligen 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 (zugänglich über Bracket-Notation) und Camel-Case (zugänglich über Punkt-Notation), 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 darstellt.
block-size oder blockSize Experimentell: Ein String, der den Wert eines block-size Deskriptors darstellt.
bottom Experimentell: Ein String, der den Wert eines bottom Deskriptors darstellt.
height Experimentell: Ein String, der den Wert eines height Deskriptors darstellt.
inline-size oder inlineSize Experimentell: Ein String, der den Wert eines inline-size Deskriptors darstellt.
inset Experimentell: Ein String, der den Wert eines inset Deskriptors darstellt.
position-area oder positionArea Experimentell: Ein String, der den Wert eines position-area Deskriptors darstellt.
inset-block oder insetBlock Experimentell: Ein String, der den Wert eines inset-block Deskriptors darstellt.
inset-block-end oder insetBlockEnd Experimentell: Ein String, der den Wert eines inset-block-end Deskriptors darstellt.
inset-block-start oder insetBlockStart Experimentell: Ein String, der den Wert eines inset-block-start Deskriptors darstellt.
inset-inline oder insetInline Experimentell: Ein String, der den Wert eines inset-inline Deskriptors darstellt.
inset-inline-end oder insetInlineEnd Experimentell: Ein String, der den Wert eines inset-inline-end Deskriptors darstellt.
inset-inline-start oder insetInlineStart Experimentell: Ein String, der den Wert eines inset-inline-start Deskriptors darstellt.
justify-self oder justifySelf Experimentell: Ein String, der den Wert eines justify-self Deskriptors darstellt.
left Experimentell: Ein String, der den Wert eines left Deskriptors darstellt.
margin Experimentell: Ein String, der den Wert eines margin Deskriptors darstellt.
margin-block oder marginBlock Experimentell: Ein String, der den Wert eines margin-block Deskriptors darstellt.
margin-block-end oder marginBlockEnd Experimentell: Ein String, der den Wert eines margin-block-end Deskriptors darstellt.
margin-block-start oder marginBlockStart Experimentell: Ein String, der den Wert eines margin-block-start Deskriptors darstellt.
margin-bottom oder marginBottom Experimentell: Ein String, der den Wert eines margin-bottom Deskriptors darstellt.
margin-inline oder marginInline Experimentell: Ein String, der den Wert eines margin-inline Deskriptors darstellt.
margin-inline-end oder marginInlineEnd Experimentell: Ein String, der den Wert eines margin-inline-end Deskriptors darstellt.
margin-inline-start oder marginInlineStart Experimentell: Ein String, der den Wert eines margin-inline-start Deskriptors darstellt.
margin-left oder marginLeft Experimentell: Ein String, der den Wert eines margin-left Deskriptors darstellt.
margin-right oder marginRight Experimentell: Ein String, der den Wert eines margin-right Deskriptors darstellt.
margin-top oder marginTop Experimentell: Ein String, der den Wert eines margin-top Deskriptors darstellt.
max-block-size oder maxBlockSize Experimentell: Ein String, der den Wert eines max-block-size Deskriptors darstellt.
max-height oder maxHeight Experimentell: Ein String, der den Wert eines max-height Deskriptors darstellt.
max-inline-size oder maxInlineSize Experimentell: Ein String, der den Wert eines max-inline-size Deskriptors darstellt.
max-width oder maxWidth Experimentell: Ein String, der den Wert eines max-width Deskriptors darstellt.
min-block-size oder minBlockSize Experimentell: Ein String, der den Wert eines min-block-size Deskriptors darstellt.
min-height oder minHeight Experimentell: Ein String, der den Wert eines min-height Deskriptors darstellt.
min-inline-size oder minInlineSize Experimentell: Ein String, der den Wert eines min-inline-size Deskriptors darstellt.
min-width oder minWidth Experimentell: Ein String, der den Wert eines min-width Deskriptors darstellt.
place-self oder placeSelf Experimentell: Ein String, der den Wert eines place-self Deskriptors darstellt.
position-anchor oder positionAnchor Experimentell: Ein String, der den Wert eines position-anchor Deskriptors darstellt.
right Experimentell: Ein String, der den Wert eines right Deskriptors darstellt.
top Experimentell: Ein String, der den Wert eines top Deskriptors darstellt.
width Experimentell: 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

Browser-Kompatibilität

BCD tables only load in the browser