Detects front-end environments and binds the results to the conditionizr Object. <1KB module for async callbacks, conditional script/style loading, automated polyfilling, inline boolean evaluations, classNames for styling overrides, custom tests and more.
Read the developer documentation.
By @toddmotto and @markgdyr.
Use the repository hook:
bower install conditionizr
The Conditionizr core is made up of several public methods.
The config API allows you to easily configure your conditional environments, once tests are added. You have a choice of loading conditional scripts, styles and class names per config test, as well as specifying an asset path to where your files are.
conditionizr.config({
assets: '/path/to/my/assets/',
tests: {
'safari': ['script', 'style', 'class']
}
});This would then load browser specific tweaks, or you could use the global class override:
<html class="safari">
<head>
<script src="assets/conditionizr/safari.js"></script>
<link href="assets/conditionizr/safari.css" rel="stylesheet">
</head>
</html>Custom tests can be passed into the Conditionizr core and used with all APIs, making your conditional coding seamless. Conditionizr will handle all the hard work for you, you just need to provide it a test that returns a boolean, true/false. This can be done via a function callback or inline Boolean.
conditionizr.add('safari', /constructor/i.test(window.HTMLElement));conditionizr.add('safari', function () {
return /constructor/i.test(window.HTMLElement);
});Using .on() you can create custom callbacks for when conditional tests return true which are your best bet if you can avoid loading an external script and style, for instance if I’ve added a test for Safari, when a user is running Safari, your callback will run. This is preferred as it saves an HTTP request and improves performance.
conditionizr.on('safari', function () {
// safari
});You can also ignore environment tests using !:
conditionizr.on('!safari', function () {
// anything but safari
});Conditionizr returns an object for you to also test environment states inside expressions.
if (conditionizr.safari) {
// safari
}Polyfill and load each allow you to inject custom assets based on a conditional test. All you need is the external URI, and your predefined conditional tests to declare.
conditionizr.polyfill('//html5shiv.googlecode.com/svn/trunk/html5.js', ['ie6', 'ie7', 'ie8']);Using the .load() method instead of .polyfill() is purely for naming conventions to differentiate between polyfills and generic assets.
conditionizr.load('//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js', ['ios']);In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Gulp.
- 4.5.0
- Add new options inline Boolean syntax, pass tests in inline or as callback function
- 4.4.0
- Rewrite Jasmine unit tests, Karma spec runner, better testing
- Convert to Gulp.js
- Finish missing load/polyfill() and on() Jasmine unit tests
- Modular rewrite, reduce bloat
- Performance enhancements, less loops, clutter, reduction in size
- Enhance private load() method for faster loading
- Breaking change: No add dependency array, config only
- 4.3.0
- Add CommonJS/Browserify
- AMD bugfix
- 4.2.0
- Add AMD support
- 4.1.0
- Performance enhancements for
.on()and.add() - Bugfix for
.on(!)callbacks - Improve
_loader()performance
- Performance enhancements for
- 4.0.0
- Separate tests/detects from core
- Performance rewrites
- Add
.on(),.add(),.config(),.load(),.polyfill()methods - Ship a public Object for boolean tests
- Add
/detectsdirectory which hosts all detects
- 3.0.0
- Rewrite Conditionizr with improved IE detects
- 2.0.0
- Remove jQuery dependency
- 1.0.0
- Initial release
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent