跳到主要内容

Conditionizr提供浏览器定位

开发人员托德格托+$and Creative Director马克·古德伊尔+$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:它是如何工作的?
+$Motto: To take IE7 as an example: the browser would receive a global+$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+$.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.



翻译字数超限