JavaScript & jQuery

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

31. Dezember 2012

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 über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Tags: , , ,

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen