How to Use Modernizr Responsibly
If you like playing with new features which might not be available in all browsers, you have surely already tried Modernizr. This library allows to test whether the features you want are available or not. As Modernizr adds some CSS classes on the
html element to indicate if a given feature is available, you might be tempted to directly include it in the
head tag to know as soon as possible if the features you want are available or not.
This approach was what the developers of Modernizr themselves recommended at the beginning. The problem with it is that it’s not compatible with the responsible approach we all should have. That’s why Paul Irish, one of the developers of the project, shared his thoughts about how Modernizr should be included. These thoughts inspired this article. In it we will talk about why we should adopt a responsible approach when we want to use Modernizr. Then, we will see some ways to put this approach into practice when possible.
Why Caring about How Modernizr Is Included
The usefulness of a responsible approach can be resumed in one question: do you like waiting for several seconds to access a web page? Surely not, and your visitors hate that too. That’s why, if they wait for a long time for the page to be displayed, they won’t come back. And I’m pretty sure you don’t want that. We all love fancy features, but not if they slow down our website too much. The good news is that you can still keep your fancy features, even with a responsible approach. The difference is that you won’t load them the same way.
head element is useless because the script is loaded at a very early stage but it’ll wait for the page to be loaded before running. The problem is that if your script is included in the
head, the browser will load it before the page itself. This means that if your script is big in size, your visitors have to wait until the script is loaded before they can see the page.
Modernizr has been developed to determine if you can use some recent features, such as CSS transitions or transformations, in a web page. Excluding some special cases, you don’t need these features in order to display something on the screen of the user. There are scripts that must be included in the
head tag, but most of them don’t. Modernizr is no exception. In most cases you don’t need to include it in the
head and you can include the library right before the end of the
Continue reading %How to Use Modernizr Responsibly%