CSSPositionTryRule.style — Eigenschaft · JavaScript-Referenz

Signatur

get CSSPositionTryRule.style

Beschreibung

Die Eigenschaft style einer CSSPositionTryRule gibt ein CSSPositionTryDescriptors-Objekt zurück. Es enthält die Deskriptoren, die in einer @position-try-Regel festgelegt wurden. Mit dieser At-Regel legst du beim CSS Anchor Positioning eigene Ausweichpositionen fest. Der Browser probiert sie der Reihe nach über position-try-fallbacks aus, wenn ein verankertes Element sonst aus seinem Container herausragen würde.

CSSPositionTryDescriptors erbt von CSSStyleDeclaration. Du kannst Werte also wie gewohnt lesen und schreiben: über Eigenschaften in camelCase (style.positionArea, style.marginTop), über die Bindestrich-Schreibweise (style["position-area"]) oder mit getPropertyValue() und setProperty(). Die Eigenschaft style selbst ist schreibgeschützt. Das zurückgegebene Objekt kannst du aber verändern, und Änderungen wirken sofort auf die Regel.

Erlaubt sind nur die Eigenschaften, die in @position-try gelten:

Positionierung: position-anchor und position-area
Abstände: inset-Eigenschaften (top, left, inset-block-start …)
Außenabstände: margin-Eigenschaften
Größen: width, height sowie die min-/max--Varianten, jeweils auch als logische Eigenschaften
Ausrichtung: align-self und justify-self

Typische Einsätze: Ausweichpositionen für Tooltips, Popover oder Dropdowns zur Laufzeit auslesen, fehlerhafte Regeln finden oder Abstände dynamisch anpassen, etwa passend zu einem Theme oder einer Nutzereinstellung.

Rückgabewert

Typ

CSSPositionTryDescriptors

Beschreibung

Ein Objekt, das von CSSStyleDeclaration erbt und die Deskriptoren der @position-try-Regel enthält. Du kannst es lesen und verändern.

Beispiele

Regel mit einem konstruierbaren Stylesheet anlegen und auslesen

// Stylesheet mit einer eigenen Ausweichposition erzeugen
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @position-try --unten-mit-abstand {
    position-area: bottom;
    margin-top: 8px;
    width: anchor-size(width);
  }
`);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

const rule = sheet.cssRules[0];
console.log(rule instanceof CSSPositionTryRule); // true
console.log(rule.name);
console.log(rule.style.positionArea);
console.log(rule.style.getPropertyValue("margin-top"));
console.log(rule.style.length);

true --unten-mit-abstand bottom 8px 3

Alle @position-try-Regeln im Dokument auflisten

const findPositionTryRules = () => {
  if (!("CSSPositionTryRule" in window)) return [];
  return [...document.styleSheets].flatMap((sheet) => {
    try {
      return [...sheet.cssRules];
    } catch {
      return []; // Stylesheets von fremden Origins sind nicht lesbar
    }
  }).filter((rule) => rule instanceof CSSPositionTryRule);
};

for (const rule of findPositionTryRules()) {
  console.log(`${rule.name}: ${rule.style.cssText}`);
}

--unten-mit-abstand: position-area: bottom; margin-top: 8px; width: anchor-size(width);

Abstand einer Ausweichposition zur Laufzeit ändern

const setTooltipGap = (ruleName, gapPx) => {
  const rule = [...document.adoptedStyleSheets, ...document.styleSheets]
    .flatMap((s) => { try { return [...s.cssRules]; } catch { return []; } })
    .find((r) => r instanceof CSSPositionTryRule && r.name === ruleName);

  if (!rule) return false;
  rule.style.marginTop = `${gapPx}px`;
  // Nicht erlaubte Eigenschaften werden ohne Fehlermeldung ignoriert
  rule.style.setProperty("color", "red");
  console.log(rule.style.marginTop, rule.style.getPropertyValue("color") || "(leer)");
  return true;
};

setTooltipGap("--unten-mit-abstand", 16);

16px (leer)

// Wichtig · Fallstricke

Browser-Unterstützung: Anchor Positioning und damit CSSPositionTryRule gibt es in Chromium ab Version 125 und in Safari ab Version 26. Firefox unterstützt die Funktion bisher nicht oder nur eingeschränkt. Prüfe vorher mit "CSSPositionTryRule" in window, ob die Schnittstelle vorhanden ist. Sonst löst ein instanceof-Vergleich einen ReferenceError aus.
Umbenannte Eigenschaft: In Chrome 125–128 hieß position-area noch inset-area. Ältere Browser kennen deshalb nur style.insetArea.
Nur erlaubte Deskriptoren: Eigenschaften wie color oder background übernimmt der Browser in @position-try ohne Fehlermeldung nicht. setProperty() wirft dabei keinen Fehler. Außerdem wird !important in dieser Regel verworfen.
Schreibschutz: Die Eigenschaft style selbst kannst du nicht neu zuweisen. Ändere stattdessen die Eigenschaften des zurückgegebenen Objekts oder setze style.cssText.
Fremde Stylesheets: Stylesheets von einer anderen Origin (ohne CORS) kannst du nicht lesen. Der Zugriff auf cssRules löst dann einen SecurityError aus. Fange ihn mit try/catch ab.

Siehe auch

CSSPositionTryRule.name CSSFontFaceRule.style CSSPositionValue.y CSSStyleRule.style CSSPageRule.style