Get personal with browsers using Modernizr.js

 
 
 

In the past few years we have had an explosion of different devices, browsers and platforms with varying capabilities along with a vast array of new & experimental CSS3 and HTML5 tools and effects. This has given most web developers a huge headache, either we try the new effects and spend days targeting and debugging in every browser and device or choose not get involved in the new tools altogether and miss out.

Thankfully there is a solution, instead of targeting each browser which really isn't an option anymore we can use Modernizr.js. This simple file will detect the device and browsers capabilities and allow you to take control of what features are enabled depending on what the browser and device can handle. As a real world example I've used Modernizr a number of times on this site to detect if a device has touch abilities and disable hover effects and allow swipe/touch events in the sliders.

Getting started

Head over to http://www.modernizr.com and grab the latest 'production' file. Place it in your web folder and include a link to the file in the head of your HTML/PHP file as below:




A neat trick is to add a no-js class to your html tag. Mondernizr will overwrite the class when it is loaded so you will know when Javascript is not enabled or the script didn't load.


<html class="no-js">

Using Modernizr with CSS and HTML

So we've got Modernizr working, now lets put it to use by detecting what CSS3 and HTML5 capabilities the browser has. Modernizr will add classes to your HTML tag which will include all the vital CSS3 capabilities, so if the browser allows for CSS transforms a class of csstransforms will be added, if your browser allows for CSS Transitions a csstransitions class will be added and so on. It will also add the HTML5 capabilities such as video, audio, local storage etc. so we can make selections based on those as well.

With classes added to our HTML tag we just need to add the class to our selection in our CSS (or SASS and LESS) files, example below:


.no-touch a {
     color: red;
}

This selection will make the text in an anchor tag red only if the device has no touch abilities. This is particularly useful when we have hover states especially when they include transitions, devices with touch abilities usually handle hover states with double taps which are not very user friendly, check the example below which will only allow the hover state and transition when the device has no touch abilities:


.no-touch a:hover {
     color: blue;
     transition: color 0.5s ease-in-out;
     -moz-transition: color 0.5s ease-in-out;
     -webkit-transition: color 0.5s ease-in-out;
     -o-transition: color 0.5s ease-in-out;
}

Modernizr also helps when it comes to SVG capabilities. With high resolution and retina mobile devices SVG can make your vector images look amazing. The below snippets will provide a .jpg image as a fallback and overwrite the image with an svg file only if the browser has the capability.


.logo {
     background-image: url('my_image.jpg');
}

.svg .logo (
     background-image: url('my_image.svg');
} 

Using Moderizer with Javascript (jQuery)

Modernizr also works great with Javascript and jQuery. We can wrap parts that are dependent on features within in an if statement, for example put your touch dependent script in an if statement as below:


if(Modernizr.touch) {
}