Modernizr is a Javascript library that detects the presence of browser functionality. This makes life a lot easier when using more modern features on your website by encapsulating all the feature tests into a library you don't have to worry about. You can use Modernizr either in your own Javascript or you can use the CSS classes it sets on the HTML element.
To get a full list of the browser functionality that is tested check out the Modernizr docs. If the feature you need a test for isn't available it is fairly easy to add new tests as well.
I'll start with an example that shows how to use the feature tests in Javascript. After Modernizr runs it populates the "Modernizr" structure with boolean values for each functionality test. This example waits for the page to load and then simply populates a DIV with text depending on your browsers support for web sockets:
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Modernizr - Javascript Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="modernizr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
if (Modernizr.websockets)
{
$("#result").html('Your browser has support for Web Sockets');
}
else
{
$("#result").html('Your browser does not support Web Sockets');
}
});
</script>
</head>
<body>
<p id="result"></p>
</body>
</html>
See this code in action: Modernizr Javascript example.
You can try this example with an older version of Firefox and the text should indicate that there is no support for web sockets. Try again with a newer version of Google's Chrome browser and the page will indicate that there is support for web sockets.
The next example shows how to use the Modernizr CSS support. The key here is to know that the library will inject classes into the HTML tag. Those classes correspond to the functionality tests and are listed in the documentation. I am again testing for web sockets support and Modernizr will set the HTML class to either no-websockets or websockets and display one of two DIVs:
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Modernizr - CSS Example</title>
<style type="text/css" media="screen">
div.wsno, div.wsyes { display: none }
.no-websockets div.wsno { display: block }
.websockets div.wsyes { display: block }
</style>
<script src="modernizr.js" type="text/javascript"></script>
</head>
<body>
<div class="wsno">
Your browser does not support WebSockets.
</div>
<div class="wsyes">
Your browser supports WebSockets.
</div>
</body>
</html>
See this code in action: Modernizr CSS example.
For a much more detailed CSS example check out this A List Apart article.
If you need the information Modernizr assembles outside of the browser check out Modernizr on the server.
While I was putting together the two demo pages for this I discovered a new service much like the Google Javascript library CDN but with more Javascript libraries. It is called Cached Commons and it uses Github's CDN.