📚 课程目录第4章 CSS兼容性（下）

CSS3特性的降级方案与Polyfill

CSS3 带来的圆角、阴影、渐变、动画，说实话让前端界面好看了不少。但一碰到老旧浏览器，这些特性就可能直接“躺平”。我记得刚入行那会儿，一个圆角背景在 IE8 上直接变成方方正正的方块，领导盯着屏幕看了三秒，问我：“这设计稿是不是没给全？” 从那以后，我就养成了给每个 CSS3 特性配降级方案的习惯。

降级不是妥协，而是保证“能用”的前提下“好看”。说白了，用户用 IE8 打开你的页面，圆角没了、阴影没了，但内容能读、按钮能点，这就算及格。如果再能加点视觉效果上的替代，那就很体面了。

圆角（border-radius）的降级方案

border-radius 在 IE8 及以下完全不支持。不过说实话，现在还在用 IE8 的用户极少，但企业内网、政务系统里偶尔还会碰到。我个人习惯的做法是：

背景图模拟：用四个角的小图片拼接出圆角效果。虽然麻烦，但兼容性最好。
条件注释 + 额外样式：给 IE8 及以下单独写一套直角样式，加上放大内边距，让视觉上不那么突兀。
使用 PIE.htc：这是一个针对 IE 的 Polyfill，通过 behavior 属性让 IE 支持 border-radius、box-shadow 等。不过它有点重，且需要服务器配置 .htc 的 MIME 类型。

实战经验：我曾在某政府项目中用过 PIE.htc，结果因为 IE 的安全设置，.htc 文件没加载成功。后来果断切回背景图方案。建议上线前一定在目标浏览器里实际测试。

/* 基础样式 —— 所有浏览器都能看到圆角 */
.box {
  border-radius: 8px;
  background: #f0f0f0;
  padding: 20px;
}

/* 针对 IE6-8 的半透明滤镜降级写法 */
.box {
  background: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff0f0f0, endColorstr=#fff0f0f0);
  /* 再用背景图模拟圆角 */
  background-image: url('corner-tl.png'), url('corner-tr.png'), url('corner-bl.png'), url('corner-br.png');
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
}

阴影（box-shadow / text-shadow）的降级方案

box-shadow 在 IE9 才开始支持，IE8 及以下完全看不见。text-shadow 更惨，IE10 才支持。那怎么办？

纯色边界替代：给元素加 border 模拟阴影的视觉层次。虽然不像阴影那么柔和，但至少能区分层级。
IE 滤镜：使用 progid:DXImageTransform.Microsoft.Shadow 可以为元素添加阴影，不过效果比较生硬，而且只能用于块级元素。
背景图法：把阴影做成透明背景图，放在元素下面。这个办法最稳，但维护成本高。

注意：IE 滤镜的 Shadow 和 DropShadow 容易导致页面卡顿，而且不能控制模糊半径。在动画中使用时更要小心。我曾经在一个轮播图上用了滤镜阴影，结果 IE 下切换图片时闪白屏，最后老老实实换成背景图。

