News and case studies on embedded finance, APIs and much more
3 min reading
| 04 JANUARY 2016
When you develop digital projects you should always remember – what you see on the browser is what there is. It doesn't matter which backend or styles your web page has if it the rendered result on the browser is not what you expected. The JavaScript library Modernizr prevents this type of disappointment: it is the best tester for determining which of the project's characteristics are supported by each browser.
Specifically, Modernizr reviews 18 CSS3 style characteristics and 40 additional characteristics related to the HTML document, especially HTML5, the latest available version. This is interesting because more recent browsers can run resources which are out of reach for older browsers. The idea is to utilize the former's advantages while still catering to the latter. As a consequence, the design is adjusted to the user's experience in all browsers. And you can create all-terrain digital projects.
How to install Modernizr and Modernizr tools
To download and install the library:
– First, download the file with Modernizr's source code. The code is in JavaScript language and offers two variables: Development, a full script with all of the library's functionalities, unzipped, and perfect for development; and Production, specific libraries for web page testing once the pages have been uploaded to the production server. It is recommended that you only install the modules you are going to use. This is the full list of Modernizr features and modules.
– To use this JavaScript library, you need to add the Modernizr script to the page's <head>, right after the site's CSS style declarations. First the styles and then the library are loaded. This is the script you need to add to the project's <head>:
<script src=”modernizr.js"></script>
Modernizr mostly uses two tools to detect which specific functionalities are available on each browser:
1. JavaScript object: after the Modernizr library has been installed and loaded, the JavaScript object allows you to detect which project functionalities are supported by each browser both in HTML language and CSS styles. This detection uses the Boolean variables true and false. True means that the browser supports the feature; false means that it doesn't.
if (Modernizr.awesomeNewFeature) {
showOffAwesomeNewFeature();
} else {
getTheOldLameExperience();
}
Here are two practical cases taken from the theoretical example above. The first tests whether or not the user's browser supports our project's touch events. The second detects whether shadows can be applied:
if (Modernizr.touch){
//the browser supports touch events
} else {
//the browser does not support touch events
}
if (Modernizr.boxshadow) {
// Shadows can be applied!
} else {
// box-shadow is not available
}
2. CSS classes: the library automatically loads all CSS classes that correspond to the style functionalities recognized by a modern browser – canvas, touch events, shadows, geolocation, video, audio, gradients, opaqueness, image frames, storage, animation, database features, etc. This would be the standard HTML document with these classes:
<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
<head>
…
<script src="/js/lib/vendor/modernizr-custom.min.js"></script>
</head>
<body>
<div class="elemento"></div>
</body>
</html>
Most modern functionalities in HTML5 and CSS3 are run by modern browsers. That is not the case with old browsers though. For older browsers, developers must create the classes necessary to reproduce the functionality: use the classic CSS to do this.
If you wish to add shadow and Modernizr didn't install this property automatically because the browser is older, add it manually:
.elemento{
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
}
Polyfill libraries and the Modernizr.load() method
Modernizr offers a method for developers to perform on-demand load of libraries and plugins that increase the functionalities of older browsers. The library only loads if the user visits a page with a specific style that is not available on the browser.
This is achieved by loading one of these plugins or polyfills using Modernizr.load(). In this way, you keep the UX of older browsers.
This is done as follows:
– Modernizr allows you to detect whether or not the functionality is available within the user's browser. If the property is not available, the Modernizr.load() method loads the specific polyfill for the function.
– How can I use the Modernizr.load() method to add libraries? The code is simple, and in this case it includes geolocation:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
The syntax above includes three different elements:
– test: refers to the functionality we wish to run within the user's browser.
– yep: if the condition is met, the functionality is loaded.
– nope: if the condition is not met, the alternative is loaded – a geolocation polyfill for older browsers.
Some added characteristics can also be loaded:
– both: whether or not the condition is met, the functionality is loaded.
– load: the functionality is loaded regardless of the test run by Modernizr on the browser.
– callback: uploads the functionality once the resources are present.
– complete: loads the functionality regardless of whether or not there are resources.
Follow us on @BBVAAPIMarket
