html5 Up and Running学习笔记(一)
一、检测浏览器是否支持某种html5特性的方法(从易到难):
二、支持html5的浏览器检测(原生js)
<audio>
return !!document.createElement('audio').canPlayType;
MP3格式的<audio>
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/,''));
Vorbis格式的<audio>
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/ogg;codecs="vorbis"').replace(/no/,''));
MAV格式的<audio>
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/wav;codecs="1"').replace(/no/,''));
AAC格式的<audio>
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mp4;codecs="mp4a.40.2"').replace(/no/,''));
<canvas>
return !!document.createElement('canvas').getContext;
<canvas>文本API
var c = document.createElement('canvas');
return c.getContext && typeof c.getContext('2d').fillText == 'function';
<command>
return 'type' in document.createElement('command');
<datalist>
return 'options' in document.createElement('datalist');
<details>
return 'open' in document.createElement('details');
<device>
return 'type' in document.createElement('device');
<form>约束验证
return 'noValidate' in document.createElement('form');
<iframe sandbox>
return 'sandbox' in document.createElement('iframe');
<iframe srcdoc>
return 'srcdoc' in document.createElement('iframe');
<input autofocus>自动聚焦
return 'autofocus' in document.createElement('input');
<input placeholder>占位文本
return 'placeholder' in document.createElement('input');
<input type='color'>颜色选择器
var i = document.createElement('input');
i.setAttribute('type','color');
return i.type !== 'text';
<input type="email"> email地址
var i = document.createElement('input');
i.setAttribute('type','email');
return i.type !== 'text';
<input type="number"> 数字选择器
var i = document.createElement('input');
i.setAttribute('type','number');
return i.type !== 'text';
<input type="range">数字类型输入框:滑块
var i = document.createElement('input');
i.setAttribute('type','range');
return i.type !== 'text';
<input type="search"> 搜索框
var i = document.createElement('input');
i.setAttribute('type','search');
return i.type !== 'text';
<input type="tel">
var i = document.createElement('input');
i.setAttribute('type','tel');
return i.type !== 'text';
<input type="url"> web地址
var i = document.createElement('input');
i.setAttribute('type','url');
return i.type !== 'text';
<input type="date"> 日期选择器
var i = document.createElement('input');
i.setAttribute('type','date');
return i.type !== 'text';
<input type="time"> 时间选择器
var i = document.createElement('input');
i.setAttribute('type','time');
return i.type !== 'text';
<input type='datetime'> 日期时间选择器
var i = document.createElement('input');
i.setAttribute('type','datetime');
return i.type !== 'text';
<input type="datetime-local"> 本地时间选择器
var i = document.createElement('input');
i.setAttribute('type','datetime-local');
return i.type !== 'text';
<input type="month"> 月份选择器
var i = document.createElement('input');
i.setAttribute('type','month');
return i.type !== 'text';
<input ype="week"> 周选择器
var i = document.createElement('input');
i.setAttribute('type','week');
return i.type !== 'text';
<meter>
return 'value' in document.createElement('meter');
<output>
return 'value' in document.createElement('output');
<progress>
return 'value' in document.createElement('progress');
<time>
return 'valueAsdate' in document.createElement('time');
<video>
return !!document.createElement('video').canPlayType;
<video>字幕
return 'track' in document.createElement('track');
<video poster>
return 'poster' in document.createElement('video');
<video> WebM格式
var v = document.createElement('video');
return !!(v.canPlayType && v.canPlayType('video/webm;codecs="vp8,vorbis"').replace(/no/,''));
<video> H.264格式
var v = document.createElement('video');
return !!(v.canPlayType && v.canPlayType('video/mp4,codecs="avc1.42E01E,mp4a.40.2"').replace(/no/,''));
Theora格式
var v = document.createElement('video');
return !!(v.canPlayType && v.canPlayType('video/ogg,codecs="theora,vorbis"').replace(/no/,''));
contentEditable
return 'isContentEditable' in document.createElement('span');
Cross-document messageing
return !!window.postMessage;
Drag and drop
return 'draggable' in document.createElement('span');
文件API
return typeof FileReader != 'undefined';
Geolocation
return !!navigator.geolocation;
历史
return !!(window.history && window.history.pushState && window.history.popState);
本地存储
return ('localStorage' in window) && window['localStorage'] !== null;
微数据(Microdata)
return !!document.getItems;
离线Web应用程序
return !!window.applicationCache;
“服务器已发送(Server-sent)事件”
return typeof EventSource !== 'undefined';
会话存储(Session storage)
try{
return ('sessionStorage' in window) && window['sessionStorage'] !== null;
}catch(e){
return false;
}
SVG
return !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg,'svg'').createSVGRect);
text/html 中的SVG
var e = document.createElement('div);
e.innerHTML = '<svg></svg>';
return !!(window.SVGSVGElement && e.firstChild instanceof window.SVGSVGElement);
WebSimpleDB
return !!window.indexedDB;
Web Sockets
return !!window.WebSocket;
Web SQL Database
return !!window.openDatabase;
Web Workers
return !!window.Worker;
Undo
return typeof UndoManager !== 'undefined';