面试题：CSS 中渐进增强与优雅降级的区别

Question

请阐述 CSS 渐进增强与优雅降级这两种设计理念的主要区别，并各举一个简单的应用场景例子。

Answer 1

主要区别

• 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能以达到更好的用户体验。它是向上兼容的，从基础开始逐步提升。
• 优雅降级：一开始就构建完整功能和丰富体验的页面，然后针对低版本浏览器进行适配和修复，保证在低版本浏览器上也能基本可用。它是向下兼容的，从完整到基础。

应用场景例子

• 渐进增强：在开发一个网页时，先保证所有浏览器都能正常显示文本内容和基本链接跳转等核心功能。对于支持 CSS3 的浏览器，再添加一些动画效果，比如给按钮添加 hover 时的渐变动画：

button {
  background-color: blue;
  color: white;
}
@media screen and (min - width: 600px) and (-webkit - min - device - pixel - ratio: 2),
       screen and (min - width: 600px) and (min - resolution: 192dpi) {
  button:hover {
    background - image: linear - gradient(to bottom, blue, purple);
  }
}

• 优雅降级：开发一个使用了 HTML5 Canvas 绘制动画图表的页面，在现代浏览器中能展示精美的动态图表。对于不支持 Canvas 的浏览器，通过检测，给用户显示静态图片形式的图表。比如：

<canvas id="chart" width="400" height="300"></canvas>
<noscript>
  <img src="chart_static.png" alt="Chart">
</noscript>

在 JavaScript 中也可以通过检测 canvas.getContext 是否存在来做更精细的降级处理：

const canvas = document.getElementById('chart');
if (canvas.getContext) {
  const ctx = canvas.getContext('2d');
  // 进行 Canvas 绘图动画操作
} else {
  // 处理不支持 Canvas 的情况，如显示替代内容
}