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

[LX]

Gebe Deinem Stylesheet doch einfach eine ID.

Gruß, LX

[dave]

Hi,

Gebe Deinem Stylesheet doch einfach eine ID.

Man bin ich doof.
Darauf werde ich zurück kommen wenn ich es anders nicht schaffe.
Danke.

~dave

[Matthias Apsel]

Om nah hoo pez nyeetz, dave!

ich möchte mit Javascript prüfen können ob vom Browser bestimmte CSS Selektoren und Regeln unterstützt werden.

Mit welchem Ziel? Alternative CSS-Festlegungen ala Modernizer? Matthias

[dave]

Hi,

Mit welchem Ziel? Alternative CSS-Festlegungen ala Modernizer?

Mein Ziel ist es CSS-Funktionalität in Browsern die diese nicht bieten mit Javascript nachzubauen.
Zum Beispiel prüfen ob der Browser :target kennt, und falls nicht eben mit Javascript nachhelfen.

Danke für den Link zu modernizr, irgendwie müssen die ja auch prüfen ob der Browser das CSS unterstützt.
Da kann ich sicher abschauen :D

~dave

[Cheatah]

Hi,

Zum Beispiel prüfen ob der Browser :target kennt, und falls nicht eben mit Javascript nachhelfen.

Vorsicht: Die Anzahl der Regeln ändert sich nicht, wenn ein (z.B.) IE6 die Pseudoklasse einfach in ":unknown" umbenennt.

Cheatah

[Gunnar Bittersmann]

@@dave:

nuqneH

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

Un wenn du das Stylesheet im IE nicht per document.createElement('style'), sondern per createStyleSheet() erzeugst? [http://www.quirksmode.org/dom/w3c_css.html]

(Browserweiche ggfs. per conditional compilation)

Qapla'

[dave]

Hi,

Un wenn du das Stylesheet im IE nicht per document.createElement('style'), sondern per createStyleSheet() erzeugst? [http://www.quirksmode.org/dom/w3c_css.html]

Das ist das was ich gesucht habe.

Es heist ja Google weiß alles.
Gunnar weiß auch alles, und er kann mit meinen Fragen auf jeden Fall besser umgehen als Google.

Aus der .createStyleSheet-Doku:
"You can create up to 31 styleSheet objects with the createStyleSheet method."
Das ist zwar für mich total egal, klingt aber irgendwie ein bisschen idiotisch.
Haben die da nen Counter drin und ab dem 31. Stylesheet sagen sie "jetzt reichts aber!"?

Vielen Dank.

~dave

[Matthias Apsel]

Om nah hoo pez nyeetz, dave!

Aus der .createStyleSheet-Doku: "You can create up to 31 styleSheet objects with the createStyleSheet method." ... Haben die da nen Counter drin und ab dem 31. Stylesheet sagen sie "jetzt reichts aber!"?

nach dem 31 ;-)

und da 32 eine Zweierpotenz ist, liegt es möglicherweise daran, dass die Anzahl der Stylesheets begrenzt ist, ebenso wie die Breite einer Hintergrundgrafik begrenzt ist.

Matthias

[dave]

Hi,

(Browserweiche ggfs. per conditional compilation)

Das erste mal das ich sowas sehe.
Allerdings weiß ich nicht wie ich das verwenden könnte.

In @_jscript_version steht im IE9 immer 9, auch wenn er im IE8-Modus läuft.
Und sonst scheint es keine Variable zu geben durch die ich auf die Version komme, oder?
@_jscript_build ist auch beide male die gleiche.

Ist aber für mich jetzt auch kein Problem, ich machs einfach mit feature-detection.

~dave