优雅降级和渐进增强

优雅降级和渐进增强

1.什么是渐进增强

在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。

渐进增强写法：

 <div class="not-a-square"></div>

  
        .not-a-square {
            width: 200px;
            height: 50px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 10px;
            background-color: #fff;
        }

效果图：

2.优雅降级

在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。

优雅降级写法：

.not-a-square {
            width: 200px;  
            height: 50px;
            border-radius: 10px;
            -moz-border-radius: 20px;
            -webkit-broder-radius: 20px;
            background-color: #8898;

效果图：