/* 标准阴影 */
.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* IE 滤镜降级 */
.card {
  /* 只在 IE8 及以下生效 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=135);
}

/* 另一种写法：渐变滤镜配合边缘 */
.card {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff, endColorstr=#20ffffff, GradientType=0);
}

渐变（linear-gradient / radial-gradient）的降级方案

渐变的兼容性问题主要体现在 IE9 及以下。IE10 开始才支持标准 linear-gradient()。不过 IE 也有自己的渐变方案：滤镜。

纯色兜底：这是最基本也最重要的策略。先声明一个背景色，再写渐变。老浏览器会显示纯色，不影响信息传递。
IE 滤镜渐变：filter: progid:DXImageTransform.Microsoft.gradient() 可以生成水平或垂直方向的渐变。不支持角度和径向渐变。
背景图片兜底：对于复杂的渐变，直接用切好的图片最省心。

我建议：把纯色放在第一行，标准渐变放在第二行。这样所有浏览器都能正确解析：不支持的会用纯色，支持的会覆盖纯色。不用写重复的 @media hack。

/* 标准写法 + 降级 */
.button {
  background-color: #3498db;           /* 降级纯色 */
  background-image: linear-gradient(to bottom, #3498db, #2980b9);  /* 标准渐变 */

  /* IE 滤镜（仅 IE6-9） */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff3498db, endColorstr=#ff2980b9);
}

/* 现代浏览器会自动忽略滤镜，而 IE 会忽略标准渐变 */

动画与过渡（animation / transition）的降级方案

CSS 动画在 IE10 才完整支持，过渡（transition）在 IE10 也才支持。那么 IE9 及以下怎么办？

jQuery 动画回退：用 .animate() 替代 CSS 过渡。虽然性能不如硬件加速，但对老浏览器够用了。
直接跳转：对于简单的状态切换（比如 hover 改变颜色），让不支持过渡的浏览器直接跳到最终状态，用户其实感知不到“没动画”。
检测特性 + 条件加载：用 Modernizr 检测浏览器是否支持 CSS 动画，不支持时加载 polyfill 脚本。

我曾经维护过一个 H5 营销页面，大量使用了 CSS 关键帧动画。结果 IE9 上动画完全不跑，页面上的元素静止在那里。后来我加了个简单的 jQuery.fadeIn() 做回退，虽然没那么炫酷，但至少让元素能正常出现。

/* CSS 过渡降级 —— 先写最终状态 */
.card:hover {
  background: #e74c3c;
}

/* 再写过渡，不支持的浏览器直接跳转 */
.card {
  transition: background 0.3s;
}

/* JavaScript 检测回退（需要 Modernizr） */
if (!Modernizr.csstransitions) {
  $('.card').hover(function() {
    $(this).animate({ backgroundColor: '#e74c3c' }, 300);
  }, function() {
    $(this).animate({ backgroundColor: '#fff' }, 300);
  });
}

Polyfill 的使用与选择

说到降级，就离不开 Polyfill。它们能让老浏览器“假装”支持新特性。但选择时一定要谨慎。

Polyfill 名称	支持特性	适用浏览器	缺点
PIE.htc	border-radius, box-shadow, linear-gradient	IE6-9	依赖 .htc 文件，IE 安全设置可能阻止；渲染性能差
CSS3Pie	border-radius, box-shadow, gradient, border-image	IE6-9	同上，已多年不更新
Modernizr + html5shiv	特性检测 + 语义标签支持	所有旧 IE	不是直接渲染 polyfill，需要配合其他库
jQuery	动画、DOM 操作	IE6+	体积大，不如原生 CSS 动画流畅

我的避坑指南：千万不要一股脑把所有 polyfill 都引进来。我曾经见过一个项目，为了兼容 IE8，引了 PIE、html5shiv、respond.js、selectivizr 四个 polyfill，结果页面加载慢得像蜗牛。后来我做了个检测，发现大部分用户已经不用 IE8 了，干脆移除了所有 polyfill，只保留纯色降级。用户反馈反而更好了。

总结关键实践

讲了这么多，其实核心就几条：

先写降级，再写增强。背景色放在渐变前面，最终状态放在过渡前面。
能不使用 Polyfill 就不用。能用背景图、纯色、条件注释解决的优先考虑。
特性检测优于浏览器检测。用 Modernizr 判断特性，不要写死 UA。
一定要在目标浏览器里实测。我用过很多次“理论上兼容”的方案，实际测试全部翻车。

CSS3 特性降级不是技术难题，而是工程决策。权衡用户占比、开发成本、维护负担，找到最适合你项目的方案。别为了 1% 的用户让 99% 的用户体验下降，也别直接放弃那 1% 导致业务流失。嗯，这就是我想跟你分享的。