StyleSheet.type — Eigenschaft · JavaScript-Referenz

Signatur

StyleSheet.type

Beschreibung

Die Eigenschaft type des Interfaces StyleSheet gibt als Zeichenkette an, in welcher Sprache das Stylesheet geschrieben ist. Sie ist schreibgeschützt. Da Browser heute ausschließlich CSS als Stylesheet-Sprache unterstützen, liefert sie praktisch immer "text/css".

Man findet die Eigenschaft auf jedem Eintrag von document.styleSheets, also auf CSSStyleSheet-Objekten, die aus <link rel="stylesheet">- oder <style>-Elementen stammen. Auch über new CSSStyleSheet() erzeugte Stylesheets (Constructable Stylesheets) liefern "text/css".

Nützlich ist type vor allem beim Debuggen, in Werkzeugen, die Stylesheets auflisten, oder für defensive Prüfungen in generischem Code. Für eine echte Unterscheidung von Stylesheet-Typen ist sie heute kaum relevant, weil es neben CSS keine anderen Sprachen gibt.

Rückgabewert

Typ

string

Beschreibung

Die Stylesheet-Sprache als MIME-Typ, in allen aktuellen Browsern "text/css".

Beispiele

Typ aller Stylesheets eines Dokuments ausgeben

// Listet jedes geladene Stylesheet mit Typ und Herkunft auf
for (const sheet of document.styleSheets) {
  const herkunft = sheet.href ?? `<${sheet.ownerNode?.nodeName.toLowerCase()}>`;
  console.log(sheet.type, herkunft);
}

text/css https://example.com/main.css text/css <style>

Constructable Stylesheet prüfen

const sheet = new CSSStyleSheet();
sheet.replaceSync('body { margin: 0; }');
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

console.log(sheet.type);

text/css

Defensives Filtern auf CSS-Stylesheets

// Nur CSS-Stylesheets berücksichtigen, auf deren Regeln zugegriffen werden darf
const cssSheets = [...document.styleSheets].filter((sheet) => {
  if (sheet.type !== 'text/css') return false;
  try {
    return sheet.cssRules.length >= 0; // wirft bei fremden Ursprüngen
  } catch {
    return false;
  }
});

console.log(`${cssSheets.length} lesbare CSS-Stylesheets`);

3 lesbare CSS-Stylesheets

// Wichtig · Fallstricke

Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird still ignoriert bzw. wirft im Strict Mode einen TypeError.
Der Wert ist praktisch immer "text/css", auch wenn das type-Attribut am <style>- oder <link>-Element fehlt. Nicht mit dem HTML-Attribut HTMLStyleElement.type verwechseln: Dieses spiegelt nur den Attributwert wider und kann leer sein.
Stylesheets mit unbekanntem type-Attribut (z. B. type="text/less") lädt der Browser gar nicht erst. Sie erscheinen daher nicht in document.styleSheets.
type lässt sich auch bei Stylesheets von fremden Ursprüngen lesen. Ein Zugriff auf deren cssRules wirft dagegen ohne CORS eine SecurityError-Ausnahme.
Die Eigenschaft funktioniert in allen modernen Browsern und im Internet Explorer.

Siehe auch

StyleSheet CSSStyleSheet Document.styleSheets StyleSheet.href StyleSheet.disabled StyleSheet.ownerNode CSSStyleRule.style