HTML5 developers need to understand the skills and tool rollup

HTML5 has now become a hot topic in web development, with most modern browsers (Safari, Chrome,firefox,ie10, and mobile devices) supporting HTML5. Even though the HTML5 specification has not yet been completed, many developers have made it the main technology in web development projects. Some web giants, such as Google, Facebook, Twitter and YouTube, are based on HTML5.

One of the most exciting features of HTML5 is the canvas (canvas) and powerful form features, which can be perfectly experienced in most browsers (except IE), but not as good for new form elements. For web developers, it's time to start HTML5 development.

For HTML5 Development, some of the tips and tools in this article can help you shorten your learning time and improve your development efficiency.

One, HTML5 support Test List

Before you begin, you need to understand the modern browsers and the mobile platform's support for HTML5.

Mainstream browser HTML5 feature support overview

Mobile Platform HTML5 Support Overview

HTML5 Support Test

HTML5 Demo

Second, make the HTML5 elements available

The older version of IE does not recognize the new HTML element. However, you can use some JavaScript or CSS solutions to compensate for this flaw.

Html5shiv: This script enables IE to recognize HTML5 elements.

HTML5 Enabler: function is similar to Html5shiv.

Modernizr: It enables developers to fully exploit HTML5 and CSS3 features in browsers that support HTML5 and CSS3 without sacrificing the control of browsers that do not support these new technologies.

HTML5 Reset: It provides a set of HTML, CSS files that allow you to start a new project at the least amount of time. It uses MODERNIZR to support HTML5 and CSS3.

Third, browser Plug-ins

Here are some JavaScript plug-ins that can make up for some browser support for HTML5.

1. Videojs

Videojs is a HTML5 video player that can be used in all browsers, including IE6 and mobile devices. For browsers that do not support HTML5, the Flash Player is automatically used for playback.

2. Audiojs

HTML Audio Player. The "audio" label for HTML5 can be used on a variety of browsers, including mobile devices.

3. Html5widget

HTML5 form modules, including calendars, palettes, sliding parts, client-side validation, etc.

4. Webforms2

HTML5 support for form properties, such as pattern, required, and autofocus.

5. Limejs

Limejs is a HTML5 gaming framework for creating fast, localized games for modern touch devices and desktop browsers.

6. Flexiejs

Support CSS3 Elastic box model (flexible box models).

Four, online tools

In addition, there are online tools that can help developers speed up the development of HTML5 projects.

1. HTML5 boilerplate

Html5boilerplate is a html/css/js template that is the best practice for implementing cross-browser normalization, performance optimization, and stable optional features such as Cross-domain Ajax and Flash. Developers call it a collection of techniques designed to meet your needs for developing a cross-browser and future-oriented web site.

2. Switch to HTML5

A very useful online tool that can generate HTML5 document structures according to your preferences.