Appendix F. Polyfilling HTML5 with jQuery UI
In chapter 3 we discussed a number of new HTML5 elements and compared them to jQuery UI widgets. In summary, we concluded that the major advantages of the HTML5 controls are
- Ease of use.
- Dependency-free.
- The browser controls how data is inputted. (For instance, you get optimized mobile keyboards.)
The main detriments are
- You have little control over the display.
- They handle only trivial use cases.
- Only some browsers support the controls.
In chapter 3 we also had a brief discussion of which control you should use. To start, if you have a nontrivial usage scenario, you have no choice but to use JavaScript-based widgets like those of jQuery UI. If you want to build a calendar where the user can’t select weekends, you have to use a JavaScript-based datepicker—as that’s impossible to build with an <input type="date">. Conversely, if you have a trivial use case, using the HTML5 controls makes sense. You get mobile-optimized keyboards without the need to introduce a JavaScript-based control.
No matter how simple the use case, the native controls still have one big problem: browser support. Although some HTML5 elements are now widely implemented, others—like <input type="date">—are only present in a handful of browsers. But you have another option. If you want to use HTML5 controls today, and you don’t want to worry about browser support, you can use jQuery UI to polyfill the native functionality.