This article is reproduced in: Ape 2048 website ➮ HTML5 API browser compatibility support is detected
HTML5 development up to now, although no large-scale popular, but in our daily lives, it is easy to saw, HTML5 games, websites, applications are endless. As a front-end staff, should know more about these API laying the foundation for future applications, here I will introduce a new API HTML5 introduced, along with browser detection method for each API, the main reference I recently read "html5 Secret "and" html5 advanced programming. "
First of all, we first introduced Modernizr, which is used to detect a case of browser support for HTML5 and CSS3 features open-source Javascript library, and now the latest is version 2.5.3 (download), using a very simple method, introduced in the page after JS, it will automatically run, and create a global Modernizr object that corresponds to a boolean attributes are created for each feature can be detected, we just need to call on the line, for example:
|
1
2
3
4
5
|
if
( Modernizr.canvas ){
// 恩，我知道这个属性，他是画图用的：）
}
else
{
// canvas 这是个什么东东？？
}
|
1.Canvas
Canvas is dependent on the resolution digital pictures of cloth, its graphics rendering is not scalable, you can draw Javascript in Canvas by any of the above graphics, photos and even loaded, HTML5 standard has developed a series Canvas API, used to draw simple graphics, defined path, create a gradient and apply image transformation. A Canvas is a rectangular area, the default case 300 pixels wide, 150 pixels high.
Note: Canvas drawn objects do not belong to the page DOM structure or any other namespace.
// create a Canvas element, and check whether the element has getContext () method, and then forced to return a Boolean value double negative
var hasCanvas = !!document.createElement("canvas").getContext;
// Modernizr detection method that returns a Boolean value
var hasCanvas = Modernizr.canvas ;
2.Audio and Video
These two elements appear, so that developers do not have to use plug-in can play audio or video, HTML5 specification also provides a common, complete, scripted control API.
// Create an Audio element, and check whether the element has canPlayType () method, and then forced to return a Boolean value double negative
var hasAudio = !!document.createElement("audio").canPlayType;
// modernizr detection method
var hasAudio = Nodernisrkodio;
// Create a Video element, and check whether the element has canPlayType () method, and then forced to return a Boolean value double negative
var hasVideo = !!document.createElement("video").canPlayType;
// modernizr detection method
was hasVideo = Modernizr.video;
Want to test whether to support dictation format, you can write:
var hasVideo = document.createElement("video").canPlayType('video/ogg; codecs="theora, vorbis"')；
// modernizr detection method
was hasVideo = Modernizr.video.ogg;
Native method will return "probably", "maybe" or "" representing "completely confident to play this format", "There may be able to play this format", "OK can not play this format."
canPlayType () method of passing parameters expressed in words is asking the browser, you can play ogg container enclosed within the "theora" Video encoding format and "vorbis" format audio.
3.Web Storage
Web Storage (also known as DOMStorage) allows developers to store data in Javascript objects, the object is stored in the page loads, and easily accessible. When you open a new window or tab and restart the browser, developers can choose whether to activate the data. The stored data will not be transmitted over the network, and can save large data up to several megabytes.
// support it, there will be a global window object localStorage property
var hasWebStorage = window.localStorage;
// modernizr detection method
was hasWebStorage = Modernizr.localstorage;
4.Web Workers
Web Workers can make a Web application with background processing capabilities, its multi-threading support is very good. Therefore, the use of Javascript HTML5 applications can take full advantage of multi-core CPU brings, the allocation of long time-consuming tasks to Web Workers to perform.
Note: In the footsteps of the implementation of Web Workers can not access the window object of the page.
// support it, there will be a global window object attributes Worker
var hasWorker = window.Worker;
// modernizr detection method
was hasWorker = Modernizr.webworkers;
5.Offline Web Applications
HTML5 cache offline applications running in the absence of such a network connection state of application becomes possible. To ensure the normal work offline when necessary during the first visit with offline access a Web site, Web server tells the browser which files, which can make any file --HTML, Javascript, images or videos.
// support it, there will be a global window object attributes applicationCache
var hasApplicationCache = window.applicationCache;
// modernizr detection method
var hasApplicationCache = Modernizr.applicationcache ;
6.Geolocation
HTML5 geolocation API to locate what you place in the world, and in the case allowed to share out the location information. This fantastic features can be constructed many interesting applications. For example, to calculate running distance, GPS navigation based social networking applications and so on. It, custom geopositioning obtain positioning data via IP addresses, GPS geographical positioning, Wi-Fi geolocation, mobile phone geolocation.
// support it, there will be a global navigator object geolocation property
was hasGeolocation = navigator.geolocation;
// modernizr detection method
was hasGeolocation = Modernizr.geolocation;
7.Forms
HTML5 is defined in a lot of new input box type: This search search, numeric input box number, range selection slider range, color picker color, phone number input box tel, enter the URL box url, e-mail input box email, date selector date, month input box month, week input box week, the time stamp input box time, an accurate representation of the date / time stamp and out of the box datetime, local date and time input box datetime-local.
// Create an input element, which is the default text type, change his type, and then see whether the change is retained
var o = document.createElement("input");
o.setAttribute("type","color");
return i.type != "text";
// modernizr detection method
var hasInputType = Modernizr.inputtypes.color;
8.WebSockets
HTML5 WebSockets is the most powerful communications features, which defines a full-duplex communication channel (also known as two-way simultaneous communication, ie communication between the parties can interactively send and receive information at the same time information), on the Web only through a Socket to communicate. It is not just another incremental strengthen conventional HTTP communications, but also represent a great leap forward for real-time, event-driven program is especially true.
// support it, there will be a global window object attributes webSocket
was hasWebSocket = window.webSocket;
// modernizr detection method
was hasWebSocket = Modernizr.websockets;
9.Communication
Communication is used to achieve the HTML5 running between two pages (iframes, tab, window) for the source communication and information sharing across the API. It postMessage API is defined as the standard way to send a message.
// support it, there will be a global window object attributes postMessage
var hasPostMessage = window.postMessage;
// modernizr detection method
var hasPostMessage = Modernizr.postmessage;
More professional front-end knowledge, make the [2048] ape www.mk2048.com