selectivizr – CSS3 selectors for IE – CSS3 Adventskalender Tag 19

Heute ein kurzer Tipp am Sonntag: selectivizr – CSS3 selectors for IE – ist das hilfreichste, was ich zum Thema CSS3 & Internet Explorer 6-8 empfehlen kann. Selectivizr ist eine Javascript-Bibliothek, die CSS3-Selektoren erkennt und für IE6-8 übersetzt. Als Basis muss eine andere JS-Bibliothek wie jQuery, MooTools, Dojo, Prototype, etc. eingesetzt werden.

Einbindung im Head-Bereich der Webseite:

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript>
    <link rel="stylesheet" href="[fallback css]" />
  </noscript>
<![endif]--> 

Bei der Einbindung ist folgendes zu beachten:

  • Selectivizr erkennt automatisch die beste JavaScript-Bibliothek für den Job. Wenn bereits eine Bibliothek eingesetzt wird und es unterstützt nicht die Selektoren die sie brauchen – einfach eine andere einbinden.
  • Stylesheets müssen mit eingefügt werden, Styles in <style> Tags werden nicht interpretiert.
  • Stylesheets müssen auf der gleichen Domain wie die Seite gehostet werden. Ebenso funktionieren keine lokalen Dateien.
  • Die Emulation ist nicht dynamisch. Sobald der Stile angewendet werden, werden sie fix, Änderungen am DOM werden nicht erneut interpretiert.
  • Webseiten mit Selectivizr IE müssen im Standards-Modus ausgeführt werden – stellen Sie sicher, dass eine DTD am Anfang Ihrer Seiten ist.
  • Wenn JavaScript nicht verfügbar ist, können Sie eine Fallback-Stylesheet verwenden. Fügen Sie es einfach im <noscript> Bereich, wie im Beispiel-Code oben ein.

Demo

Tag 13: :nth-child() Pseudo-Selektor Demo im IE
Tag 15: CSS3 Tabellen-Übersicht im IE

Am Tag 20 geht es im Webstandard-Blog mit „CSS3 Transitions“ weiter.

Flattr this!