dave: Stylesheets mit Javascript erzeugen.

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

  1. Gebe Deinem Stylesheet doch einfach eine ID.

    Gruß, LX

    --
    RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine ganz wunderbar. (...)
    1. 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

  2. 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

    --
    1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
    1. 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

      1. 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

        --
        X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
  3. @@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'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. 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

      1. 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

        --
        1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
    2. 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