Signatur
Beschreibung
Jede Regel in einem Stylesheet wird im CSS Object Model (CSSOM) durch ein Objekt dargestellt, das von CSSRule erbt. Die Eigenschaft type gibt eine Ganzzahl zurück, die zu einer der Konstanten auf CSSRule passt, zum Beispiel CSSRule.STYLE_RULE (1), CSSRule.IMPORT_RULE (3) oder CSSRule.MEDIA_RULE (4). Damit ließ sich früher unterscheiden, ob eine Regel eine normale Selektor-Regel, eine Media Query, eine @font-face-Regel usw. ist.
Die wichtigsten Werte:
1–STYLE_RULE(CSSStyleRule)3–IMPORT_RULE(CSSImportRule)4–MEDIA_RULE(CSSMediaRule)5–FONT_FACE_RULE(CSSFontFaceRule)6–PAGE_RULE(CSSPageRule)7–KEYFRAMES_RULE(CSSKeyframesRule)8–KEYFRAME_RULE(CSSKeyframeRule)10–NAMESPACE_RULE(CSSNamespaceRule)11–COUNTER_STYLE_RULE(CSSCounterStyleRule)12–SUPPORTS_RULE(CSSSupportsRule)14–FONT_FEATURE_VALUES_RULE(CSSFontFeatureValuesRule)
Die Eigenschaft gilt als veraltet: Neue Regeltypen wie @layer, @container, @property oder @scope bekommen keine eigene Konstante mehr und liefern 0. Für neuen Code solltest du den Regeltyp stattdessen mit instanceof (z. B. rule instanceof CSSMediaRule) oder über rule.constructor.name bestimmen.
Rückgabewert
unsigned short), die einer der CSSRule-Konstanten entspricht. Für Regeltypen ohne eigene Konstante (z. B. @layer, @container) wird 0 zurückgegeben.Beispiele
Regeltypen eines Stylesheets auslesen
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
body { margin: 0; }
@media (max-width: 600px) { body { font-size: 14px; } }
@font-face { font-family: "Demo"; src: local("Arial"); }
@keyframes blink { from { opacity: 0; } to { opacity: 1; } }
`);
for (const rule of sheet.cssRules) {
console.log(rule.type, rule.constructor.name);
}Legacy-Code: Vergleich mit den CSSRule-Konstanten
// Alle Selektoren aus normalen Stilregeln sammeln (alter Stil)
const getSelectors = (sheet) =>
[...sheet.cssRules]
.filter((rule) => rule.type === CSSRule.STYLE_RULE)
.map((rule) => rule.selectorText);
const sheet = new CSSStyleSheet();
sheet.replaceSync('.btn { color: red; } @media print { .btn { display: none; } } h1 { font-weight: 700; }');
console.log(getSelectors(sheet));Moderne Alternative mit instanceof – auch für @layer und @container
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
@layer base { p { color: gray; } }
@container (min-width: 400px) { .card { padding: 2rem; } }
@media screen { p { line-height: 1.5; } }
`);
for (const rule of sheet.cssRules) {
// type liefert für neue Regeltypen nur 0
console.log(`type=${rule.type}`, rule instanceof CSSMediaRule ? 'Media' : rule.constructor.name);
}// Wichtig · Fallstricke
Veraltet: Die Eigenschaft wird aus Kompatibilitätsgründen weiterhin von allen Browsern unterstützt, sollte in neuem Code aber nicht mehr verwendet werden. Neue At-Regeln (@layer, @container, @property, @scope, @starting-style …) liefern 0 – eine Weiche über type übersieht sie also stillschweigend. Nutze stattdessen instanceof.
Nicht standardisierte Werte: Einige Konstanten waren browserspezifisch oder wurden wieder entfernt, z. B. CHARSET_RULE (2, @charset wird im CSSOM nicht mehr als Regel abgebildet), DOCUMENT_RULE (13, nur Firefox, @-moz-document), VIEWPORT_RULE (15) und REGION_STYLE_RULE (16). Verlasse dich nicht auf deren Vorhandensein.
Sicherheit/CORS: Der Zugriff auf cssRules eines Stylesheets von einer fremden Herkunft ohne passende CORS-Header löst einen SecurityError aus – dann kommst du gar nicht erst an die Regeln und deren type. Schütze solche Schleifen mit try/catch.
Die Eigenschaft ist schreibgeschützt; Zuweisungen werden ignoriert (im Strict Mode ohne Fehler, da es ein Getter ohne Setter auf dem Prototyp ist, der Wert ändert sich nicht).