Modernizr & YepNope Tips

Every day we have new and better browser versions. Real browsers (like Firefox and Chrome) have reached their 20th version a while ago, and the awesome features list is just increasing. On the other hand, we as developers must ensure that our products work fine in older browsers (but not IE6 kind of older), since many paying customers can be using IE8 (or 7?) or even slower machines that don’t allow you massive JS or HTML5 work.

So, how do we avoid breaking our sites? Many people would simply strip out latest technologies, but I’m a true believer that we should benefit the most updated users, by giving them an awesome experience. If you want to do something like this, you’ll make good use of libraries like Modernizr and YepNope.

Image from Fabio Basile

Modernizr, who?

It’s an awesome JS library that allows you to detect browser features, so you can conditionally load improvements. You can do that either via CSS or JS. The first step is downloading (https://www.modernizr.com/download/) the library and installing it in your site as usual JS scripts

How to Modernizr your site

So, using it is quite simple. You could either test via JS if there’s a certain feature available, like HTML audio, then if there is you load your desired content, if there isn’t you load the seconds (and usually worse) option.

Here is a simple JS example

if(Modernizr.audio){
   alert(“HTML5 Audio enabled”);
}else{
   alert(“HTML5 Audio NOT enabled”);
}

You could also test for CSS properties so you avoid breaking your site. For example, if a certain part of your site depends on a border image, you could conditionally load it, and if you don’t have it you could load an alternative CSS or JS effect:

if(Modernizr.borderimage){
   alert(“Border-image support”);
}else{
   alert(“Border-image not supported”);
}

You could also use the CSS detection for CSS properties. That will save you from ugly hacks and unreliable code that will most certainly break in the future (as soon as IE launches a new version, at least). This version relies on the fact that Modernizr creates a lot of classes in the HTML, generating something like this:

So you could use those pretty classes in your CSS file, like this:

.no-borderimage{
   border: 0px;
}

So you could use those pretty classes in your CSS file, like this:

.no-borderimage{
   border: 0px;
}

You can check here the full list of features detected by Modernizr (https://modernizr.com/docs/#s2).

But you may be asking yourself “Ok, it detects the lack of a feature, but shouldn’t it provide an alternative?”. Well, I can feel your pain little grasshopper. That’s why we can use other libraries, the Polyfills. They allow you to “create” HTML5 (and other) functionality in browsers that don’t support it. But if you load everything in you need your page would be far too slow, that’s why we can make use of another tool: YepNope

YepNope the modernized version of Modernizr

YepNope is a conditional loader, it allows you to load only the scripts that are needed for a certain browser. It’s customizable and you can download it at the project’s page (https://yepnopejs.com/).

It has a simple syntax and it’s important to say that it’s integrated with the Modernizr. The following code shows the basic syntax:

Yepnope({
   test: /* condition to be tested, with a boolean result (true / false) */,
   yep: /* what will be loaded if condition is true */,
   nope: /*what will be loaded if condition is false */,
   both: /* what Will be loaded either way */,
   load: /* what will be loaded*/,
   callback:/* what happens after loading */,
   complete: /*what will be loaded when everything else is OK*/,
});

Here is an example in action for HTML5 feature detection

yepnope({
   test: Modernizr.audio,
   yep: ‘audio.js’
   nope: ‘audio-polyfill.js’
});

So it’ll automatically test the feature in that browser and load the alternative version, saving you a lot of if/else tests. Let’s see another cool example:

yepnope({
   test: Modernizr.video,
   yep: ‘video.css’,
   nope: [‘video-html5.css’,’video-polyfill.js’],
   callback: function(url, result, key){
     if(url == ‘video- html5.css’){
       alert(“HTML5 Video Ready”);
     }
)};

Here it tests for the HTML video functionality, if the browser supports it it’ll load the video.css file, if it doesn’t the vídeo-html5.css and vídeo-polyfill.js files will be loaded, and after it’s done it’ll alert a message telling that the video functionality is ready now.

Summing up

All I can say about those libraries is that I wish it was that simple in the ol’ IE5 & IE6 times. Feature detection is a clean way to provide the best user experience possible, making use of native methods when available and allowing you to make things work almost every time.