Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about the ways of HTML5/CSS3 code detection, which may not be well understood by many people. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

However, there is a reality that we have to see clearly, that is, IE series browsers also occupy a large part of the market share, mainly IE8, 9, windows8.1 users have used IE10/11, while considering the national conditions of our country, IE6, 7 still retain a lot. When we let go of HTML5 development, new feature support testing is essential. One way is to use navigator.userAgent or navigator.appName to check the browser type and version, but this method is not very reliable, browsers are gradually supporting some new features, and it is not certain that a browser supports HTML5 100%. Moreover, IE11 made a disgusting move: remove the "MSIE" flag from UA, change appName to "Netspace", and begin to support the css attribute of the-webkit- prefix, which is a living rhythm disguised as chrome. Therefore, it is better to rely on feature detection (figure detection) or ability testing for HTML5/CSS3 support testing. The editor would like to introduce the commonly used testing methods.

HTML5 part

There are several main ways to detect the new features of HTML5:

1. Check whether there is a corresponding property name on the global object (window or navigator)

two。 Create an element and check whether there are any corresponding attributes on the element

3. Create an element, check if there is a method name on the element, and then call the method to see if it can be executed correctly

4. Create an element, assign a value to the corresponding attribute of the element, and then get the value of this attribute to see if the assignment takes effect

Due to the different behaviors of different browsers, a combination of the above methods may be used to detect some features, and then use the above method to detect common features:

Canvas

Function support_canvas () {var elem = document.createElement ('canvas'); return! (elem.getContext & & elem.getContext (' 2d'));}

Generally speaking, you can create a canvas element and check the getContext attribute, but it is not accurate enough in some browsers, so check the execution result of elem.getContext ('2d') again and you can be absolutely sure. The above code is extracted from Modernizr: http://github.com/Modernizr/Modernizr/issues/issue/97/

There is one thing to add about canvas, that is, the fillText method. Although the browser supports canvas, we are not sure that it supports the fillText method. Because canvas API has undergone various modifications, there are some historical reasons. The methods used to detect fillText support are as follows:

Function support_canvas_text () {var elem = document.createElement ('canvas'); var context = elem.getContext (' 2d'); return typeof context.fillText = = 'function';}

Video/audio

Function support_video () {return!! document.createElement ('video'). CanPlayType;} function support_audio () {return!! document.createElement (' audio'). CanPlayType;}

Video and audio are written in a similar way.

To detect the resource formats supported by video/audio, you can call the canPlayType method to check, as follows:

