10.01测试驱动之于网页设计开发
这是一篇译文，其中涉及了不少比较专业的概念，我将用一系列文章来介绍这些概念，这些文章对于网页设计进行了更加深入的探讨，也许在我们看来有些学究气了，但是通过这种探讨，我们从中应该看到一些好的方法论和更多的用户体验关怀。
Progressive Enhancement（逐步增强）开发模式正逐步成为基于标准设计的最佳实践。从简洁，语义化的HTML标记开始，通过Javascript和CSS层层渐进式增强，我们试图为任何受众创建可用的体验，对于那些功能不那么强大的设备和浏览器能获得一个相对简单但是功能完整的用户体验，而其他那些功能齐备的则将获得剩下的附加特性和体验。
这是就是PE（Progressive Enhancement 以下缩写为PE）的基本理论。但是在实践过程中，这些增强仍然被推送给了绝大多数设备，其中包括大量不支持这些特性的对象，比如较低版本的浏览器或者是功能受限的移动客户端。这些设备一开始的确获得简单但功能完整的页面，但随后被“增强”到了乱糟糟的页面。这显然是和PE理论背道而驰的。
那我们应该怎么做增强以确保所有的设备和浏览器获得正确的效果呢？测试，这时候我们需要的是通过逐级测试来确保这点。
兼容性测试
不久之前，我们发现可以使用很简单的Javascript代码来测试目标设备对于CSS的支持情况。让我们从一个很简单的盒模型测试开始，我们插入一个对象到当前Document中，然后设置一些样式属性，然后通过Javascript来校验是否被正确支持了。
function boxmodel(){
var newDiv = document.createElement(’div’);
document.body.appendChild(newDiv);
newDiv.style.width = ‘20px’;
newDiv.style.padding = ‘10px’;
var divWidth = newDiv.offsetWidth;
document.body.removeChild(newDiv);
return divWidth == 40;
}
通过上面的TestCase，我们能很快的检查目标设备是否正确支持盒模型，然后我们也能采取对应的增强方式。
有了上面的这个主意，我们能类似的写出如下测试用例：
float
clear
position
overflow
line-height
当然仅通过CSS测试并不能覆盖到所有情况，幸运的是，我们还能通过Javascript测试来做其他兼容性测试。（译注，这可能是大家比较熟悉的浏览器检测了）。
document.createElement()
document.getElementById()
xmlHttpRequest()
window.onresize()
window.print()
通过上述测试，我们可以知道是否可以正确显示客户的应用。
我和我在Filament Group的同事开发了testUserDevice.js，来完整上述所有的测试。
利用这些测试结果
整合testUserDevice.js到一个页面上是相当简单的，讲JS文件包含进来，然后调用testUserDevice.init()方法就可以了。
为了更好的阐述这些概念，我们来看一个具体的例子，这是一个有一定复杂度的表单页面，让我们从最基本的HTML开始。
DEMO1
=== CSS增强
当目标设备通过了我们的测试代码，会对页面进行一系列的增强，默认情况下，会进行下列DOM更新：
样式Class enhanced 被加到[BODY]元素上。
(title=”enhanced”) 可选的样式表文件被启用。
(title=”not_enhanced”) 与之相反的，所有这些非增强样式表文件被禁用。
这样的变化给你提供好几个契机去做层进式的增强，比如BODY标记上的样式增强。来看下例子：
body div.example {
margin: 1em 0;
}
如果用户的浏览器通过了测试，我们可以使用float布局来实现水平排列。
body.enhanced div.example {
float: left;
[…]