前端Wiki/CSS3/基础/初识 CSS3

兼容性处理

CSS3 特性在不同浏览器里的支持程度不同，动手前先学会查与防。

查：写不常见的属性前，上 Can I Use（caniuse.com）查支持率，一眼看到各浏览器版本的支持情况，决定能不能放心用。

防：核心思路是「渐进增强 + 优雅降级」——

渐进增强：先保证基础功能在所有浏览器可用，再为现代浏览器叠加增强效果。老浏览器看不到圆角阴影，但内容照常可读。
特性查询：用 @supports (属性: 值) 检测浏览器是否支持某特性，支持才应用对应样式。
回退值：CSS 里同一属性写两遍，先写老值再写新值，不认识新值的浏览器会保留老值，认识则覆盖。

原则很简单：增强效果失效不能破坏内容和功能。文字始终可读、按钮始终可点，圆角和阴影只是锦上添花。

本节要点用 Can I Use 查支持度；同属性写回退值（老值在前、新值在后）；@supports 按支持与否分包样式；增强失效不伤害内容。

CSS

<style>
  /* 回退值写法：不认识 rgba 的浏览器用 #999 */
  .box {
    background: #999;
    background: rgba(0, 0, 0, .4);
  }
  /* 特性查询：支持 grid 才应用网格布局 */
  @supports (display: grid) {
    .layout {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 10px;
    }
  }
  .layout div {
    background: #b2ebf2; padding: 12px;
  }
</style>
<div class="box">半透明背景，老浏览器退化为纯灰</div>
<div class="layout">
  <div>左栏</div><div>右栏</div>
</div>

🔗 相关词条CSS3 渐进增强 CSS 浏览器圆角阴影

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读