Signatur
Beschreibung
Die Eigenschaft navigation der Schnittstelle CSSViewTransitionRule gibt den Wert des gleichnamigen Deskriptors der CSS-At-Regel @view-transition zurück. Dieser Deskriptor legt fest, ob ein Dokument an dokumentübergreifenden View Transitions (Cross-Document View Transitions) teilnimmt, also ob beim Navigieren zwischen zwei Seiten desselben Ursprungs ein animierter Übergang stattfindet.
Mögliche Werte sind "auto" (das Dokument nimmt an View Transitions bei Navigationen desselben Ursprungs teil) und "none" (keine Teilnahme). Damit ein Übergang tatsächlich läuft, müssen beide Dokumente – das alte und das neue – navigation: auto setzen.
Die Eigenschaft ist nur lesbar. Nützlich ist sie vor allem für Diagnose-Werkzeuge, Tests oder Skripte, die prüfen wollen, ob eine Seite per CSS für dokumentübergreifende Übergänge vorbereitet ist. Um das Verhalten zu ändern, muss die Regel selbst ersetzt oder entfernt werden, etwa über CSSStyleSheet.deleteRule() und insertRule().
Rückgabewert
navigation-Deskriptors, typischerweise "auto" oder "none". Fehlt der Deskriptor in der Regel, wird laut Spezifikation ein leerer String zurückgegeben.Beispiele
Wert aus einem konstruierten Stylesheet auslesen
const sheet = new CSSStyleSheet();
sheet.replaceSync('@view-transition { navigation: auto; }');
const rule = sheet.cssRules[0];
console.log(rule instanceof CSSViewTransitionRule);
console.log(rule.navigation);
// Stylesheet aktivieren, damit die Regel wirkt
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];Prüfen, ob die Seite für dokumentübergreifende Übergänge vorbereitet ist
const collectViewTransitionRules = (rules, found = []) => {
for (const rule of rules) {
if (rule instanceof CSSViewTransitionRule) {
found.push(rule);
} else if (rule.cssRules) {
// Verschachtelte Regeln, z. B. in @media oder @supports
collectViewTransitionRules(rule.cssRules, found);
}
}
return found;
};
const isCrossDocumentEnabled = () => {
if (typeof CSSViewTransitionRule === 'undefined') return false;
const rules = [];
for (const sheet of document.styleSheets) {
try {
collectViewTransitionRules(sheet.cssRules, rules);
} catch {
// Fremd-Stylesheets ohne CORS werfen SecurityError
}
}
return rules.some((rule) => rule.navigation === 'auto');
};
console.log('Cross-Document View Transitions:', isCrossDocumentEnabled());Übergänge zur Laufzeit deaktivieren (Regel ersetzen)
const sheet = new CSSStyleSheet();
sheet.replaceSync('@view-transition { navigation: auto; }');
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
const disableTransitions = () => {
// navigation ist schreibgeschützt – daher Regel austauschen
sheet.deleteRule(0);
sheet.insertRule('@view-transition { navigation: none; }', 0);
console.log('Neuer Wert:', sheet.cssRules[0].navigation);
};
disableTransitions();// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung wie
rule.navigation = 'none'hat keine Wirkung (im Strict Mode gibt es einenTypeError). Zum Ändern die Regel ersetzen oder in eine@media-Abfrage einbetten, z. B.@media (prefers-reduced-motion: no-preference). - Beide Seiten nötig: Ein Übergang läuft nur, wenn altes und neues Dokument
navigation: autodeklarieren und die Navigation innerhalb desselben Ursprungs bleibt. - Verschachtelung:
@view-transition-Regeln können in@media- oder@supports-Blöcken stehen. Beim Durchsuchen voncssRulesdeshalb rekursiv vorgehen. - Cross-Origin-Stylesheets: Wer
cssRulesfremder Stylesheets ohne CORS-Freigabe liest, bekommt einenSecurityError. Den Zugriff daher intry…catchkapseln. - Browser-Unterstützung: Verfügbar in Chromium-Browsern ab Version 126 und in Safari ab 18.2. Firefox unterstützt dokumentübergreifende View Transitions bisher nicht. Vor der Nutzung mit
typeof CSSViewTransitionRule !== 'undefined'prüfen. Browser ohne Unterstützung ignorieren die At-Regel, die Seite funktioniert dort aber weiter (progressive Verbesserung).