CSSImportRule.styleSheet — Eigenschaft · JavaScript-Referenz

Signatur

CSSImportRule.styleSheet

Beschreibung

Die schreibgeschützte Eigenschaft styleSheet eines CSSImportRule-Objekts verweist auf das CSSStyleSheet, das der Browser über die jeweilige @import-Regel geladen hat. Damit kommst du von einem übergeordneten Stylesheet aus an die Regeln der importierten Datei und kannst sie lesen oder zur Laufzeit ändern.

Typische Einsatzfälle:

Du durchsuchst alle Stylesheets einer Seite rekursiv, auch die verschachtelten Importe, zum Beispiel für CSS-Analysen, Theme-Editoren oder Entwicklerwerkzeuge.
Du ermittelst, woher eine Regel stammt. Die Eigenschaft styleSheet.href liefert die URL der importierten Datei.
Du änderst zur Laufzeit gezielt Regeln in einem importierten Stylesheet, etwa mit insertRule() oder deleteRule().

Das zurückgegebene Stylesheet hat in seiner Eigenschaft ownerRule einen Rückverweis auf die CSSImportRule. Seine Eigenschaft parentStyleSheet zeigt auf das Stylesheet, das den Import enthält. Nach aktueller CSSOM-Spezifikation kann der Wert auch null sein, etwa wenn das Laden fehlgeschlagen ist oder ein zirkulärer Import vorliegt.

Rückgabewert

Typ

CSSStyleSheet | null

Beschreibung

Das importierte CSSStyleSheet. Konnte das Stylesheet nicht geladen werden oder ist es (noch) nicht verfügbar, ist der Wert null.

Beispiele

Importiertes Stylesheet auslesen

// Angenommen: <style>@import url("theme.css");</style>
const sheet = document.styleSheets[0];
const importRule = [...sheet.cssRules].find((r) => r instanceof CSSImportRule);

if (importRule?.styleSheet) {
  console.log(importRule.href);                   // Angabe in der Regel
  console.log(importRule.styleSheet.href);        // aufgelöste absolute URL
  console.log(importRule.styleSheet.cssRules.length);
}

theme.css https://example.com/theme.css 12

Alle Regeln rekursiv inklusive Importe sammeln

const collectRules = (sheet, result = []) => {
  let rules;
  try {
    rules = sheet.cssRules; // kann bei fremdem Ursprung eine SecurityError auslösen
  } catch {
    console.warn('Kein Zugriff auf', sheet.href);
    return result;
  }
  for (const rule of rules) {
    if (rule instanceof CSSImportRule && rule.styleSheet) {
      collectRules(rule.styleSheet, result);
    } else {
      result.push(rule);
    }
  }
  return result;
};

const allRules = [...document.styleSheets].flatMap((s) => collectRules(s));
console.log(`Gefundene Regeln: ${allRules.length}`);

Gefundene Regeln: 87

Regel in ein importiertes Stylesheet einfügen

const findImport = (url) =>
  [...document.styleSheets]
    .flatMap((s) => { try { return [...s.cssRules]; } catch { return []; } })
    .find((r) => r instanceof CSSImportRule && r.href.endsWith(url));

const rule = findImport('theme.css');
const imported = rule?.styleSheet;

if (imported) {
  imported.insertRule(':root { --accent: rebeccapurple; }', imported.cssRules.length);
  console.log(imported.ownerRule === rule); // Rückverweis
}

true

// Wichtig · Fallstricke

Fremder Ursprung: Das styleSheet-Objekt bekommst du auch für importierte Dateien von einem anderen Ursprung (Origin). Ein Zugriff auf deren cssRules löst aber ohne passende CORS-Freigabe eine SecurityError aus. Setze solche Zugriffe deshalb immer in try…catch.
Kann null sein: Prüfe den Wert vor der Nutzung, zum Beispiel mit rule.styleSheet?.cssRules. Das gilt vor allem, solange das Laden noch läuft oder wenn es fehlgeschlagen ist. Ältere Browser liefern hier eventuell trotzdem ein leeres Stylesheet statt null.
Konstruierte Stylesheets: In Stylesheets, die mit new CSSStyleSheet() erzeugt wurden, sind @import-Regeln nicht erlaubt. replaceSync() ignoriert sie, replace() verwirft sie mit einer Warnung.
Schreibgeschützt: Du kannst der Eigenschaft kein anderes Stylesheet zuweisen. Das Stylesheet selbst lässt sich aber über dessen Methoden ändern.
Medienbedingungen: Das Stylesheet wird auch dann bereitgestellt, wenn die Medienabfrage der Regel (rule.media) gerade nicht zutrifft.

Siehe auch

CSSImportRule.href CSSImportRule.layerName CSSImportRule.supportsText CSSImportRule.media CSSPageRule.style