HTML5 Characteristic detection:
1. Detecting Global objects: whether a window or navigator has a specific property
2. Create an element: Check if the DOM object of the element has a specific property
3. Create an element: whether the DOM object that detects the element has a specific method
4. Create an element: A property value given to the DOM object of the element to detect the browser
Whether the property value is preserved
MODERNIZR:HTML5 feature detection library for detecting whether the browser supports HTML5
and CSS3 features. Download version Development http://www.modernizr.com/
eg.
Ⅰ. Checking to see if the browser supports the canvas API
1. HTML5 characteristic Test 2:
<title>dive into html5</title>
<body>
<script>
function Supports_canvas () {
Return!! Document.createelement (' canvas '). GetContext;}
Alert (Supports_canvas ());
</script></body>
2. Use the method provided by the Modernizr Library to detect
<title>dive into html5</title>
<script src= "Modernizr.custom.57110.js" ></script>
if (Modernizr.canvas) {
Alert ("OK"); }//Let ' s draw some shapes!
else {
Alert ("No");} No native canvas support available
</script></body>
Ⅱ. Detects if the browser supports HTML5 Viedo
1. Using HTML5 characteristics to detect 2
function Supports_video () {
Return!! Document. CreateElement ("video"). Canplaytype;}
2. Use the method provided by the Modernizr Library to detect
if (Modernizr.video) {
Let ' s play some video!}
else{
No native video support available
Maybe check for QuickTime or Flash instead}
Ⅲ. Detects if the browser supports a video format
A Detects video in the MPEG-4 container in the H. Encode format and audio in AACLC format (Mac and iphone support)
1. Using HTML5 to detect characteristics 3
function Supports_h264_baseline_video () {
if (!supports_video ()) {return false;}
var v=document.createelement ("video");
Return V.canplaytype (' video/mp4;codecs= ' avc1.42e01e,mp4a.40.2 "');}
The Canplaytype () method returns a string:
"Probably" means that the browser is fully confident that the format can be played
"Maybe" means that the browser may play this format
"" (empty string) indicates that the browser cannot play this format
Two Detects the Theora encoded video in the Ogg container and the audio in Vorbis encoded format (supported by open source browsers such as Mozilla Firefox)
1. Using HTML5 to detect characteristics 3
function Supports_ogg_theora_video () {
if (!supports_video ()) {return false;}
var v=document.createelement ("video");
Return V.canplaytype (' video/ogg;codecs= ' Theora,vorbis "');}
Three Detects audio in WEBM video encoding format and Vorbis encoded format in the Matroska container
1. Using HTML5 to detect characteristics 3
function Supports_webm_video () {
if (!supports_video ()) {return false;}
var v = document.createelement ("video");
Return V.canplaytype (' video/webm; codecs= "VP8, Vorbis" ');
Use the methods provided by the MODERNIZR library to detect whether the browser supports various HTML5 formats
if (Modernizr.video) {
Let ' s play some video! But what kind?
if (Modernizr.video.ogg) {
Try Ogg Theora + Vorbis in an OGG container
} else if (Modernizr.video.h264) {//try H + + video + AAC audio in an MP4 container
}}
Ⅳ. Detects if the browser supports local storage.
1. Test Method 1
function Supports_local_storage () {
Return (' localstorage ' in window) && window[' localstorage ']!== null;
}
2. Using the Modernizr Library
if (modernizr.localstorage) {
Window.localstorage is available!}
else {
No native support for local storage:(
Maybe try Gears or another third-party solution
}
Ⅴ. Detects if the browser supports Web Workers.
1. Test Method 1
function Supports_web_workers () {
Return!! Window. Worker;
}
2. Using the Modernizr Library
if (modernizr.webworkers) {
Window. Worker is available!
} else {
No native support for web workers:(
Maybe try Gears or another third-party solution
}
Ⅵ. Detects if the browser supports offline Web applications (Offline Web applications)
1. Test Method 1
function Supports_offline () {
Return!! Window.applicationcache;
}
2. Using the Modernizr Library
if (Modernizr.applicationcache) {
Window.applicationcache is available!
} else {
No native support for offline:(
Maybe try Gears or another third-party solution
}
Ⅶ. Detects if the browser supports geolocation applications
1. Test Method 1
function Supports_geolocation () {
Return!! Navigator.geolocation;
}
2. Using the Modernizr Library
if (modernizr.geolocation) {
Let's find out where you are!
} else {
No native geolocation support available:(
Maybe try Gears or another third-party solution
}
Ⅷ. Detects if the browser supports input box types
1. Test Method 4
function supports_inputtypes{
var i = document.createelement ("input");
I.setattribute ("type", "color");
return i.type!== "text";
}
2. Using the Modernizr Library
if (! Modernizr.inputtypes.date) {
No native support for <input type= "date" >:(
Maybe build one yourself with
Dojo
or jQueryUI
}
Ⅸ. Detect if the browser supports stand text (Placeholder)
1. Test Method 2
function Supports_input_placeholder () {
var i = document.createelement (' input ');
Return ' placeholder ' in I;
}
2. Using the Modernizr Library
if (Modernizr.input.placeholder) {
Your placeholder text should already be visible!
} else {
No placeholder Support:(
Fall back to a scripted solution
}
Ⅹ. Detects if the browser supports its own active focus
1. Test Method 2
function Supports_input_autofocus () {
var i = document.createelement (' input ');
Return ' autofocus ' in I;
}
2. Using the Modernizr Library
if (Modernizr.input.autofocus) {
Autofocus works!
} else {
No autofocus support:(
Fall back to a scripted solution
}
Ⅺ. Detects if the browser supports the HTML5 micro data API
1. Test Method 1
function Supports_microdata_api () {
Return!! Document.getitems;
}
HTML5 characteristic detection
