HTML5 support for each browser

Source: Internet
Author: User
Tags sessionstorage

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.

    • Video playback Tag Videos
    • Audio playback Flag
    • Drawing marker Canvas
    • Form control tag URL, email, etc.
    • Local client Storage

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>
2
3 <body>
4
5 <video width= "height=" controls= "Controls" >
6 <source src= "Movie.ogg" type= "Video/ogg"/>
7 <source src= "Movie.mp4" type= "Video/mp4"/>
8 <source src= "MOVIE.WEBM" type= "VIDEO/WEBM"/>
9 Your Browser does not support the video tag.
Ten </video>
One
</body>

The video element is potentially supported in a variety of formats, including:

    • ogg--ogg video files with Theora video encoding and Vorbis audio encoding;
    • mpeg4--MPEG 4 video files with H. Video encoding and AAC audio encoding;
    • webm--WebM video files with VP8 video encoding and Vorbis audio encoding

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:

    1. The most recently released IE9 supports only MPEG4 (H. Encode) format files (supported hardware acceleration), and WEBM video formats are supported if the WEBM/VP8 plugin is installed.
    2. The Safari browser relies on QuickTime for video playback, so the video format supported by Safari is consistent with QuickTime. Note: QuickTime is preinstalled on Mac machines and its default supported video format is MPEG4, but QuickTime requires manual installation on Windows systems, which means that Safari does not support all video formats by default on Windows. This needs to be understood by web developers.
    3. Firefox 4.0 will also support the WEBM format.
    4. Chrome has announced that it no longer supports MPEG format videos.
    5. The video element has a preload property, and the possible values include auto--when the page loads and loads the entire video, meta--loads the metadata when the page loads, none--when the page loads without loading the video.

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" >
2 <source src= "Song.ogg" type= "Audio/ogg"/>
3 <source src= "Song.mp3" type= "Audio/mpeg"/>
4 Your Browser does not support the audio element.
5 </audio>

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:

    1. Because of the inclusion relationship, the audio tag auido is basically consistent with the video result;
    2. IE8 does not support video and audio tags, IE9 has just introduced these elements;
    3. The audio element also has the Preload property, and note that the property value is set correctly.

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>
2
3 <script type= "Text/javascript" >
4 var C=document.getelementbyid ("MyCanvas");
5 var cxt=c.getcontext ("2d");
6 cxt.fillstyle= "#0000FF";
7 cxt.fillrect (0,0,150,75);
8 </script>

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 ');
2 g_vmlcanvasmanager.initelement (EL);
3 var ctx=el.getcontext (' 2d ');

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" >
2 First Name: <input type= "text" name= "fname" value= "Mickey"/><br/>
3 Last Name:<input type= "text" name= "lname" value= "Mouse"/><br />
4 <input type= "Submit" value= "Submit"/>
5 </form>

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>
2
3 <body>
4
5 <script type= "Text/javascript" >
6
7 if (sessionstorage.pagecount)
8 {
9 Sessionstorage.pagecount=number (sessionstorage.pagecount) +1;
Ten}
One else
{
sessionstorage.pagecount=1;
+ }
document.write ("This is a count in the session store:" + Sessionstorage.pagecount + "time (s) this session." Restart the browser, this count will clear 0 ");
if (localstorage.pagecount)
+ {
Localstorage.pagecount=number (Localstorage.pagecount) +1;
+ }
Else
{
localstorage.pagecount=1;
(+ }
document.write ("This is the count in the local store:" + Localstorage.pagecount + "time (s). Restart the browser, will continue to count");
-
</script>
-
<p>refresh the page to see the counter increase.</p>
in
<p>close the browser window, and try again, and the counter has been reset.</p>
</body>

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.