'Conditional-free' jQuery plug-in assists with legacy and hi-res scripts and styles
.net: Why did you create Conditionizr?
Motto: There’s a gap in any web developer’s toolkit when it comes to properly dealing with Internet Explorer and legacy content serving. We rely on conditional statements, which clutter up our websites. It’s an ancient technique that among HTML5 just feels wrong.
.net: What use-cases is it appropriate for?
Motto: It’s appropriate for all cases, Conditionizr was created for integration within absolutely any website project. For client work and any commercial websites, it’s a perfect solution, backdating to even IE6 support.
Maintaining integrity in source code is a massive concern for web developers, and so we ensured Conditionizr would be smart and invisible. It serves up necessary content only when it’s needed, enhancing performance on all browsers, not just modern ones.
.net: How does it work?
Motto: To take IE7 as an example: the browser would receive a global ie class on the HTML tag, as well as an ie7 class, followed by a Retina and operating system check, and then appended classes. This gives you a full suite of classes for pinpoint targeting.
Conditionizr also includes a custom script ability, enabling you to polyfill legacy browsers with ease and without mark-up! You can include things such as HTML5 Shim, CSS3 mediaqueries.js and much more. Also, Conditionizr’s not resource-heavy and the minified source is only 3kB. Even if you’re loading for just one browser, it’s not going to make any noticeable difference.
.net: On the Retina side of things, what benefits does Conditionizr bring over existing methods?
Motto: Existing methods include media queries to serve images to Retina devices by targeting their DPI. Conditionizr has a clever tool built in which will add a retina class to the HTML tag, and a no-retina tag if it’s not a Retina device – allowing progressive enhancement techniques following a Modernizr pattern.
It also makes it easy to optimise graphics that aren’t dependent on media queries. Using .retina and .no-retina is much simpler and lighter in CSS. The Retina detection tool also includes a style, script and ability to load a custom script. This makes integration with existing Retina plug-ins seamless.