HTML 5 Feature Detection Using Modernizr

HTML 5 is probably the most exciting improvement to come to the web, since the popularization of AJAX. However, as shown by last weeks article (HTML 5 Forms), only the most cutting edge browsers support many of the new HTML 5 features. To progressively enhance a site for HTML 5 enabled browsers, developers need a way to detect if the browser supports a desired HTML 5 feature. Enter Modernizr by Faruk Ates and Paul Irish.

How to do it…

Some examples of available HTML 5 feature detection:

if (Modernizr.canvas) {
	// canvas feature
}
else {
	// fallback
}

if (Modernizr.localstorage && Modernizr.sessionstorage) {
	// storage feature
}
else {
	// fallback
}

Some examples of available HTML 5 and CSS 3 feature detection:

if (! Modernizr.borderradius) {
	// borderradius fallback
}

if (! Modernizr.boxshadow) {
	// boxshadow fallback
}

Some examples of available HTML 5 input feature and attribute detection:

if (! Modernizr.inputtypes.email){
	// input type email fallback
}

if (! Modernizr.input.placeholder){
	// placeholder text fallback
}

All the above detections using the YUI 3 Gallery version of Modernizr:

YUI({
	modules: {
		fullpath: http://github.com/mattsnider/yui3-gallery/raw/master/build/gallery-modernizr/gallery-modernizr-min.js
	}
}).use(gallery-modernizr, function(Y) {
if (Y.Modernizr.canvas) {
	// canvas feature
}
else {
	// fallback
}

if (Y.Modernizr.localstorage && Y.Modernizr.sessionstorage) {
	// storage feature
}
else {
	// fallback
}

if (! Y.Modernizr.borderradius) {
	// borderradius fallback
}

if (! Y.Modernizr.boxshadow) {
	// boxshadow fallback
}

if (! Y.Modernizr.inputtypes.email){
	// input type email fallback
}

if (! Y.Modernizr.input.placeholder){
	// placeholder text fallback
}
}

How it works …

Modernizr uses a variety of techniques to detect if the current browsers supports a desired HTML 5 feature. This allows developers to build their sites for most browsers, but augment their sites for browsers that have specific HTML 5 features enabled. Best of all Modernizr is already included in the YUI 3 gallery (gallery-modernizr), although it is not up-to-date (version 1.2 of Modernizr). I have updated the code to version 1.6, but it isn&rsquot;t in the gallery CDN yet. Get the latest code from my yui3-gallery fork, at gallery-modernizr.

Approximately and Essentially Equal

I stumbled upon some old CS text the other day and was reminded of two functions approximatelyEqual(float, float, float) and essentiallyEqual(float, float, float). Since JavaScript uses a floating point system (IEEE) that is not exact, sometimes it returns numbers like 1.00000001 or 0.99999999, instead of 1. These functions can be used to allow floating point errors or when a margin of error is simply acceptable between two numbers.

How to do it…

The code for ...

jQuery Attach Focus and Blur Function

Todays code snippet uses jQuery to attach blur and focus listeners to an input element, so default text is shown (like "enter your username") and that text is cleared when the user focuses into the field.

Getting ready

Setup an input element somewhere on the page:
<input id="myInputId" type="input"/>
And setup the following CSS class to handle the focusing styles:
.unfocused { color: #999; }

How to do it…

Here is the function: ...

Updated YUI3 for YUI2

For those of you who are using my YUI 3 for YUI 2 emulation code, I want to share with you the latest, and perhaps final version. This version is very similar to what we are now using on Mint.com, where I have been successfully swapping back and forth between the mock YUI 3 and the real YUI 3. http://yui-ext-mvc.googlecode.com/svn/trunk/assets/js/yahoo-ext/yui3foryui2.js

Notes

  • Y.Base.create has been added
  • use YUI.add instead of YUI().add
  • Y.NodeList is ...

Adding Find() to NodeList in YUI3

In YUI 3, when searching an array for a value, you have to include the collection module, as the Y.Array.find() function is not built into Y.Array. This is a little annoying, because 9 out of 10 times, I include the collection module, it is just for the Y.Array.find() function. Additionally, because the function isnt built into the core library, it is not used or added to the core features, like NodeList. Yet, I believe having ...

Clientside Moment Profiling

When developing complex JavaScript applications, it is useful to profile the loading of your pages, so you can better understand the bottlenecks of performance. To the end user, the most important moment is when the browser indicates that the page is finished loading. As developers, it is our job to understand why loading takes so long and how to improve it. Todays article will introduce a simple widget called MomentTracker, which allows you to easily ...

Event Based Cross Site Scripting Attack

I recently ran into a devious XSS attack, based on the onerror event. It can be done by exploiting other events as well, but the onerror event works particularly well, because the JavaScript is executed right as the node is rendered or appended to the page. Here is the attack:

<img onerror=alert(x); src=f
Then when the user content is appended or rendered in the page, the JavaScript executes. Replacing the alert statement with a ...

Simple JavaScript Function To Include CSS

This article explains how to write a simple JavaScript function to include CSS files and notify when the loading of the file is complete. The issue is that most browsers do not fire a load event when the link element finishes processing the included CSS rules. And while many libraries have mechanisms for notifying when the CSS is included, I believe this technique is lighter and more elegant. A special thanks goes out to the ...

Function Hijacking Pattern

Sometimes when working with JavaScript libraries and widgets, you may want to extend or augment the behavior of certain functions without breaking the existing functionality or completely extending the object. Todays article will explore the Function Hijacking Pattern, which can be used to augment a function with your own logic.

How to do it…

The following is a simple example using the hijack pattern to augment a function:
var obj = { // static ...

Defer Function Execution Until Variables Are Available

I recently wrote this simple function, which hijacks a function attached to an object, automatically deferring calls to it (in the order received), until an availability function returns true. I find this to be useful in large applications with many dependencies, especially third-party ones, where it can be difficult to know that the variables/functions used by a function exist. And rather than check for the variables and handle function deferment manually, the function in todays ...