渐进增强和优雅降级

前言

我们在写css的时候经常有加一些前缀,如-webkit-、-moz-、-ms-，这些前缀主要都是针对css3的。在css3标准还没发布的时候,为了能使前端开发者更早的使用一些新特性,浏览器厂商根据css3拟定的草案提前支持了这些属性,使用前缀与标准的css3属性进行区分。下面是不同的浏览器对应的前缀:

-ms-
-ms-box-sadow
//IE浏览器专属的css
-webkit-
-webkit-box-shadow
//所有基于Webkit引擎的浏览器的专属css,如Chore和Safari
-o-
-o-box-shadow
Opera浏览器专属css属性
-moz-
-moz-box-shadow //基于Gecko引擎的浏览器的专属css

我们知晓了浏览器提前实现了css3的一些属性,使用添加前缀的方式与标准进行区分,当标准确定的时候浏览器又支持了不带前缀的标准属性,带前缀的属性和不带前缀的属性在使用时候的书写顺序不同效果也不同，这就产生了渐进增强和优雅降级的概念。

渐进增强

.wrap{
-moz-box-shadow: 1px 1px teal;
-webkit-box-shadow: 1px 1px teal;
-o-box-shadow: 1px 1px teal;
-ms-box-shadow: 1px 1px teal;
box-shadow: 1px 1px teal;
}

优雅降级

.wrap{
box-shadow: 1px 1px teal;
-moz-box-shadow: 1px 1px teal;
-webkit-box-shadow: 1px 1px teal;
-o-box-shadow: 1px 1px teal;
-ms-box-shadow: 1px 1px teal;
}

• 渐进增强是针对低版本浏览器进行基础功能的开发,再对高版本的浏览器进行交互上的优化,优雅降级是使用比较新的特性针对高版本的浏览器进行开发,再去兼容低版本浏览器的基础功能。
• 渐进增强和优雅降级是解决高级和低级浏览器之间基础功能和前沿特性兼容问题的不同方案。
• 优雅降级和渐进增强可以延伸为一种思想，是兼容高低版本问题的不同方案,渐进渐进增强是比较保守的,先保证基础功能的正常使用,在此基础上进行再使用一些新的特性对页面的交互进行优化;优雅降级比较注重用户的交互体验,后续过程中通过反复的测试去支持低版浏览器的基础功能。

最后

以上就是活力蜜蜂为你收集整理的渐进增强和优雅降级的全部内容，希望文章能够帮你解决渐进增强和优雅降级所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。