Home > Developer > Web Develop
Taking into account the principles of the HTML5 standard: The new features are based on HTML, CSS, DOM, and JavaScript, reducing the need for external plug-ins (such as Flash), independent of the device, etc., we selected several key features of HTML 5 to evaluate the browser system.
Browser (version) selection
Due to the wide range of browser brands and versions available today, it is difficult to cover all of our products, so setting up a test browser here is the main choice: mainstream brands, mainstream versions and the latest version (officially released). According to StatCounter released 2011 2 ~ March Browser market share statistics distribution, the mainstream brand 1 shows.
As can be seen from Figure 1, Microsoft's i n T e R n E texplorer with its mix of IE6, IE7, IE8, IE9 and other versions occupy the top, open source browser Firefox followed, its open architecture has attracted many excellent plug-ins, and become the web Developer's main development debugging platform. Google's main push Chrome has taken the third place.
The main browser version distribution is shown in 2.
Figure 2 Browser main version distribution map
In addition to some of the latest browser versions, all of the browsers (versions) we have selected are shown in table 1.
Table 1 Test Browser
HTML5 Compatibility analysis
Video playback Tag Videos
Before the advent of HTML5 technology, most web video playback was done through browser plugins such as Adobe Flash, which required customers to install the appropriate components before viewing the video. The advent of the video tag makes the developer no longer dependent on a particular third-party technology, the following code snippet plays a video file, sets the size of the screen, with a control button (Pause/progress bar, etc.):
1 <! DOCTYPE html>The video element is potentially supported in a variety of formats, including:
The level of acceptance of these video formats in the HTML5 final standard is still in the game, but the browser has started to selectively support video tagging. Table 2 shows the compatibility test results.
Table 2 video Tag videos test results
Here are a few things to note:
Web developers should choose the appropriate preload properties based on the actual context of the Web page to achieve better front-end performance.
Audio playback Flag
Similar to the video tag Vidio, audio playback flag is also an element introduced by the HTML5 standard, and the following code plays an audio with a control button:
1 <audio controls= "Controls" >Audio is potentially supported in a variety of formats, including Oggvorbis, MP3, AAC, WAV, and so on, as shown in table 3 for the level of support for audio tags in different browsers.
Table 3 Audio test results
There are a few points to note:
Drawing marker Canvas
In the world of Web 2.0, dazzling graphics are an essential component. The canvas elements introduced by HTML5 Enable Web developers to draw lines, graphics, add text and images on a page through JavaScript. The following code snippet simply draws a blue rectangle on the page:
1 <canvas id= "MyCanvas" width= "height=" ></canvas>The test results for the canvas are shown in table 4.
Table 4 drawing marks Canvas test results
We are delighted to see that the various browsers support the canvas very high, for IE8 restrictions, can be resolved through the open source project Explorercanvas, only two steps required:
Include JS file
Include the canvas element directly or create it dynamically:
1 var el=document.createelement (' canvas ');Form 2.0 Elements of forms
For enterprise Web Apps, form controls are one of the most important page elements. Before HTML 5, various types of forms could only be completed by the developer through complex property settings and constraints (through scripting). The developed HTML 5 standard introduces a series of clear and functional form control tags, including email, URL, number, range, search, color, etc., as well as form attributes AutoComplete, autofocus, and so on. Here is a simple example where users fill out e-mail boxes (automatically detect the correct format) and personal homepage (automatically detect the correct format), etc., and then submit it to the backend system:
1 <form action= "form_action.asp" >Because the form controls and properties introduced by HTML5 are much more, some of the tests are selected here, as shown in table 5.
Table 5 Partial FORM element test results
A few notes:
Firefox 4.0 will start to support email, url and other form elements;
AutoFill already exists as a basic feature of many browsers, and the AutoComplete attribute needs to be differentiated from the HTML5 standard.
Local client Storage
Web developers often manage customer information through cookies, but when the amount of data is large, this approach is relatively inefficient, on the one hand because the cookie has a size limit, and each time it is passed through a network request. HTML5 introduces two new types of storage:
localstorage--data storage with no time limit
sessionstorage--data Storage for session
1 <! DOCTYPE html>The following example implements a simple counter using localstorage and Sessionstorge respectively, as shown in table 6.
Table 6 Local Customer single storage test results
This feature is very powerful for web developers, so let's take a look at a browser that implements the HTML5 local client store tag for Sessionstorage and all tested browsers! However, to mention security here, Web developers use these elements to keep in mind that the data stored on the client may be viewed and even modified by others who are authorized to use the browser, so be aware of the need to save sensitive information.
HTML5 support for each browser
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
