JavaScript & jQuery

Conditionizr für jQuery – Bedingtes Laden von JavaScript und CSS automatisiert

31. Dezember 2012
von

Conditional comments – örgs. Welcher Webdeveloper kennt nicht die Notwendigkeit, dem IE bestimmte Faxen auszutreiben, indem man ihn von bestimmten Anweisungen ausnimmt oder einbezieht. Aber auch in anderen Browsern kann es sinnvoll sein, auf deren spezielle Fähigkeiten zu reagieren und Content entsprechend angepasst zu servieren. Das jQuery-Plugin Conditionizr will ein Rundum-Sorglospaket für moderne Web-Entwicklung sein.

Conditionizr – perfekte Ergänzung zu Modernizr

Eins vorweg – Conditionizr ersetzt nicht etwa Modernizr, sondern funktioniert sogar am besten, wenn beide Scripte eingebunden sind. Conditionizr setzt auf den gleichen Klassen-Ansatz und ergänzt Modernizr daher ideal.

Im Wege der javascript-basierten Feature-Detection ermittelt Conditionizr nicht nur die Fähigkeiten der jeweiligen Browser, sondern ist sogar in der Lage, nach Betriebssystemen zu unterscheiden. Je nach gefundenen Möglichkeiten fügt Conditionizr den HTML-Elementen korrespondierende Klassen hinzu und kümmert sich um etwa erforderliches CSS, sowie JavaScript.

Dabei werden die Bedingungen nicht etwa den einzelnen HTML-Elementen angefügt, wie man das bereits kennt. Vielmehr funktioniert Conditionizr komplett ohne zusätzliches Markup, wenn man einmal von der Einbindung des Scripts, sowie den Aufruf der Konfigurationsoptionen im Kopf der Seite absieht. Bei allen unterstützten Browsern lassen sich per Konfiguration spezifisches CSS, JavaScript, sowie der Zusatz der Klassen ein- bzw. abschalten. Auch die Unterstützung der Erkennung diverser OS wird so definiert. Ebenso widmet sich Conditionizr dem Thema “Retina”. HiDPI-fähige Geräte werden ebenfalls erkannt und behandelt.

Die Basiskonfiguration sieht so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
$(function() {
    $('head').conditionizr({
        debug      : false,
        scriptSrc  : 'js/conditionizr/',
        styleSrc   : 'css/conditionizr/',
        ieLessThan : { active: false, version: '9', scripts: false, styles: false, classes: true, customScript: 'none'},
        chrome     : { scripts: false, styles: false, classes: true, customScript: 'none' },
        safari     : { scripts: false, styles: false, classes: true, customScript: 'none' },
        opera      : { scripts: false, styles: false, classes: true, customScript: 'none' },
        firefox    : { scripts: false, styles: false, classes: true, customScript: 'none' },
        ie10       : { scripts: false, styles: false, classes: true, customScript: 'none' },
        ie9        : { scripts: false, styles: false, classes: true, customScript: 'none' },
        ie8        : { scripts: false, styles: false, classes: true, customScript: 'none' },
        ie7        : { scripts: false, styles: false, classes: true, customScript: 'none' },
        ie6        : { scripts: false, styles: false, classes: true, customScript: 'none' },
        retina     : { scripts: false, styles: false, classes: true, customScript: 'none' },
        mac        : true,
        win        : true,
        x11        : true,
        linux      : true
    });
});
</script>

Wie Sie sehen, erlaubt Conditionizr zusätzlich zu den integrierten Styles und Scripts, die die gängigen Besonderheiten bereits abdecken, explizit auch die Angabe eigener Scripts, mit denen man gezielt Fähigkeiten einzelner Browser nach eigenem Gusto ansprechen kann. Man ist also auf die Code-Basis, so wie sie die Entwickler Todd Motto und Mark Goodyear angelegt haben, nicht beschränkt.

Conditionizr steht auf Github zur kostenlosen Verwendung bereit. Da das Projekt unter der liberalen MIT-Lizenz steht, kann es sowohl für private, wie kommerzielle Zwecke verwendet werden. Ich habe es direkt in meinen Werkzeugkasten integriert.

Links zum Beitrag:

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , , ,

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!