专题课程
24ways 在这10年中已经逐渐变得强大了。在因特网历史中这已是一个永远不可磨灭的了。回想一下在那段时间里我们见证所有变化：Ajax的兴起，移动设备的激增，前端开发工具不可预知的前景。
工具和技术来来往往，兴起衰落，但在过去的十年中有一件事于我而言是一直没有变化的：渐进式增强。
渐进式增强不是一门技术。它更像是一种思考方式。渐进式增强鼓励你去思考网页所提供的基本意义，而不是去想一个已完成网页如何展示的细小问题。所以渐进式增强允许你以更抽象的方式思考核心功能，而不是纠结于网页在不错的宽屏设备上的理想状态。
一旦你已经确定要添加的核心功能是什么–向购物栏中添加一件商品，发布一条消息，分享一张图片–然后你可以以一种最简单的方式实现该功能。那通常也意味着要从优秀的老式的HTML入手。你所需要的通常只是链接和表格。然后，只要你已经使得该核心功能基本工作，你就可以开始对更多现代浏览器加强功能以逐步提供更好的用户体验。
以这种方式工作的好处不仅仅是你的网页可以在旧式浏览器中工作（尽管只是基本能运行）。它还能保证如果在现在的浏览器中出现的小毛病不至于酿成大祸。
人们对渐进式增强存在一个误解，认为渐进式增强就是花时间解决旧式浏览器，然而事实却相反。将基本功能投入使用并不会花费太久。而且一旦你已经完成这部分工作，你就可以随心所欲地去测试最新最好的浏览器技术，脑中的意识是即使它们现在还不能被普遍支持，也没有问题，因为你已经把最可靠的东西投入使用了。
看待Web发展的关键在于意识到不会有最终的接口—可能会有很多只有轻微差别但会依赖于任意时刻任意用户的属性和容量的接口。网站不需要在每一个浏览器中都一模一样。
真正理解了这个就是一个极大地进步。你可以把时间花费在为更多浏览器提供最好体验的同时保证能在任何建立工作的地方实现核心功能，而不是努力使你的网站在差异巨大的浏览器中一模一样。
允许我以一个简单的例子来表述：导航。
第一步：核心功能
假设我们现在有一个关于圣诞节12天欢庆的简单网站，一天一个页面。这个核心功能也相当清晰了：
1、了解其中任意一天。
2、从一天到另一天浏览。
第一个功能可以通过将文本用头条，段落以及所有常用的HTML结构化标签组装起来实现。第二个则通过一系列的超链接实现。
那么现在导航列表最适合放在哪里呢？个人而言，我是一个跳转到页脚导航模式的粉丝。这个模式先放网页内容，其次才是导航。页面顶部有一个带有href属性的连接指向导航的标签。
由于只有超链接，这个模式也只是在网络初兴时期能在每一个浏览器上工作。Web浏览器要做的只是展示超链接（正如名字所示）。
第二步：增强型布局
在小屏幕设备上，比如移动电话，页脚链接模式是一个相当简洁的解决办法。一旦有更多的屏幕空间可使用时，就可以使用CSS将导航重新定位在内容之上。我可以设置position属性为absolute,使用弹性布局盒，或者设置display属性为table。
第三步：增强！
没错。现在我已经可以为所有人提供核心功能了，而且对宽屏也有相当不错的响应风格设计。到这里我可以停下脚步了，但渐进式增强的实际优点却是我还没有做到的。从这儿开始，我可以疯狂地为现代浏览器添加各种奇特的优化效果，而不用担心不能为旧式浏览器提供退路—退路已经准备好了。
实际上我想为小屏幕的设备提供一个漂亮的屏外画布。下面是我的规划：
1、 将导航放置在主内容下面。
2、 监听伪类为.control的链接是否被点击并拦截其反应。
3、 当这些链接被点击后，为主体body切换赋予伪类.active。
4、 如果伪类.active存在，将内容滑出以显示导航。
下面是定位内容和导航的CSS代码：
在我的JavaScript代码中，我将会监听伪类.control链接上的任何点击事件，然后据此为主体body切换赋予伪类.active。
我已经准备就绪了，是吗？哪有那么快！
我假设在我的代码中已经实现addEventListener函数。这并不是一个安全的假设。因为JavaScript不像HTML或CSS那样具有容错性。如果你使用了一个浏览器不能识别的HTML元素或属性，或是使用了一个浏览器不能理解的CSS选择器，属性或是值，那都不是大问题。浏览器会忽略掉它不能识别的东西：既不会抛出错误也不会停止解析文件。
JavaScript就不同了。如果你的JavaScript代码有错误，又或者使用了一个浏览器不能辨识的JavaScript函数或属性，浏览器会抛出错误，而且会停止解析文件。这就是为什么JavaScript中特征在使用之前必须要测试。这也说明将核心功能依赖于JavaScript是非常不安全的。
就我而言，我需要测试addEventListener函数的存在性：
BBC的大牛们称这种特征测试为标准符合测试。如果一个浏览器通过了该测试，它就达到了标准，所以它就获得了增强性能。如果一个浏览器没能达到标准，它就没有增强的性能。这也不算什么坏事，记住，网站不需要在每个浏览器中都表现的一样。
我希望确保我的离线画布样式只能应用于符合标准的浏览器。我会使用JavaScript为文档添加一个伪类.cutsthemustard：
现在我可以使用已存在的类名来调整我的CSS：
查看符合标准的增强型离线画布导航演示。记住，这只适用于小屏幕，所以你可能会需要将浏览器窗口压扁。
这仅仅是一个相对比较简单的例子，但它阐明了渐进式增强背后的思想：只要你已经为所有人提供了核心功能，就可以随意为现代浏览器增加最流行的增强性能。
渐进式增强并不意味着你必须为所有人都提供一模一样的功能—恰恰相反。这也是为什么需要尽早确定你的核心功能是什么，而且确保这个核心功能可以被大多数基本技术提供实现。在这个点的基础上，你可以随意添加更多的不属于关键任务的特征。你可以在能支持更多特征的浏览器上相应的添加更多的属性，比如CSS的动画效果，JavaScript的定位功能以及HTML中新的输入框类型。
正如我所说的，渐进式增强不是一门技术。它是一种思考方式。如果你已经开始使用这种思考方式，你就已经准备好了面对接下来的十年了。
收藏(0)
赞 
粤公网安备44010602001432号