DIGITALREP

How to use modernizr in websitesOctober 08, 2013

Modernizr allows you to support newer features in newer browsers whilst also providing an alternative implementation of features for older browsers so you get the best of both worlds.

Example: SVG Support

So let’s say I want to put a shiny new scalable vector in my website as a header image, but I also want to support older browsers which, unfortunately for me, don’t support SVG at all (for example, the latest version of IE to support it is version 9). I could use jquery to figure out which browser I’m actually using and then change the CSS accordingly. The problem with this approach is that it’s unreliable and it won’t tell you which version of the user agent (or browser) is being used.

Enter modernizr: you use it like any other javascript plugin, including it in the head tags of your page after the css style sheets and jquery:

<script src=”modernizr.js” type=”text/javascript”></script>

So that when you have

#header
{
  background: url(“images/logo.svg”);
}

in your CSS, you can write this in your javascript:

if(!Modernizr.svg)
{
  $(“#header img”).attr(“src”, “images/logo.png”);
}

to change the source of the image to png when there is no svg support.

Category: Tutorials
Tags:  

Leave a Reply

Your email address will not be published. Required fields are marked *