HTML5 and CSS3, Second Edition

once the external file was loaded. In our case we check for support for the

color control, and if it’s unavailable, we load the jQuery plug-in. Then, in the

callback, we use the result variable, which will be true if our browser supports

the color plug-in, and false if it doesn’t. In other words, the result is the result

of the test that we ran. We technically don’t have to evaluate the result variable

here, because callback only gets fired when a script is loaded. In our case, we’re

loading scripts only when we have no support. However, we could use the yep

option, which would let us load additional scripts if the browser supported

the color field. Those scripts would also invoke the callback, and then we’d

be able to tell what happened in the callback by looking at result.

The load() function is built on top of the yepnope.js library, and so to learn

how it works, look at the yepnope.js documentation.^4

In order to use the load() method we have to build a custom version of Modern-

izr using an online tool.^5 This builder includes the Yepnope library. In the

example-code download, I’ve included a complete version of Modernizr, but

that’s not a good fit for production because you should include only the

components of Modernizr you need for your specific project.

Before you start throwing Modernizr in your projects, be sure you take some

time to understand how it works by exploring its source code. Whether you

wrote the code yourself or not, if you use it in your project, you’re responsible

for it. For example, Modernizr wasn’t ready to handle Safari’s partial support

of the color field right away, so people had to quickly jump in and fix their

sites while they waited for Modernizr to update. When the next version of

Chrome or Firefox comes out, you may have to hack together a solution to

support any changes. Who knows—maybe you’ll be able to contribute that

solution back to Modernizr!

Because of the complexity involved with detecting features across browsers,

we’ll use Modernizer throughout this book wherever it makes sense to do so.

Aside from new form-field types, HTML5 introduces a few other attributes for

form fields that can help improve usability. Let’s take a look at autofocus next.

4. http://yepnopejs.com/


5. http://modernizr.com/download/

Chapter 3. Creating User-Friendly Web Forms • 48

Download from Wow! eBook <www.wowebook.com> report erratum • discuss