Jan 01 2013

Conditionizr for jQuery – Conditional Loader For Scripts And Styles

Advertisement

Conditional comments. Who as a web developer has never been confronted with the necessity of dealing with IE by the use of conditional comments? IE has had no way of getting round these methods of handling quirks and insufficiencies, but also in other browsers targeting their special capabilities can have its advantages. Wouldn’t it be great if we were able to serve contents in the most optimal way to any user out there, regardless of their devices and browsers? The jQuery plugin Conditionizr promises to deliver just that solution for the most modern web developments out there.

Conditionizr – Perfect Supplement To Modernizr

First things first – Conditionizr does not intend to replace Modernizr, nor would it be able to. Instead is has been developed as the perfect supplement, so that both solutions work best when used cooperatively. Conditionizr is based on the same classes approach Modernizr is, thus making integration seamless.

Through the use of javascript-based feature detection, Conditionizr is not only able to determine which browsers are in use on the client-side but also which OS they are running on and whether the device driving it is retina-capable or not. According to the found possibilities Conditionizr adds corresponding classes to the HTML elements and cares for necessary CSS and JavaScript to optimally support the findings.

Instead of adding the conditions to the markup, Conditionizr works completely markup-free. All you have to do is call the script right after jQuery and Modernizr (if you want to take advantage of that) and add a configuration part to the head of your document. All supported browsers can be configured to how far the influence of Conditionizr shall go. You can choose to en- or disable the use of specific classes, styles and scripts separately. In the same way you can define whether Conditionizr shall take care of OS and retina detection.

A basic configuration script could look like this:

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>

As you may have noticed, Conditionizr also allows the use of custom scripts, which allows you to conditionally target browsers or devices according to your own liking or necessities of the project. That way you are not limited to the functionality the developers Todd Motto and Mark Goodyear had in forethought for you..

Conditionizr is available via Github free of charge. As the project is equipped with the liberal MIT license, it can be used in personal as well as in commercial projects. I spontaneously integrated it into my tool set and so should you.

Related Links:

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
  • Todd Motto, 02 January 2013

    Thanks for the fantastic write-up Dieter. We hope you enjoy using it as much as we enjoyed creating it!

  • Ezequiel Lavaca, 02 January 2013

    Hi Dieter,

    What is the difference between conditionzr and Modernizr.load()?

    • Dogan Kutbay, 05 January 2013

      I think conditionizr is lighter one compared to modernizr

      • Todd Motto, 29 January 2013

        Conditionizr has it’s own script and style loader. It’s very different to Modernizr. Modernizr tests features, whereas Conditionizr serves content based on the browser in use, including any polyfills (global level polyfills such as HTML5 Shim, Respond.js).

        Conditionizr is now jQuery free after such a great response, and 50% faster as a pure JavaScript plugin.

  • Christopher Davis, 04 April 2013

    Fantastic tip, Dieter. One of my staff members turned me on to Conditionizr and now I’m reading all I can. Reason for my reply here? 17 years experience with web, and like you, I started by coding pages for Netscape. Using NotePad! Your bio made my day!

search form
 
image description image description