Developer Todd Motto and creative director Mark Goodyear have released Conditionizr, a “conditional-free legacy, Retina, script and style loader”. According to the Conditionizr website, the intelligent jQuery plug-in detects an end-user’s browser and pixel ratio, enabling you to serve specific conditional JavaScript and CSS files they need. We spoke to Motto about why the plug-in was created and how it can benefit designers and developers.
.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.
Conditionizr was born with a ‘conditional free’ goal in mind and built for a cleaner markup future, using clever JavaScript. We took a Modernizr-style approach – if we can rely on feature detection with JavaScript, then of course we can use it to tackle IE, freeing developers from having to use conditional comments.
.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.
