网页设计学习笔记

HTML,CSS,JavaScript

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::

由于各个浏览器的各种差别很多,为使网页能兼容各个浏览器,我们开始使用的是浏览器检测的方式:即通过 navigator.userAgent 字符串来判断浏览器的类型和版本。这种方法现在看来有不少问题,例如:

  1. userAgent 字符串容易被修改和伪装,从而导致这种方法不可靠
  2. 当浏览器的新版本支持某个新功能时,需要修改原有代码
  3. 遇到新的浏览器时,需要修改原有代码以支持它们

因此,这种方法应该尽量少使用,而改用新的方法:特征检测。特征检测通过检测某功能对应的函数或对象是否可用,来判定浏览器是否支持该功能。使用这种方法,就能克服前面的浏览器检测的几个问题。因此特征检测越来越受人们重视。

例如,要检测浏览器是否支持 XMLHttpRequest,可以用下面的代码:

if (window.XMLHttpRequest) {
  alert("XMLHttpRequest is supported!");
}

或者更加准确一点,判断该对象的类型:

if (typeof window.XMLHttpRequest == "function") {
  alert("XMLHttpRequest is supported!");
}

如果我们进而需要检测浏览器是否支持 CORS,可以这样检测:

if ("withCredentials" in new XMLHttpRequest) {
  alert("CORS XMLHttpRequest is supported");
}

再如,我们需要检测浏览器是否支持 HTML5 的 <canvas>,可以这样写:

if (document.createElement('canvas').getContext) {
  alert("canvas is supported!");
}

如果需要检测的特性太多,可以用现有的 JavaScript 库,比如 Modernizr

使用特征检测方法,我们可以方便的实现平稳降级(Graceful Degradation)或者渐进增强(Progressive Enhancement)的网页设计方式。

参考资料:
[1] Browser Feature Detection | MDN
[2] HTML5 - Browser and Feature Detection - MSDN
[3] Detecting HTML5 Features - Dive Into HTML5
[4] The All-In-One Almost-Alphabetical Guide to Detecting Everything - Dive Into HTML5
[5] Modernizr: the feature detection library for HTML5/CSS3
[6] yepnope.js | A Conditional Loader For Your Polyfills!
[7] 使用Modernizr探测HTML5/CSS3新特性 - 汤姆大叔 - 博客园
[8] Feature detection is not browser detection | NCZOnline
[9] 渐进增强与优雅降级 | 大发贱志
[A] (译)理解“渐进增强”  - 前端技术 | TaoBaoUED

posted on 2013-02-02 18:16  zoho  阅读(666)  评论(0编辑  收藏  举报