Stylesheets mit Javascript erzeugen.

[dave]

Hi,

ich möchte mit Javascript prüfen können ob vom Browser bestimmte CSS Selektoren und Regeln unterstützt werden.
Dazu dachte ich mir ich erstelle ein Stylesheet, füge zu prüfende Regel hinzu und schau dann nach wie viele Regelen im Stylesheet sind.

Dabei bin ich auf ein Problem gestoßen.

Im Firefox ausgeführt (Ausgabe von console.log im Kommentar):

  
styleObj = document.createElement('style');  
styleObj.type = 'text/css';  
console.log(styleObj.cssRules);// undefined  
console.log(styleObj.sheet);// null  
document.body.appendChild(styleObj);  
console.log(styleObj.cssRules);// undefined  
console.log(styleObj.sheet);// StyleSheet-Objekt

In styleObj.sheet gibts dann auch cssRules.
Sprich mit styleObj.sheet.cssRules komme ich an das gewünschte Objekt.

Im IE8 (mit "rules" anstelle von "cssRules") das gleiche Ergebnis, nur dass styleObj.sheet immer undefined ist.
Also im IE8 wird immer undefined ausgegeben.

Wie komme ich jetzt in diesem Browser auf das StyleSheet-Objekt?

Nachdem das Stylesheet im body hängt kann ich auch im IE8 mit document.styleSheets[0].rules problemlos darauf zugreifen.
Allerdings finde ich das irgendwie nicht besonders schön.
Zumal ich dann herausfinden müsste an welcher Stelle mein Stylesheet kommt.

~dave