Signatur
Beschreibung
Die Eigenschaft href der Schnittstelle CSSImportRule liefert die URL, die in einer @import-Regel steht. Dabei spielt es keine Rolle, ob sie als @import url("a.css"); oder als @import "a.css"; geschrieben wurde. Die Eigenschaft ist schreibgeschützt. Wer eine andere URL braucht, muss die Regel löschen (deleteRule()) und neu einfügen (insertRule()).
Wichtig: href gibt die URL so zurück, wie sie im Quelltext steht. Relative Pfade wie "themes/dark.css" bleiben also relativ. Die aufgelöste, absolute URL steht in rule.styleSheet.href, also in der Eigenschaft des importierten CSSStyleSheet-Objekts.
Typische Einsatzfälle sind Werkzeuge zum Prüfen von Stylesheets, Debugging-Hilfen und Code, der das Nachladen von Themes steuert. Solcher Code geht die Regeln in document.styleSheets durch und sucht darin gezielt nach @import-Abhängigkeiten.
Rückgabewert
@import-Regel angegebene URL als String, ohne url() und ohne Anführungszeichen, in der Schreibweise des Quelltexts (nicht aufgelöst).Beispiele
URL einer @import-Regel auslesen
const style = document.createElement('style');
style.textContent = `
@import url("themes/dark.css") screen;
body { margin: 0; }
`;
document.head.append(style);
const rule = style.sheet.cssRules[0];
console.log(rule instanceof CSSImportRule); // true
console.log(rule.href);Alle @import-Abhängigkeiten der Seite auflisten
const findImports = () => {
const imports = [];
for (const sheet of document.styleSheets) {
let rules;
try {
rules = sheet.cssRules; // kann bei fremden Ursprüngen fehlschlagen
} catch (err) {
console.warn('Kein Zugriff auf', sheet.href, err.name);
continue;
}
for (const rule of rules) {
if (rule instanceof CSSImportRule) {
imports.push({ quelle: sheet.href ?? '(inline)', import: rule.href });
}
}
}
return imports;
};
console.table(findImports());Rohe URL vs. aufgelöste URL vergleichen
const style = document.createElement('style');
style.textContent = '@import "../css/print.css" print;';
document.head.append(style);
const rule = style.sheet.cssRules[0];
console.log('Quelltext:', rule.href);
console.log('Aufgelöst:', rule.styleSheet?.href);
console.log('Medien:', rule.media.mediaText);// Wichtig · Fallstricke
- Nicht aufgelöst:
hrefenthält die URL so, wie sie im Quelltext steht. Für die absolute URL nimmt manrule.styleSheet?.hrefoder löst sie selbst auf, z. B. mitnew URL(rule.href, sheet.href ?? document.baseURI). - Schreibgeschützt: Eine Zuweisung an
hrefwird stillschweigend ignoriert, im Strict Mode wirft sie einenTypeError. Zum Ändern die Regel mitdeleteRule()entfernen und mitinsertRule()neu einfügen.@importmuss dabei vor allen anderen Regeln stehen (Ausnahme:@charsetund@layer-Anweisungen), sonst gibt es einenHierarchyRequestError. - Fremde Ursprünge (CORS): Der Zugriff auf
cssRuleseines Stylesheets von einer anderen Domain ohne passende CORS-Header wirft einenSecurityError. Deshalb den Zugriff immer mittry/catchabsichern. - Konstruierte Stylesheets: In Stylesheets, die mit
new CSSStyleSheet()erzeugt wurden, sind@import-Regeln nicht erlaubt.replace()undreplaceSync()ignorieren sie, dort gibt es also keineCSSImportRule. - Die Eigenschaft wird von allen modernen Browsern seit Langem unterstützt.