Detailed introduction to HTML5 API browser support detection

HTML5 has developed to the present, although it has not been popularized on a large scale, but in our daily life In life, it is easy to see that HTML5 games, websites, and applications are emerging in endlessly. As a front-end staff, you should also know more about these API to lay the foundation for future applications. Below I will introduce to you the new HTML5. The introduced APIs, and the browser detection methods of each API, I mainly refer to the "html5 secrets" and "html5 advanced programming" that I read recently.

First, let's introduce Modernizr, which is. An open source Javascript Class Library used to detect browser support for HTML5 and CSS3 features. The latest version is version 2.5.3 (download). The method of use is very simple. On the page After introducing JS, it will run automatically and create a Modernizr global object , which creates a corresponding Boolean type attribute for each detectable feature. , we just need to call it, for example:

if( Modernizr.canvas ){  
// 恩，我知道这个属性，他是画图用的：）
}
else{  
// canvas 这是个什么东东？？
}

1.CanvasCanvas is a resolution-dependent bitmap canvas, and the graphics it draws are not scalable , you can draw any graphics on Canvas through Javascript, and even load photos. The HTML5 standard has formulated a series of Canvas APIs for drawing simple graphics, defining paths, creating gradients, and applying image transformations. A Canvas is a rectangular area. By default, it is 300 pixels wide and 150 pixels high.
Note: The object drawn by Canvas does not belong to the page DOM structure or any other
namespace

// 创建一个 Canvas 元素，并检查该元素是否拥有 getContext() 方法，然后用双否定强制返回一个布尔值
var hasCanvas = !!document.createElement("canvas").getContext;
// Modernizr检测方法，返回布尔值
var hasCanvas = Modernizr.canvas ;

##2. The emergence of these two elements, .Audio and Video

, allows developers to play audio or video without using plug-ins. The HTML5 specification also provides a universal, complete, scriptable control API ##. #

// 创建一个 Audio 元素，并检查该元素是否拥有 canPlayType() 方法，然后用双否定强制返回一个布尔值
var hasAudio = !!document.createElement("audio").canPlayType;
// modernizr检测方法
var hasAudio = Modernizr.audio;
// 创建一个 Video 元素，并检查该元素是否拥有 canPlayType() 方法，然后用双否定强制返回一个布尔值
var hasVideo = !!document.createElement("video").canPlayType;
// modernizr检测方法
var hasVideo = Modernizr.video;

If you want to check whether the default format is supported, you can write:

var hasVideo = document.createElement("video").canPlayType('video/ogg; codecs="theora, vorbis"')；
// modernizr检测方法
var hasVideo = Modernizr.video.ogg;

The native method will return "probably", "maybe" or "", which respectively means "completely confident to play this format", " "It is possible that this format can be played", "I am sure that this format cannot be played".

The parameter passed in by the canPlayType() method is expressed in text to ask the browser whether it can play the "theora" encoding format encapsulated in the ogg container. Video and audio in "vorbis" format

3.Web Storage

Web Storage (also known as DOMStorage) allows developers to store data in Javascript objects on the page. Saved on load and easily accessible. Developers can choose whether to activate this data when opening a new window or new tab and when restarting the browser. The stored data will not be transmitted over the network and can save big data up to several megabytes.

// 支持的话，全局 window 对象会有一个 localStorage 属性
var hasWebStorage = window.localStorage;
// modernizr检测方法
var hasWebStorage = Modernizr.localstorage;

4.Web WorkersWeb Workers can allow Web applications to have background processing capabilities, and it supports multi-threading very well. Therefore, Javascript applications using HTML5 can take full advantage of multi-core CPUs and allocate long-term tasks to Web Workers for execution.

Note: Scripts executed in Web Workers cannot access the window object of the page.

// 支持的话，全局 window 对象会有一个 Worker 属性
var hasWorker = window.Worker;
// modernizr检测方法
var hasWorker = Modernizr.webworkers;

5.Offline Web Applications

HTML5's offline application cache makes it possible to run applications without a network connection. When you first visit a Web site with offline access capabilities, the Web server tells the browser which files are necessary to ensure normal operation offline. These files can be any files-HTML, Javascript, images, or videos.

// 支持的话，全局 window 对象会有一个 applicationCache 属性
var hasApplicationCache = window.applicationCache;
// modernizr检测方法
var hasApplicationCache = Modernizr.applicationcache ;

6.Geolocation
HTML5’s geolocation API can locate where you are in the world and share the location information with permission. Many interesting applications can be built with this amazing feature. For example, calculating running distance, social applications based on GPS navigation, etc. It obtains positioning data through IP address, GPS geolocation, Wi-Fi geolocation, mobile phone geolocation, and custom geolocation.

// 支持的话，全局 navigator 对象会有一个 geolocation 属性
var hasGeolocation = navigator.geolocation;
// modernizr检测方法
var hasGeolocation = Modernizr.geolocation;

7.Forms
HTML5 defines many new input box types: search representing search, numeric type input box number, range selection slider range, color selector color, phone number input box tel, website address input box url, email input box email, date selector date, month input box month, week input box week, timestamp input box time, accurate date/time stamp entry and exit box datetime, local Date and time input box datetime-local.

// 创建一个 input 元素，该元素默认是 text 类型，改变他的类型，然后查看改变是否被保留
var o = document.createElement("input");o.setAttribute("type","color");return i.type != "text";
// modernizr检测方法
var hasInputType = Modernizr.inputtypes.color;

8.WebSockets
WebSockets 是 HTML5 中最强大的通信功能，它定义了一个全双工通信通道（又称为双向同时通信，即通信的双方可以同时发送和接受信息的信息交互方式），仅通过 Web 上的一个 Socket 即可进行通信。它不仅仅是对常规 HTTP 通信的另一种增量加强，更代表着一次巨大的进步，对实时的、事件驱动的程序而言更是如此。

// 支持的话，全局 window 对象会有一个 webSocket 属性
var hasWebSocket = window.webSocket;
// modernizr检测方法
var hasWebSocket = Modernizr.websockets;

8.Communication
Communication 是 HTML5 中用来实现正在运行的两个页面之间（iframe、标签页、窗口）进行跨源通信和信息共享的API。它把 postMessage API 定义为发送消息的标准方式。

// 支持的话，全局 window 对象会有一个 postMessage 属性
var hasPostMessage = window.postMessage;
// modernizr检测方法
var hasPostMessage = Modernizr.postmessage;

API 的浏览器支持情况主要介绍这些，以后我会逐个 API 进行详细讲解，把自己学到和研究的东西共享出来，欢迎大家来一块交流学习：）

The above is the detailed content of Detailed introduction to HTML5 API browser support detection. For more information, please follow other related articles on the PHP Chinese website!