渐进增强和优雅降级

原创已于 2022-09-15 14:16:03 修改 · 325 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

于 2022-09-11 17:15:02 首次发布

前端同时被 2 个专栏收录

57 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

本文介绍了CSS3中浏览器特定前缀的用途，以及如何使用它们实现渐进增强和优雅降级。渐进增强是先确保低版本浏览器的基本功能，然后为高版本浏览器添加增强效果；而优雅降级则是优先考虑高版本浏览器的体验，再回溯兼容低版本。这两种策略是处理浏览器兼容性问题的重要方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

我们在写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;
    }

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