Four methods to check whether HTML5 is supported

 

How many of the four methods do you know whether HTML5 is supported?

 

1. check whether a specific attribute exists in a global object, such as window or navigator.

For example, geolocation is a new feature supported by HTML5, and it is developed by the Geolocation working group outside the HTML5 Working Group. You can use this method to check whether the browser supports it.

Function supports_geolocation (){

Return !! Navigator. geolocation;

}

 

2. Create an element and check whether a specific attribute exists. For example, check whether Canvas is supported.

Function supports_canvas (){

Return !! Document. createElement ('canvas '). getContext;

}

 

3. Create an element to check whether a specific method exists on the element. Call this method to check whether the returned value exists. For example, check whether video supports a certain format.

Function supports_h1__baseline_video (){

If (! Supports_video () {return false ;}

Var v = document. createElement ("video ");

Return v. canPlayType ('video/mp4; codecs = "avc1.42E01E, mp4a. 40.2 "');

}

 

4. Create an element and set a specific value for its attribute to check whether the attribute value is retained.

We are very familiar with Web form controls. We have added a dozen of such controls in HTML5.

<Input type = "search"> for search boxes

<Input type = "number"> for spinboxes

<Input type = "range"> for sregistrers

<Input type = "color"> for color pickers

<Input type = "tel"> for telephone numbers

<Input type = "url"> for web addresses

<Input type = "email"> for email addresses

<Input type = "date"> for calendar date pickers

<Input type = "month"> for months

<Input type = "week"> for weeks

<Input type = "time"> for timestamps

<Input type = "datetime"> for precise, absolute date + time stamps

<Input type = "datetime-local"> for local dates and times

 

To check whether these controls are supported, use the following method.

Var I = document. createElement ("input ");

I. setAttribute ("type", "color ");

Return I. type! = "Text"; // If the browser does not support this input type, "text" is returned ".

 

Finally, an open source JS Class Library: Modernizr (http://www.modernizr.com/), which is used to encapsulate the support of HTML5 and CSS3 functions. Be sure to use the latest version. With this class library, we will reduce a lot of code.

For example:

1. if (Modernizr. geolocation) // checks whether geolocation is supported.

2. if (Modernizr. canvas) // checks whether canvas is supported.

3. if (Modernizr. video) {// if video is supported, which format must be checked?

If (Modernizr. video. webm ){

// Try WebM

} Else if (Modernizr.video.ogg ){

// Try Ogg Theora + Vorbis in an Ogg container

} Else if (Modernizr. video. h264 ){

// Try H.264 video + AAC audio in an MP4 container

}

}

4. if (Modernizr. inputtypes. date) // checks whether date input is supported.