CSSNamespaceRule.namespaceURI — Eigenschaft · JavaScript-Referenz

Signatur

CSSNamespaceRule.namespaceURI

Beschreibung

Die Eigenschaft namespaceURI eines CSSNamespaceRule-Objekts liefert den URI, der in einer @namespace-At-Regel eines Stylesheets angegeben ist, zum Beispiel http://www.w3.org/2000/svg bei @namespace svg url(http://www.w3.org/2000/svg);. Zurückgegeben wird nur der reine URI-Text, ohne url() und ohne Anführungszeichen.

Sinnvoll ist die Eigenschaft, wenn man Stylesheets zur Laufzeit untersucht: etwa in Entwicklerwerkzeugen, CSS-Analysetools oder beim Prüfen, ob ein Stylesheet Selektoren für SVG-, MathML- oder XHTML-Elemente mit Namensraum-Präfix verwendet. Zusammen mit CSSNamespaceRule.prefix lässt sich so jede Zuordnung von Präfix zu Namensraum auslesen.

Die Eigenschaft ist schreibgeschützt. Soll ein Namensraum geändert werden, muss die Regel über CSSStyleSheet.deleteRule() entfernt und über insertRule() neu eingefügt werden. Das ist nur möglich, solange das Stylesheet ausschließlich @import- und @namespace-Regeln enthält.

Rückgabewert

Typ

string

Beschreibung

Der Namensraum-URI als String, z. B. "http://www.w3.org/1999/xhtml". Wurde url() verwendet, wird nur der enthaltene URI zurückgegeben.

Beispiele

Namensraum-URIs eines Stylesheets auslesen

const style = document.createElement('style');
style.textContent = `
  @namespace url(http://www.w3.org/1999/xhtml);
  @namespace svg url(http://www.w3.org/2000/svg);
  svg|circle { fill: tomato; }
`;
document.head.append(style);

for (const rule of style.sheet.cssRules) {
  if (rule instanceof CSSNamespaceRule) {
    console.log(`Präfix: "${rule.prefix}" → ${rule.namespaceURI}`);
  }
}

Präfix: "" → http://www.w3.org/1999/xhtml Präfix: "svg" → http://www.w3.org/2000/svg

Prüfen, ob ein Stylesheet einen SVG-Namensraum deklariert

const SVG_NS = 'http://www.w3.org/2000/svg';

const nutztSvgNamespace = (sheet) =>
  Array.from(sheet.cssRules).some(
    (rule) => rule instanceof CSSNamespaceRule && rule.namespaceURI === SVG_NS
  );

const sheet = new CSSStyleSheet();
sheet.replaceSync('@namespace svg url("http://www.w3.org/2000/svg");');
console.log(nutztSvgNamespace(sheet));

true

Schreibschutz: Namensraum per Regel-Austausch ändern

const sheet = new CSSStyleSheet();
sheet.replaceSync('@namespace m url(http://example.com/alt);');

const rule = sheet.cssRules[0];
rule.namespaceURI = 'http://www.w3.org/1998/Math/MathML'; // wird ignoriert
console.log(rule.namespaceURI);

// Stattdessen Regel ersetzen
sheet.deleteRule(0);
sheet.insertRule('@namespace m url(http://www.w3.org/1998/Math/MathML);', 0);
console.log(sheet.cssRules[0].namespaceURI);

http://example.com/alt http://www.w3.org/1998/Math/MathML

// Wichtig · Fallstricke

Schreibgeschützt: Zuweisungen werden im nicht-strikten Modus stillschweigend ignoriert und lösen im Strict Mode (z. B. in ES-Modulen) einen TypeError aus.
@namespace-Regeln müssen nach allen @charset- und @import-Regeln und vor allen anderen Regeln stehen, sonst werden sie ignoriert und tauchen nicht in cssRules auf.
Bei Stylesheets von anderen Ursprüngen (Cross-Origin) wirft der Zugriff auf sheet.cssRules einen SecurityError, sofern kein passender CORS-Header vorhanden ist.
Nicht verwechseln mit Element.namespaceURI, das den Namensraum eines DOM-Elements liefert.
Wird von allen modernen Browsern unterstützt. Konstruierbare Stylesheets (new CSSStyleSheet()) setzen neuere Browser voraus; replaceSync() verbietet allerdings @import, nicht aber @namespace.

Siehe auch

CSSNamespaceRule.prefix XRLightProbe.probeSpace Attr.namespaceURI Element.namespaceURI CSSImportRule.layerName