After much debate about a way forward past conditional statements, retina detection, and legacy content serving, Mark Goodyear and I have been working hard on a proposed solution: Conditionizr.
Table of contents
Why you’ll love Conditionizr:
Conditional free HTML tags
With legacy browsers, we often see Conditional statements wrapped around our HTML element, so the browser can use the HTML tag relevant to the browser. Conditionizr steps in to take this conditional approach one step further, detecting those IE versions, and adds the relevant class-name to the HTML tag. This means no more conditional statements on the HTML tag. Conditionizr automates the process.
Combined with class name additions, Conditionizr has an integrated script and style loading facility, allowing you to specify which scripts and styles you’d like to load for which browser. For example, a user browsing with IE7 would first receive an ‘ie7′ HTML class, then receive the ie7.js and ie7.css files that Conditionizr automatically serves. Conditionizr also has a built-in custom script loader.
Custom scripts and polyfills
Having an optional script and stylesheet per legacy browser is fantastic, but what about a custom script? This could be a polyfill, such as HTML5 Shim, which you simply specify from a local or Google CDN source, and Conditionizr simply loads it right in when the relevant browser is in use.
Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.
- Observables and Async Pipe
- Identity Checking and Performance
- Web Components <ng-template> syntax
- <ng-container> and Observable Composition
- Advanced Rendering Patterns
- Setters and Getters for Styles and Class Bindings
That went smoothly, check your email.
Less than IE version loader
Alongside specific IE script and style loader, we’ve included an optional setting to specify a ‘less than IE’ version. This means that you could load a polyfill or certain script that you would like to apply to all ‘less than’ versions. If you were to declare ‘IE9′ as your less than, it would apply a ‘lt-ie9′ class for IE6, IE7 and IE8. Any scripts would also apply to these browser versions.
Retina loading and classes
Conditionizr automatically detects a retina device and tells the browser instantly, adding a ‘retina’ class. For devices that aren’t retina, it adds a ‘no-retina’ class. Hook your retina optimisations for CSS directly from the HTML tag. You can optionally load retina specific scripts and stylesheets too.
Conditionizr is markup free, just simply include the plugin in your page, and let it work it’s magic. Conditionizr requires very little configuration, as it’s built on jQuery making the process seamless. Conditionizr comes with a few simple options, giving you the ability to turn scripts, styles, custom scripts on and off, and lots of other tools in just a few minutes. The conditional scripts and styles are served dynamically, keeping markup smart and clean.
Cross browser bonus classes
Even modern browsers can give you the odd quirk, and built-in to Conditionizr is not only legacy browser, but modern browser detection and HTML class additions. For instance, those browsing with Google Chrome, will receive a ‘chrome’ class. This feature was integrated to cover all bases when developing, and over coming strenuous browser quirks.
Cross platform bonus classes
Browsers on different platforms may give you slightly different CSS quirks, so we haven’t stopped there, Conditionizr detects the four main popular operating systems, Mac OS X, Windows, Linux and Unix, adding their CSS classes to help you out should you ever need it.
Automated flexible Loading
Once configured, Conditionizr only loads what the end-user needs. The built-in browser detector and script/style loader work together automatically, you just need to make sure the files for loading are present on the server. Conditionizr will instantly know which scripts and styles to load, and if any custom scripts are specified, and send them straight to the user.
Conditionizr integrates easily with Modernizr, combining the HTML classes to make your project development easier. Conditionizr takes a Modernizr-based approach with HTML classes, so we ensured it worked alongside the library. Combined with Modernizr, it’s the ultimate tool for front-end web development.
Against browser-sniffing? Read on
Browser sniffing is often considered unreliable, and Conditionizr was built to overcome this goal – we wanted to build a browser tool that people could actually use, that was a reliable delivery method for serving legacy content. The core functionality within Conditionizr is detecting and serving Internet Explorer legacy scripts and styles. With this in mind, we needed to bulletproof the detection process as much as possible, using a similar method to the way Google Analytics detects browsers. Combined with official Microsoft recommendations for Internet Explorer version detectioning, we set out to build a valuable front-end tool for any web project.