面试题：CSS特性检测与渐进增强、优雅降级的结合

Question

在开发一个支持多种浏览器的前端项目时，如何通过CSS特性检测来更好地实现渐进增强和优雅降级？请阐述实现思路，并结合@supports规则和一些现代CSS特性（如CSS Grid）给出具体的代码示例。

Answer 1

实现思路

1. 渐进增强：先构建一个基本的、所有浏览器都能理解和渲染的版本。然后，利用CSS特性检测，针对支持特定现代特性的浏览器，添加额外的样式和功能，从而提升用户体验。
2. 优雅降级：从支持最新和最好特性的版本开始构建，然后通过特性检测，为不支持这些特性的浏览器提供替代方案，确保页面仍然可用。

使用 @supports 规则

@supports 规则用于检测浏览器是否支持某个CSS属性或属性值。语法为 @supports (property: value) { /* 样式 */ }。

结合 CSS Grid 的代码示例

假设我们要创建一个简单的三列布局：

/* 基础样式，适用于所有浏览器 */
.container {
  display: block;
  width: 100%;
}
.column {
  width: 100%;
  margin-bottom: 10px;
}

/* 利用 @supports 进行渐进增强 */
@supports (display: grid) {
 .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
 .column {
    margin-bottom: 0;
  }
}

在上述代码中：

• 一开始提供了 display: block 的基础布局，这在所有浏览器都能正常工作。
• 然后使用 @supports (display: grid) 检测浏览器是否支持CSS Grid。如果支持，则应用更现代的网格布局样式，实现了渐进增强。

优雅降级示例（与上述类似思路反向应用）

/* 先使用 CSS Grid 布局 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.column {
  margin-bottom: 0;
}

/* 不支持 CSS Grid 时的替代方案 */
@supports not (display: grid) {
 .container {
    display: block;
    width: 100%;
  }
 .column {
    width: 100%;
    margin-bottom: 10px;
  }
}

这里先以CSS Grid构建布局，然后使用 @supports not 检测不支持CSS Grid的浏览器，提供一个基于 display: block 的替代布局，实现优雅降级。