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.