Modernizr

Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 and CSS3 features.

Unlike with the traditional - but highly unreliable - method of doing "UA sniffing", which is detecting a browser by its (user-configurable) navigator.userAgent property, Modernizr does actual feature detection to reliably discern what the various browsers can and cannot do. After all, the same rendering engine may not necessarily support the same things, and some users change their UserAgent string to get around poorly developed websites that don't let them through otherwise.

Modernizr aims to bring an end to the UA sniffing practice. Using feature detection is a much more reliable mechanic to establish what you can and cannot do in the current browser, and Modernizr makes it convenient for you in a variety of ways:

It tests for over 20 next-generation features, all in a matter of milliseconds;
It creates a JavaScript object (named Modernizr) that contains the results of these tests as boolean properties;
It adds classes to the html element that explain precisely what features are and are not natively supported

Taking advantage of HTML5 and CSS3 with Modernizr

Configure Modernizr

<!DOCTYPE html>
<html class="no-js">
<head>
	<meta charset="utf-8">
	<title>My Modernizr Page</title>
	<script src="modernizr-1.5.min.js"></script>

Does your UA support HTML 5 <canvas>?

if (Modernizr.canvas) {
  alert("You got canvas");
} else {
  alert("No canvas");
}

hsla()

The HSL color model stands for Hue, Saturation and Lightness / Intensity and is a non-linear deformation of the RGB colour system. It does not include a wider or more limited range of colors, it is simply a more human way to code colors than RGB ever was. The Hue is defined using an angular integer ranging from 0 to 360 degrees. This represent a base color from the HSL cone ranging from red (0º) to green (120º) to blue (240º) and then back to red. Saturation and lightness is defined using percentages from 0 - 100% and complements the hue to create the full color. So for example, if I have a bright blue base color like this: hsl(240, 100%, 50%)

<style type="text/css"
#myHSLAdiv
{
  background: hsl(240, 100%, 50%);
}
</style>

Box shadow

H u s k y

.boxshadow
{
   border: none;
   box-shadow: green 10px 10px 10px;
   -moz-box-shadow: green 10px 10px 10px;
   -webkit-box-shadow: green 10px 10px 10px;
}

2D transforms

CSS 2D Transforms allow elements to be transformed in 2D space.

img.tilt {
	transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
}

Transitions in the UA

You specify a start and end conditions and the browser transitions from start to end. Hover over this anchor tag.

Anchor tag

<style type="text/css"
  a {
    color: red;
    -webkit-transition: color 5s ease-out;
    -moz-transition: color 5s ease-out;		
}
a:focus,
a:hover {
   color: black;
   -webkit-transition: color 5s ease-out;
   -moz-transition: color 5s ease-out;   
}
</style>

Local storage

Web pages can store named key/value pairs locally, within the client web browser. Like the data stored in cookies, these data persist even after you navigate away from the website, close your browser tab or exit the browser. But unlike cookies, these data are never transmitted to the remote web server.

By default there is 5 MB of local space available. Exceeding this limit throws a QUOTA_EXCEEDED_ERR.

  var x=window.prompt("Enter some text")
  localStorage.setItem("tb",x);

  var i = localStorage.getItem("tb");
  alert(i);

New York Times, October 10, 2010

New Web Code Draws Concern Over Privacy Risks

In the next few years, a powerful new suite of capabilities will become available to Web developers that could give marketers and advertisers access to many more details about computer users' online activities. Nearly everyone who uses the Internet will face the privacy risks that come with those capabilities, which are an integral part of the Web language that will soon power the Internet: HTML 5. The new Web code, the fifth version of Hypertext Markup Language used to create Web pages, is already in limited use, and it promises to usher in a new era of Internet browsing within the next few years. It will make it easier for users to view multimedia content without downloading extra software; check e-mail offline; or find a favorite restaurant or shop on a smartphone.

The new Web language and its additional features present more tracking opportunities because the technology uses a process in which large amounts of data can be collected and stored on the user's hard drive while online. Because of that process, advertisers and others could, experts say, see weeks or even months of personal data. That could include a user's location, time zone, photographs, text from blogs, shopping cart contents, e-mails and a history of the Web pages visited. The new Web language "gives trackers one more bucket to put tracking information into," said Hakon Wium Lie, the chief technology officer at Opera, a browser company. Or as Pam Dixon, the executive director of the World Privacy Forum in California, said: "HTML 5 opens Pandora's box of tracking in the Internet."

Most people control their online privacy by adjusting settings in today's most common Web browsers, which include Internet Explorer by Microsoft, Firefox by Mozilla, Safari by Apple and Opera, which is used mostly in Europe and Asia and on mobile devices. Each browser has different privacy settings, but not all of them have obvious settings for removing data created by the new Web language. Even the most proficient software engineers and developers acknowledge that deleting that data is tricky and may require multiple steps.

Key:

Value: