几行代码完全解决HTML5在低版本浏览器中兼容性问题

2019独角兽企业重金招聘Python工程师标准>>>

　HTML5 有许多激动人心的特性，有了新的标签、新的CSS 能力和新的JavaScript API，Web 的能力范围有了大的飞跃。除了浏览器厂商的士气高涨之外，令人激动的新功能列表几乎每天都在增加。从“nightly builds”(每夜都构建一版)到开发渠道发行版和正常的平台预览版，浏览器在飞速变化，世界各地Web 开发人员们正在加入这个狂欢。
但是，尽管开发和浏览器社区正在把HTML5 的喧嚣推到一个极度兴奋的高潮，网上的大多数人却不像我们一样使用最新的浏览器和最新版本。如果你是一个大型开发机构的Web 开发人员或者是拥有庞大用户群的大企业，那你对此可能很清楚。即使你为通过Web 提供服务的小型机构或新创立的企业工作，你可能也要花上大量时间来确保自己的网站能够支持尽可能多的浏览器和浏览器版本。　　
基于这一现实，很容易看出，HTML5 还谈不到它是否已为当今的使用做好准备，而是你是否为它做好了准备。例如，假设你用一些新的语法标签(例如和)新建了一个页面，添加了一些新的CSS 功能，例如圆角(border-radius)和阴影(box-shadow)，甚至添加了一个元素在页面上绘制出一个HTML5 标识。　　
在较新的浏览器上，例如Internet Explorer 9、Firefox 4 及以上版本、或者Google Chrome上，这个页面的显示如图1 所示。但如果尝试在Internet Explorer 8 或更早的浏览器上加载页面，很有可能看到的是图2 所示的效果：一个残缺不全的页面。

1 小时前上传

下载附件 (77.97 KB)

　　如果你在研究HTML5 的所有强大功能却得到上述体验之后告诉自己说：最好还是等等，那么我不会对你有任何责怪。如果我问你准备好了吗?你很容易得出这样的结论：HTML5 还没有为你或你的用户做好准备。　　
在你决定等到2022 年再考虑HTML5 的之前，我建议你继续阅读本文的后面部分，我将向你提供一些实用的策略，让你现在就能采用HTML5 技术，同时避免出现图2 所示的糟糕的降级情况。我将从下面三个主题进行详细地介绍：
　　•功能检测与用户代理(UA)嗅探比较
　　•用 JavaScript 实现填补(Polyfill)
　　•优雅降级
　　这些应该可以教会你很多构建支持各种浏览器的网站所需要了解的知识。在本文结束时，你会拥有一个可靠的策略，可以充满自信、毫不犹豫地采用HTML5 技术。你还会拥有一些工具在手，可以逐步地为新浏览器增强网站，同时更好地适应旧的浏览器。因为HTML5 的采用策略就是一个浏览器也不放弃。
　　一、功能检测的重要性
　　为了提供跨浏览器的稳定且一致的体验，开发人员经常需要获得一些关于用户浏览器的信息。以前的普遍做法是像下面这样用JavaScript 检测这些信息：　　

varuserAgent = navigator.userAgent;
if (userAgent.indexOf('MSIE') >= 0) {
console.log("Hello, IE user");
} else if (userAgent.indexOf('Firefox') >= 0) {
console.log("Hello, Firefox user");
} else if (userAgent.indexOf('Chrome') >= 0) {
console.log("Hello, Chrome user");
}

复制代码