Unction support_video_ogg () {var elem = document.createElement ('video'); return elem.canPlayType (' video/ogg; codecs= "theora');} function support_video_h364 () {var elem = document.createElement ('video'); return elem.canPlayType (' video/mp4; codecs=" avc1.42E01E');} function support_video_webm () {var elem = document.createElement ('video'); return elem.canPlayType (' video/webm) Codecs= "vp8, vorbis");} function support_audio_ogg () {var elem = document.createElement ('audio'); return elem.canPlayType (' audio/ogg; codecs= "vorbis');} function support_audio_mp3 () {var elem = document.createElement ('audio'); return elem.canPlayType (' audio/mpeg;');} function support_audio_wav () {var elem = document.createElement ('wav'); return elem.canPlayType (' audio/wav) Codecs= "1");}

It is important to note that the return value of canPlayType is not a Boolean type, but a string. The values are as follows:

"probably": browsers fully support this format

"maybe": browsers may support this format

": empty string, indicating that it is not supported

LocalStorage

Generally speaking, you can check whether the global object has a localStorage attribute, as follows:

Function support_localStorage () {try {return 'localStorage' in window & & window [' localStorage']! = null;} catch (e) {return false;}}

In addition, there is a more stringent checking method to check whether the corresponding method is supported, as follows:

Function support_localStorage () {try {if ('localStorage' in window & & window [' localStorage']! = = null) {localStorage.setItem ('test_str',' test_str'); localStorage.removeItem ('test_str'); return true;} return false;} catch (e) {return false;}}

WebWorker

Function support_webWorker () {return!! window.Worker;}

ApplicationCache

Function support_applicationCache () {return!! window.applicationCache;}

Geolocation

Function support_geolocation () {return 'geolocation' in navigator;}

New attribute of input tag

The new attributes added to the input tag include: autocomplete, autofocus, list, placeholder, max, min, multiple, pattern, required, step. Check whether method 2 mentioned above is supported. Create a new input tag to see if there are these attributes. Take autocomplete as an example:

Function support_input_autocomplete () {var elem = document.createElement ('input'); return' autocomplete' in elem;}

In addition, pay special attention to the list attribute, because it is used with the datalist tag, so check whether the datalist tag supports it:

New type of input tag

The type here refers to the value of type. The newly added type values of input include: search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color. To detect these values, you need to use the method 4 mentioned above, taking number as an example:

Function support_input_type_number () {var elem = document.createElement ('input'); elem.setAttribute (' type', 'number'); return elem.type! = =' text';}

This is a relatively simple way to check, because strictly speaking, browsers provide different appearances or implementations for different types, such as the range type in chrome:

We need to know exactly that the browser provides a corresponding implementation for this type before it can be considered "supported". It is difficult to detect from this aspect, and the implementation varies from browser to browser. Here is an implementation in Modernizr for reference: check the implementation of the email type:

Function support_input_type_email () {var elem = document.createElement ('input'); elem.setAttribute (' type', 'email'); elem.value =':)'; return elem.checkValidity & & elem.checkValidity () = false;}

An illegal value is set for the email type, and then the check method is called manually. If false is returned, the browser provides an implementation of this type and is considered to be supported.

History

Although history is available in HTML4, HTML5 provides a new method, which can be detected as follows:

Function support_history () {return! (window.history & & history.pushState);}

Webgl

Function support_webgl () {return!! window.WebGLRenderingContext;}

PostMessage

Function support_postMessage () {return!! window.postMessage;}

Draggable

Drag and drop features of HTML5:

Function support_draggable () {var div = document.createElement ('div'); return (' draggable' in div) | ('ondragstart' in div & &' ondrop' in div);}

WebSocket

Unction support_webSocket () {return 'WebSocket' in window | |' MozWebSocket' in window;}

Svg

Function support_svg () {return!! document.createElementNS & &! document.createElementNS ('http://www.w3.org/2000/svg',' svg') .createSVGRect;}

Supportive judgment of events

General method:

To check the support of the event, you can use method 2 mentioned above to create an element to see if there is a corresponding event name on the element. The following is an excerpt from the implementation of Modernizr:

IsEventSupported = (function () {var TAGNAMES = {'select':' input', 'change':' input', 'submit':' form', 'reset':' form', 'error':' img', 'load':' img', 'abort':' img'} Function isEventSupported (eventName, element) {elementelement = element | | document.createElement (TAGNAMES [eventName] | | 'div'); eventName =' on' + eventName; / / When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those var isSupported = eventName in element If (! isSupported) {/ / If it has no `setAttribute` (i.e. Doesn't implement Node interface), try generic element if (! element.setAttribute) {element = document.createElement ('div');} if (element.setAttribute & & element.removeAttribute) {element.setAttribute (eventName,'') IsisSupported = is (element [eventName], 'function'); / / If property was created, "remove it" (by setting value to `undefined`) if (! is (element [eventName],' undefined')) {element [eventName] = undefined;} element.removeAttribute (eventName);}} element = null Return isSupported;} return isEventSupported;}) ()

Touch event

If you just check whether the touch event is supported, there is no need to write so much above, you can simply write as follows:

Function support_touch_event () {return! (('ontouchstart' in window) | | window.DocumentTouch & & document instanceof DocumentTouch);}

Mozilla also provides a media query statement to test the support of touch: touch-enabled, you can insert an element with this media query on the page to determine whether the touch event is supported. Reference: http://www.quirksmode.org/css/mediaqueries/touch.html

However, when we do mobile development, we usually only consider the webkit kernel, not the Mozilla way. If you need it, please refer to the Modernizr source code.

Css3 part

General method

The detection of css3 attribute support is mainly checked through 2 and 4 mentioned in the above method, but what we want to check is the style attribute of the element. Another thing to mention is the browser private prefix. At this stage, most of us use the css3 attribute to write the prefix, because browsers do not fully support it. The prefixes we use are:-webkit-,-ms-,-o -,-moz-, as for the prefix-khtml-, which was used in the early days of Safari, and now almost no one uses it anymore, so it is omitted when testing. Modernizr has removed the detection of the prefix. For more information, please see https://github.com/Modernizr/Modernizr/issues/454

The general code is as follows

Var support_css3 = (function () {var div = document.createElement ('div'), vendors =' Ms O Moz Webkit'.split (''), len = vendors.length; return function (prop) {if (prop in div.style) return true; propprop = prop.replace (/ ^ [a murz] /, function (val) {return val.toUpperCase ();}) While (len--) {if (vendors [len] + prop in div.style) {return true;}} return false;};})

3D deformation

Css3 3D deformation detection is a little more complicated, first of all, to support the perspective attribute, and secondly to support the value of transform-style is preserve-3d. It cannot be detected by method 4, and needs to be queried by media. The code is as follows:

Function support_css3_3d () {var docElement = document.documentElement; var support = support_css3 ('perspective'); var body = document.body; if (support & &' webkitPerspective' in docElement.style) {var style = document.createElement ('style'); style.type =' text/css'; style [XSS _ clean] ='@ media (transform-3d), (- webkit-transform-3d) {# css3_3d_test {left:9px;position:absolute Height:3px;}}'; body.appendChild (style); var div = document.createElement ('div'); div.id =' css3_3d_test'; body.appendChild (div); support = div.offsetLeft = = 9 & & div.offsetHeight = = 3;} return support;}

You need to use the support_css3 method defined above to detect perspective.

These are the basic commonly used tests, part of the code in this article is searched on the Internet, and some are extracted from the Modernizr source code. If the description is wrong, you are welcome to correct it.

In the actual development, it is recommended to directly use Modernizr for detection, it has been packaged very beautifully. But if you only detect a few properties, or if you don't want to waste performance by loading additional libraries, you can use the above code for a single test.

After reading the above, do you have any further understanding of HTML5/CSS3 code detection? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.