【css】渐进增强和优雅降级

先声明两个词语：

Progressive Enhancement：渐进增强

Graceful Degradation：优雅降级

再举个栗子：

<pre name="code" class="css"><span style="font-family:Microsoft YaHei;">div
{
    transition: width 2s;
    -o-transition: width 2s; /* Opera */
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari 和 Chrome */
}</span>

    假如你要做一个变换的动画，由于jquery.animate做动画渲染效率低下，时不时有重绘bug，你决定用css3的transition属性，但对于则IE6~9是这个效果是瞬间变化的，因此如果是优雅降级你还要写一段js来表达这种效果。这是渐进增强。

<form>
    <input type="text" />
    <input type="submit" />
</form>

    再假如你写了一个表单，没有用到<input type="submit" />表单元素，而是用了一个<a>标签的click事件做提交，但如果Javascript被禁用了怎么办？于是你要使用以上的结构，这就是优雅降级。让你的网页在各种情况—下——包括降级（javascript被禁用，css传输失败等等）的情形都可以运作良好。

渐进增强

    有一类浏览器叫做"A级浏览器"，这这些可能是大多访问你网站的典型观众，你会从满足这些用户的基本需求开始。之后你可以针对不同的浏览器加一些圆角，阴影，动画，不断的扩充，使您的网站变得更好看(基础功能依然存在)，从而提高用户体验。渐进增强在一个广泛的最小的用户体验开始，根据用户代理功能增加了一个更有能力水平，为支持更高级的功能比基线的代理。

优雅降级

    开始在一个理想的用户体验水平，并根据用户代理功能降低到最低水平，照顾不支持某些功能的代理所使用的基准。对那些被认为“过时”或有功能缺失的浏览器，使用“简陋确无妨 ”的浏览体验，针对特定浏览器做一些小改动，并将测试工作安排在开发周期的最后阶段。由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

    一般来说，渐进增强主要用于CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。

总之，渐进增强是向上兼容，优雅降级是向下兼容，如果你有时间，渐进增强是相当不错，否则优雅降级是首选。

有一类浏览器叫做"A级浏览器"，这这些可能是大多访问你网站的典型观众，你会从满足这些用户的基本需求开始。 之后你可以针对不同的浏览器加一些圆角，阴影，动画， 不断的扩充 ，使您的网站变得更好看(基础功能依然存在)，从而提高用户体验。 渐进增强在一个广泛的最小的用户体验开始，根据用户代理功能增加了一个更有能力水平，为支持更高级的功能比基线的代理。