　　这个技术称为用户代理(UA)嗅探，广泛地用于判断正在请求页面的是哪个浏览器。这里的思路是：知道了用户的浏览器(例如IE7)，就能在运行的时候决定启用或禁用网站的哪项功能。UA 嗅探就相当于对浏览器说：“你是谁?”(对UA 嗅探以及其他检测技术的深入分析，请参阅http://t.cn/zOi5m72)
　　这种做法的问题在于，浏览器会撒谎。UA 字符串是一个用户可以配置的信息，并不会提供100%正确的浏览器信息。而且，随着这一技术的广泛采用，许多浏览器厂商在自己的UA 字符串中增加了额外内容，用来欺骗脚本，让脚本对于实际使用的浏览器做出错误判断，从而避免检测。现在有些浏览器甚至提供小工具，允许用户只要轻轻点击几下鼠标，就能修改UA 字符串。
　　UA 嗅探的目的从来就不是确定用户的浏览器和版本。而且它肯定也不是为了在你不喜欢用户使用的浏览器时，让你可以告诉用户说“请下载另一个浏览器”——即使有些人就是这样使用UA 嗅探技术的。用户有权选择自己使用什么浏览器，开发人员的职责则是提供最可靠且一致的体验，不要把浏览器的偏好强加给用户。UA 嗅探的目标是让你能够准确地了解在用户当前的浏览器中，有哪些能力或功能可以利用。对浏览器本身的了解，只是获得这些信息的一个途径。目前有一些UA 嗅探的替代技术，其中一项正在日益流行的技术称为对象检测或功能检测。这两个术语多数时候可以互换使用，但本文统一使用“功能检测”(feature detection)。功能检测的目标是判断某项功能或能力在用户当前的浏览器中是否受支持。如果UA 嗅探是问浏览器“你是谁”，“功能检测”就是问浏览器“你能干什么”，这个问题更直接，对于根据条件向用户提供功能来说，这种方法也更可靠。如果功能检测脚本实现正确，用户或浏览器将很难造假或错报功能支持。

　　二、手动功能检测
　　那么，与UA 嗅探的示例相比，功能检测到底是什么样呢?为了回答这个问题，我们先来看看如果在Internet Explorer 8 中查看前面的HTML5 页面(如图1 所示)，如何解决出现的问题。这个页面的标签内容如代码段1 所示。

My Awesome Site
37
My Awesome Site
An Article
Isn't this awesome?

复制代码
　　代码段1 带有HTML5 新语义标签的页面
　　如图1 和图2 所示，Internet Explorer 9 和 Internet Explorer 8 的显示效果有很大的差别。对于初学者来说，我的页面完全没有样式，因为这个页面的CSS 并不存在。而且，页面底部丢失了好玩的HTML5 盾牌。每个问题都可以轻松解决，而功能检测则是明确问题的第一步。两个问题的原因都很简单：对于Internet Explorer 8 来说，、和都不是有效的HTML 元素，所以无法使用。要解决问题，我们不用UA 嗅探来判断所使用的浏览器/版本，而要通过JavaScript 询问浏览器是否支持元素和它的JavaScript API，对Canvas 的功能检测如下所示：

!!document_createElement_x_x('canvas').getContext

复制代码

　　这条语句做了好几件事：首先，它使用两个否定(!!)操作符强行将未定义的值显式地设为false;然后，它手动新建一个canvas 元素，并将它加到DOM 中;最后，它调用getContext函数，这是元素的一个新函数，是通过JavaScript 操纵Canvas API 的途径。如果使用IE9，则这条语句会返回true。如果使用IE8，则getContext会返回“undefined”(未定义)，会被前面的两个否定操作符强行变为false。
　　这是最基本的功能检测。利用这条语句以及其他类似语句，就有了查询浏览器所支持功能的更可靠方法。关于手动功能检测的更多信息，请参阅diveintohtml5.info/everything.html

　　三、使用Modernizr进行功能检测
　　手动功能检测肯定是对UA 嗅探的提高，但这种做法仍然需要你做大量工作来检测功能是否可用，以及在功能不存在的时候决定做什么。虽然Canvas 示例很简单，只需要一行代码，但不是每个要检测的功能都这么简单——不同浏览器的检测代码也各不相同。例如，要检测是否支持前面使用的CSS3 模块(border-radius 和box-shadow)就有些麻烦。值得庆幸的是，Modernizr (modernizr.com) 提供了更好的方法。Modernizr是一个JavaScript 库“……检测下一代 Web 技术(即源于HTML 5 和CSS3 规范的功能)的本地实现是否可用”。在页面上添加对Modernizr的引用可以提供四大功能：
　　1) 全面列出支持的功能，智能地加入标签，从而实现CSS 的条件定义。
　　2) 一个 JavaScript 对象，方便进行基于脚本的功能检测。
　　3) 在运行的时候将全部HTML5 新标签加入DOM，方便IE8 和之前的IE 浏览器(稍　　后就会知道不仅如此)。
　　4) 一个脚本加载器，可以根据条件将polyfill加载到页面中。

　　本文对第1 项不做进一步介绍，但鼓励你访问modernizr.com 网站，学习这一功能及其余功能的文档。
　　上面的第2 项功能，可以将下面的代码：　　

!!document_createElement_x_x('canvas').getContext

复制代码

　　改为这行代码：

Modernizr.canvas

复制代码

　　这行代码会返回一个布尔值，表明页面是否支持Canvas 元素。使用Modernizr比自行执行功能检测的好处是，Modernizr是一个经过良好测试、健壮的、广为采用的库，它已经完成了许多繁重的工作。Twitter、Google、Microsoft 以及无数其他机构和开发人员都在使用Modernizr，你当然也可以使用。在ASP.NET MVC 3 工具更新(2011 年4 月发布)中，Microsoft甚至随新的ASP.NET MVC 应用程序一起配备了Modernizr。当然，我们迄今为止所做的，不过是检测是否支持元素。通过功能检测知道了浏览器是否支持某一功能之后，接下来通常是创建一些条件逻辑，在功能不存在的时候阻止特定代码的执行或者换个路径来执行，例如：

if (Modernizr.canvas) {
// 这里执行canvas 代码。
}

复制代码

　　根据附加的浏览器功能是否存在来给网站增加功能，这种做法称为“渐进式增强”，因为体验增强针对的能力更强的浏览器。另一方面是“优雅降级”，即某项功能的缺失不会造成浏览器出错或发生故障，而是应该向用户提供一些削弱的功能或替代能力。对于旧版浏览器来说，不必将优雅降级作为默认选择。在许多情况下，甚至可能不是最佳选择。相反，在Modernizr的帮助下，你通常可以使用许多可用的浏览器polyfill，将类似于HTML5 的功能添加到不支持HTML5 的浏览器中。

　　四、什么是Polyfill
　　根据Modernizr网站的说法，polyfill是“在旧版浏览器上复制标准API 的JavaScript 补充”。“标准API”指的是HTML5 技术或功能，例如Canvas。“JavaScript 补充”指的是可以动态地加载JavaScript 代码或库，在不支持这些标准API 的浏览器中模拟它们。例如，geolocation(地理位置)polyfill可以在navigator 对象上添加全局的geolocation对象，还能添加getCurrentPosition函数以及“坐标”回调对象，所有这些都是W3C 地理位置API 定义的对象和函数。因为polyfill模拟标准API，所以能够以一种面向所有浏览器未来的方式针对这些API 进行开发，最终目标是：一旦对这些API 的支持变成绝对大多数，则可以方便地去掉polyfill，无需做任何额外工作。
　　通过在页面上添加对Modernizr的引用，我就得到了与代码段1 示例相关的polyfill的直接好处。页面显示没有样式，是因为IE8 不认识

和

标签。因为它不认识这些标签，所以没将它们加入DOM，而CSS 选择元素要发挥样式作用，需要在DOM 中有这些元素。当我在页面上添加

几行代码完全解决HTML5在低版本浏览器中兼容性问题

你可能感兴趣的:(javascript,测试,python)