Conditionizr for jQuery – Conditional Loader For Scripts And Styles
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:
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:
- Project Website - Conditionizr.com
- Documentation - Conditionizr.com
- Conditionizr Repository - Github.com
Thanks for the fantastic write-up Dieter. We hope you enjoy using it as much as we enjoyed creating it!
Hi Dieter,
What is the difference between conditionzr and Modernizr.load()?
I think conditionizr is lighter one compared to modernizr
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.
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!