CSSNamespaceRule.prefix — Eigenschaft · JavaScript-Referenz

Signatur

CSSNamespaceRule.prefix

Beschreibung

Die Eigenschaft prefix gehört zum Interface CSSNamespaceRule. Jedes Objekt dieses Typs steht für eine @namespace-At-Regel in einem Stylesheet. prefix gibt den Namen zurück, unter dem der Namespace in Selektoren angesprochen wird. Bei @namespace svg url(http://www.w3.org/2000/svg); ist das zum Beispiel "svg".

Wenn die Regel ohne Präfix geschrieben ist, etwa @namespace url(http://www.w3.org/1999/xhtml);, legt sie den Standard-Namespace des Stylesheets fest. In diesem Fall ist prefix ein leerer String (""), nicht null.

Gebraucht wird die Eigenschaft vor allem beim Untersuchen von Stylesheets per Skript: in Entwicklerwerkzeugen, CSS-Analysetools oder bei der Arbeit mit gemischten XML-/SVG-/MathML-Dokumenten. Die zugehörige URI liest du über CSSNamespaceRule.namespaceURI. Beide Werte zusammen ergeben die vollständige Zuordnung.

Rückgabewert

Typ

string

Beschreibung

Das Namespace-Präfix als String, z. B. "svg". Bei einer Standard-Namespace-Regel ohne Präfix ist der Wert ein leerer String "".

Beispiele

Präfix einer @namespace-Regel auslesen

// Stylesheet mit zwei Namespace-Regeln anlegen
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);

const rules = style.sheet.cssRules;
console.log(JSON.stringify(rules[0].prefix)); // Standard-Namespace
console.log(rules[1].prefix);

"" svg

Alle Namespace-Zuordnungen eines Stylesheets als Map sammeln

const getNamespaces = (sheet) => {
  const map = new Map();
  for (const rule of sheet.cssRules) {
    if (rule instanceof CSSNamespaceRule) {
      // Leeres Präfix als '(default)' kennzeichnen
      map.set(rule.prefix || '(default)', rule.namespaceURI);
    }
  }
  return map;
};

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @namespace url(http://www.w3.org/1999/xhtml);
  @namespace m url(http://www.w3.org/1998/Math/MathML);
`);

console.log(getNamespaces(sheet));

Map(2) { '(default)' => 'http://www.w3.org/1999/xhtml', 'm' => 'http://www.w3.org/1998/Math/MathML' }

Schreibschutz prüfen

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

const rule = sheet.cssRules[0];
rule.prefix = 'grafik'; // wird ignoriert (im Strict Mode: TypeError)
console.log(rule.prefix);

svg

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wird im normalen Modus stillschweigend ignoriert. Im Strict Mode (also auch in ES-Modulen) löst sie einen TypeError aus. Um das Präfix zu ändern, entfernst du die Regel mit deleteRule() und fügst sie mit insertRule() neu ein.
Leerer String statt null: Bei Standard-Namespaces ist prefix gleich "". Prüfe deshalb mit rule.prefix === '' und nicht auf null.
Position im Stylesheet: @namespace-Regeln sind nur gültig, wenn sie nach @charset und @import und vor allen anderen Regeln stehen. Regeln an falscher Stelle werden verworfen und tauchen in cssRules gar nicht auf.
Einschränkungen bei replaceSync(): Konstruierte Stylesheets verbieten @import, @namespace ist dort aber erlaubt. insertRule() mit einer @namespace-Regel wirft einen InvalidStateError, sobald das Stylesheet bereits andere Regeln als @import oder @namespace enthält.
Cross-Origin: Auf cssRules von Stylesheets fremder Herkunft ohne CORS-Freigabe darfst du nicht zugreifen (SecurityError).
Kompatibilität: Wird von allen modernen Browsern (Chrome, Edge, Firefox, Safari) seit Langem unterstützt.

Siehe auch

CSSNamespaceRule CSSNamespaceRule.namespaceURI CSSRule CSSStyleSheet.cssRules CSSStyleSheet.insertRule() CSSStyleSheet.replaceSync() CSSMediaRule.media