Conditionizr provides browser targeting

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.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.