HTML5 Feature Detection-detection technology-

Four basic technologies can be used to check whether browsers support certain html5 features, from simple to complex order ......,. Four basic technologies can be used to check whether browsers support certain html5 features, from simple to complex order:

1. Check whether the Global Object (window or navigator) has specific attributes.
If the browser supports the geographic location API, The Global navigator object will have an attribute named geolocation. Otherwise, the value of this attribute on the navigator object is undefined:

function supports_geolocation(){  return !!navigator.geolocation;  }

If you do not want to write this method, you can use the method provided by the modernizr library to check whether the browser supports the geographic location API:

if(Modernizr.geolocation){ do something}  else{ do something }

2. Create an element and check whether the DOM object of the element has specific attributes. The following uses canvas detection as an example.

function supports_canvas(){  return !!document.createElement_x_x('canvas').getContext;  }

Return !! Document. createElement_x_x ('canvas '). getContext; this statement creates a virtual

This element will never be appended to the page, so it will never be visible to users. Then test whether the element has the getContext () method. This method exists only when the browser supports canvasAPI, and the double negation is used !! To force this detection method to return a Boolean value.

If you do not want to write this method, you can use the method provided by the modernizr library to check whether the browser supports the canvas API:

if(Modernizr.canvas){ do something}else{ do something }

3. Create an element, check whether the DOM object of the element has a specific method, call this method, and check its return value. The following uses the supported video formats as an example.

function supports_video(){   return !!document.createElement_x_x('video').canPlayType;}

If the browser supports HTML5 video, it is created The DOM object corresponding to the element has a method named canPlayType (). On the contrary, the object only has the public attributes of all elements.

If you do not want to write this method, you can use the method provided by the modernizr library to check whether the browser supports the video API:

if(Modernizr.video){ do something}else{ do something }

4. Create an element, set a specific property value for the DOM object of the element, and check whether the browser retains the property value. To detect supportedType.

First, create a virtualElement: var I = document. createElement_x_x ("input ");

The default element is the text type. Next, set the element type to be checked: I. setAttribute ("type", "color ");

If the browser supports a specific input box type, the set type value will be retained, and vice versa, it will still be text type.

Return I. type! = "Text"; if (! Modernizr. inputtypes. date) {// is the browser available? type = "date"> native support}

The above is the content of HTML5 Feature Detection-detection technology. For more information, see PHP Chinese website (www.php1.cn )!