做网站时候，浏览器兼容就像是头号难题。HTML5这些新技术越来越受欢迎，可是用原有的navigator.userAgent或navigator.appName检查浏览器就不怎么管用了。所以今天我要教大家如何通过查看元素属性、方法和事件，更准确地知道各种浏览器吃不吃香，以便我们能做出各种浏览器都喜欢的网站界面和操作体验。
function support_canvas(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
1.检测元素方法
function support_canvas_text(){
var elem = document.createElement('canvas');
var context = elem.getContext('2d');
return typeof context.fillText === 'function';
}
在检查浏览器兼容性的时候，我们常常会拿个元素试探一下它有没有某种方法，然后试着运行这个方法看看Browser能不能搞定。比方说，我们可以造出一个canvas元素，查看它有没有getContext属性，这种方法可以帮我们排除不支持Canvas画图的浏览器。但是，有时候光看getContext属性还不够保险，因为有时你需要做得更全面，比如 confirmed that elem.getContext(‘2d’)的结果也没问题才行。
function support_video(){
return !!document.createElement('video').canPlayType;
}function support_audio(){
return !!document.createElement('audio').canPlayType;
}
而且，如果要看看网页是不是能播某些音频、视频格式，就用canPlayType试一下！过去这招儿可帮了我大忙。
unction support_video_ogg(){
var elem = document.createElement('video');
return elem.canPlayType('video/ogg; codecs="theora"');
}function support_video_h264(){
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"');
}
当然，有时候你就得注意，比如浏览器把cookie关掉了，或者进了隐私模式，这都有可能导致网页出问题。这个时候，你可以试试看看看那个属性，或者瞧瞧跑没跑出来啥异常来判断一下。要是有个异常啥的，那说明这个功能是不能用滴。这样一来，咱们就能更容易地应对网页那些特殊状况下的兼容性问题。
function support_localStorage(){
try {
return 'localStorage' in window && window['localStorage'] !== null;
}
catch(e){
return false;
}
}
2.检测input标签新增属性
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;
}
}
HTML5越来越牛了，input标签多了好多新功能比如autocomplete、autofocus、list、placeholder啥的。想知道你用的浏览器支不支持？简单！建个input标签然后看看有没有这几个新属性就OK了。还是拿autocomplete来说，随便搞个input标签，再看看它有没有这个属性，就能知道你的浏览器是不是能玩转新技能。
function support_webWorker(){
return !!window.Worker;
}
3.检查表单类型支持
function support_applicationCache(){
return !!window.applicationCache;
}
对于电子邮件啊、范围这类新类型的表单元素，我们也有小窍门去检查他们能否跟老浏览器和谐相处。就拿电子邮件来说，现在的浏览器一般可以自动帮你检验输入的格式是不是正确。然后咱们就给它设置一个不合法的电子邮件，看看它能不能准确地检测出来，并给出反馈。如果它能顺利完成校验，那就表示你用的这个浏览器是支持这种类型的。
function support_geolocation(){
return 'geolocation' in navigator;
}
4.检查history API支持
虽然历史API早就有，但HTML5给它加了几个小功能。只要看下你现在能用不 history.pushState这些新方法，就知道浏览器能不能用历史API了。
function support_input_autocomplete(){
var elem = document.createElement('input');
return 'autocomplete' in elem;
}
5.检查事件支持性
function support_input_list(){
var elem = document.createElement('input');
return !!('list' in elem && document.createElement('datalist') && window.HTMLDataListElement);
}
除了属性和方法，你还得知道页面开发中的另一个关键要素——事件。就拿触摸事件来说，只要一试就能知道环境支不支持！类似地，当试着绑定其他事件时，成功了就说明这个环境能识别这家伙。
function support_input_type_number(){
var elem = document.createElement('input');
elem.setAttribute('type', 'number');
return elem.type !== 'text';
}
6.检查CSS3属性支持度
随着CSS3越来越火，网上那些独特又好看的样式或效果就成了设计时必做的事。但要保证网页能在各种环境下都看起来美美的，首先要确认你所处的环境支不支持这些样式。这就是说的看元素的样式有没有被正确应用。
7.处理私有前缀
用CSS3样式得留个心眼儿，别忘了厂商自家的前缀！虽然大家都是按照CSS3的规矩来，但具体玩法儿还是有点区别，所以要用上新功能的话，别忘了加各自家的前缀，这样才能保证不管在哪儿看效果都没问题。
function support_input_type_email(){ var elem = document.createElement('input');
elem.setAttribute('type', 'email');
elem.value = ':)'; return elem.checkValidity && elem.checkValidity() === false;
}
说白了，为了让页面能在各种情况下游刃有余，我们得用各种办法保护它，无论是网页元素属性、方法还是事件这些小细节，亦或是处理异常、做数字验证等等这些技术活儿。这样才能轻松适应各种花里胡哨的前端环境。
评论0