渐进增强与优雅降级

渐进增强的层级模型
┌─────────────────────────────────────────────────────┐
│                    高级功能                          │
│  ┌───────────────────────────────────────────────┐  │
│  │                  增强功能                      │  │
│  │  ┌─────────────────────────────────────────┐  │  │
│  │  │              基础功能                    │  │  │
│  │  │  ┌───────────────────────────────────┐  │  │  │
│  │  │  │          核心内容                  │  │  │  │
│  │  │  └───────────────────────────────────┘  │  │  │
│  │  └─────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────┘
方向：从内到外，逐步增强

优雅降级的层级模型
┌─────────────────────────────────────────────────────┐
│  ┌───────────────────────────────────────────────┐  │
│  │              完整功能                          │  │
│  │  ┌─────────────────────────────────────────┐  │  │
│  │  │            降级功能                      │  │  │
│  │  │  ┌───────────────────────────────────┐  │  │  │
│  │  │  │          基本可用                  │  │  │  │
│  │  │  └───────────────────────────────────┘  │  │  │
│  │  └─────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────┘
方向：从外到内，层层降级

// 浏览器检测示例
const userAgent = navigator.userAgent;
const isChrome = userAgent.includes('Chrome');
const isFirefox = userAgent.includes('Firefox');
const isSafari = userAgent.includes('Safari') && !userAgent.includes('Chrome');
const isIE = userAgent.includes('MSIE') || userAgent.includes('Trident');
 
// 基于版本号判断
const chromeVersion = parseInt(userAgent.match(/Chrome\/(\d+)/)[1]);
if (chromeVersion >= 90) {
  // 假设 Chrome 90+ 支持某特性
}

// CSS 特性检测
if (CSS.supports('display', 'grid')) {
  // 浏览器支持 Grid
}
 
// JavaScript API 检测
if ('fetch' in window) {
  // 浏览器支持 Fetch API
}
 
// DOM API 检测
if ('IntersectionObserver' in window) {
  // 浏览器支持 Intersection Observer
}

// ❌ 浏览器检测：不可靠
if (navigator.userAgent.includes('Chrome/90')) {
  // 假设 Chrome 90 支持 Grid
  // 问题：某些 Chrome 90 构建可能不支持
  // 问题：Chrome 91 发布后需要更新代码
}
 
// ✅ 特性检测：可靠
if (CSS.supports('display', 'grid')) {
  // 无论什么浏览器，只要支持 Grid 就执行
  // 无需关心版本号
  // 新浏览器自动支持
}

// 1. 首先进行特性检测
if (CSS.supports('display', 'grid')) {
  // 使用 Grid
} else {
  // 降级方案
}
 
// 2. 必要时结合浏览器检测（仅用于特殊场景）
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
if (isIOS && !CSS.supports('backdrop-filter', 'blur(10px)')) {
  // iOS 特有的降级处理
}

/* 基本语法 */
@supports (property: value) {
  /* 支持时的样式 */
}
 
/* 否定检测 */
@supports not (property: value) {
  /* 不支持时的样式 */
}
 
/* 组合检测：同时支持 */
@supports (property1: value1) and (property2: value2) {
  /* 同时支持两个特性 */
}
 
/* 组合检测：任一支持 */
@supports (property1: value1) or (property2: value2) {
  /* 支持任一特性即可 */
}

/* 检测 CSS 变量 */
@supports (--css: variables) {
  :root {
    --primary: #007bff;
  }
}
 
/* 检测 Flexbox */
@supports (display: flex) {
  .container {
    display: flex;
  }
}
 
/* 检测 Grid Gap */
@supports (gap: 10px) {
  .grid {
    display: grid;
    gap: 10px;
  }
}
 
/* 检测 aspect-ratio */
@supports (aspect-ratio: 16/9) {
  .video-container {
    aspect-ratio: 16/9;
  }
}
 
/* 检测 :has() 选择器 */
@supports selector(:has(*)) {
  .card:has(.badge) {
    border: 2px solid gold;
  }
}
 
/* 检测容器查询 */
@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
  }
}

// 基本用法
if (CSS.supports('display', 'grid')) {
  console.log('支持 Grid');
}
 
// 完整声明语法
if (CSS.supports('display: grid')) {
  console.log('支持 Grid');
}
 
// 组合条件
if (CSS.supports('display: grid') && CSS.supports('gap: 10px')) {
  console.log('支持 Grid Gap');
}

const featureDetection = {
  // 检测 CSS 属性
  cssProperty(prop, value) {
    if (CSS.supports) {
      return CSS.supports(prop, value);
    }
    return false;
  },
  
  // 检测 JavaScript API
  jsAPI(api) {
    return api in window;
  },
  
  // 检测触摸支持
  touch() {
    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
  },
  
  // 检测本地存储
  localStorage() {
    try {
      return 'localStorage' in window && window.localStorage !== null;
    } catch (e) {
      return false;
    }
  },
  
  // 批量检测并添加 CSS 类
  applyClasses() {
    const features = {
      flexbox: this.cssProperty('display', 'flex'),
      grid: this.cssProperty('display', 'grid'),
      gap: this.cssProperty('gap', '10px'),
      variables: this.cssProperty('--test', '0'),
      aspectRatio: this.cssProperty('aspect-ratio', '1'),
      container: this.cssProperty('container-type', 'inline-size'),
      touch: this.touch()
    };
    
    Object.entries(features).forEach(([feature, supported]) => {
      document.documentElement.classList.toggle(feature, supported);
      document.documentElement.classList.toggle(`no-${feature}`, !supported);
    });
    
    return features;
  }
};
 
// 使用
const features = featureDetection.applyClasses();
// html 元素会添加类名：grid no-gap variables touch ...

<!-- 引入 Modernizr（建议自定义构建，只包含需要的检测） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/3.12.0/modernizr.min.js"></script>

// Modernizr 提供的检测
if (Modernizr.flexbox) {
  // 支持 Flexbox
}
 
if (Modernizr.cssgrid) {
  // 支持 Grid
}
 
if (Modernizr.webp) {
  // 支持 WebP 图片格式
}
 
if (Modernizr.serviceworker) {
  // 支持 Service Worker
}

/* Modernizr 自动在 html 元素上添加 CSS 类 */
.cssgrid .container {
  display: grid;
}
 
.no-cssgrid .container {
  display: flex;
}
 
.webp .hero {
  background-image: url('hero.webp');
}
 
.no-webp .hero {
  background-image: url('hero.jpg');
}

// 检测常用特性
feature.js.cssGrid();        // CSS Grid
feature.js.flexbox();        // Flexbox
feature.js.webp();           // WebP
feature.js.fetch();          // Fetch API
feature.js.serviceWorker();  // Service Worker

1. 解析阶段（Parsing Phase）
   ↓
   a. 解析 @supports 后的条件表达式
   b. 验证语法正确性
   c. 构建条件表达式树
   
2. 求值阶段（Evaluation Phase）
   ↓
   a. 对每个 (property: value) 声明：
      i.   创建临时 CSS 声明对象
      ii.  将声明应用到文档中的临时元素
      iii. 检查浏览器是否接受该声明
      iv.  返回布尔值（true/false）
      
   b. 对 selector() 函数：
      i.   解析选择器语法
      ii.  验证选择器是否被浏览器支持
      iii. 返回布尔值
      
   c. 应用逻辑运算符：
      - NOT: 对操作数取反
      - AND: 所有操作数为 true 时返回 true
      - OR:  任一操作数为 true 时返回 true
      
3. 应用阶段（Application Phase）
   ↓
   根据最终布尔值决定是否应用规则块内的样式

/* 规范定义的检测过程 */
@supports (display: grid) {
  /* 
    浏览器内部执行：
    1. 创建临时元素
    2. 尝试应用 display: grid
    3. 检查计算样式是否包含 display: grid
    4. 如果成功，应用此块内的样式
  */
}

/* 检测 :has() 选择器 */
@supports selector(:has(*)) {
  .parent:has(.child) {
    background: blue;
  }
}
 
/* 检测 :is() 选择器 */
@supports selector(:is(.a, .b)) {
  :is(.a, .b) {
    color: red;
  }
}

/* 运算符优先级：NOT > AND > OR */
/* 可以使用括号改变优先级 */
 
@supports (display: grid) and (gap: 10px) {
  /* AND: 两个特性都支持 */
}
 
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  /* OR: 支持任一即可 */
}
 
@supports not (display: grid) {
  /* NOT: 不支持 Grid */
}
 
@supports ((display: grid) and (gap: 10px)) or (display: flex) {
  /* 括号改变优先级 */
}

/* ✅ 推荐：简单的条件检测 */
@supports (display: grid) {
  .container { display: grid; }
}
 
/* ⚠️ 避免：过于复杂的嵌套条件 */
@supports ((display: grid) and (gap: 10px)) or 
           ((display: flex) and (flex-wrap: wrap) and (align-items: center)) {
  /* 复杂条件会增加解析时间 */
}

┌─────────────────────────────────────────┐
│         行为层 (JavaScript)             │  ← 可选增强
├─────────────────────────────────────────┤
│         表现层 (CSS)                    │  ← 可选增强
├─────────────────────────────────────────┤
│         结构层 (HTML)                   │  ← 核心基础
└─────────────────────────────────────────┘

<!-- ✅ 渐进增强：爬虫可以看到完整内容 -->
<article>
  <h1>文章标题</h1>
  <p>文章内容...</p>
  <img src="image.jpg" alt="描述">
</article>
 
<!-- ❌ 优雅降级：爬虫可能看不到内容 -->
<div id="content"></div>
<script>
  document.getElementById('content').innerHTML = `
    <article>
      <h1>文章标题</h1>
      <p>文章内容...</p>
    </article>
  `;
</script>

<!-- ✅ 渐进增强：屏幕阅读器可以正确解读 -->
<nav aria-label="主导航">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>
 
<!-- ❌ 优雅降级：依赖 JavaScript 的导航可能无法被识别 -->
<div class="nav" id="navigation"></div>
<script>
  // 动态生成的导航可能无法被辅助技术正确识别
</script>

// ✅ 渐进增强：清晰的层次结构
function initApp() {
  // 基础功能：无需 JavaScript 也能工作
  // HTML 表单提供基本的提交功能
  
  // 增强 1：客户端验证
  if ('checkValidity' in form) {
    addClientValidation();
  }
  
  // 增强 2：AJAX 提交
  if ('fetch' in window) {
    addAjaxSubmission();
  }
  
  // 增强 3：实时保存
  if ('localStorage' in window) {
    addAutoSave();
  }
}
 
// ❌ 优雅降级：复杂的条件分支
function initApp() {
  if (isModernBrowser) {
    // 完整功能
  } else if (isOldBrowser) {
    // 降级功能
  } else {
    // 基础功能
  }
}

/* 基础：所有浏览器 */
.section {
  margin-bottom: 20px;
  padding: 20px;
}
 
/* 增强：支持 content-visibility 的浏览器 */
@supports (content-visibility: auto) {
  .section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px; /* 预估内容高度 */
  }
}
 
/* 高级：结合 contain 属性 */
@supports (content-visibility: auto) and (contain: layout style) {
  .section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
    contain: layout style paint; /* 额外的性能优化 */
  }
}

// 检测 content-visibility 支持
if (CSS.supports('content-visibility', 'auto')) {
  document.querySelectorAll('.section').forEach(section => {
    section.style.contentVisibility = 'auto';
    section.style.containIntrinsicSize = '0 500px';
  });
}

/* 基础：使用媒体查询 */
.card {
  display: block;
  padding: 10px;
}
 
@media (min-width: 400px) {
  .card {
    display: flex;
    gap: 20px;
  }
}
 
/* 增强：使用容器查询 */
@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
    container-name: card;
  }
  
  @container card (min-width: 400px) {
    .card {
      display: flex;
      gap: 20px;
    }
  }
  
  @container card (min-width: 600px) {
    .card {
      flex-direction: column;
    }
  }
}

/* 不支持容器查询时的降级 */
@supports not (container-type: inline-size) {
  /* 使用媒体查询作为后备 */
  @media (min-width: 400px) {
    .card {
      display: flex;
      gap: 20px;
    }
  }
  
  /* 添加提示注释 */
  .card-container::before {
    content: '容器查询不支持，使用媒体查询降级';
    display: none; /* 仅用于开发调试 */
  }
}

/* 基础：使用 JavaScript 添加类名 */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
}
 
.card.has-image {
  border-color: #007bff;
}
 
/* 增强：使用 :has() 选择器 */
@supports selector(:has(*)) {
  .card:has(img) {
    border-color: #007bff;
  }
  
  .card:has(.badge) {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .form-group:has(:invalid) {
    border-color: red;
  }
}

// 不支持 :has() 时的 JavaScript 后备
if (!CSS.supports('selector(:has(*))')) {
  // 检测包含图片的卡片
  document.querySelectorAll('.card').forEach(card => {
    if (card.querySelector('img')) {
      card.classList.add('has-image');
    }
    if (card.querySelector('.badge')) {
      card.classList.add('has-badge');
    }
  });
  
  // 检测包含无效输入的表单组
  document.querySelectorAll('.form-group').forEach(group => {
    if (group.querySelector(':invalid')) {
      group.classList.add('has-invalid');
    }
  });
}

/* 基础：传统写法（所有浏览器） */
.card {
  background: white;
  border-radius: 8px;
}
 
.card .title {
  font-size: 20px;
  font-weight: bold;
}
 
.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
 
/* 增强：CSS 嵌套（现代浏览器） */
@supports (selector(&)) {
  .card {
    background: white;
    border-radius: 8px;
    
    & .title {
      font-size: 20px;
      font-weight: bold;
    }
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
}

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-nesting')({
      // 自动将嵌套语法转换为传统语法
    })
  ]
};

/* 基础：依赖源顺序（所有浏览器） */
/* 低优先级样式 */
button {
  background: blue;
  color: white;
}
 
/* 高优先级样式 */
.btn-primary {
  background: green;
}
 
/* 增强：使用 @layer（现代浏览器） */
@supports (at-rule(@layer)) {
  @layer base, components, utilities;
  
  @layer base {
    button {
      background: blue;
      color: white;
    }
  }
  
  @layer components {
    .btn-primary {
      background: green;
    }
  }
  
  @layer utilities {
    .btn-large {
      padding: 20px 40px;
    }
  }
}

渐进增强开发流程：
 
1. 核心内容层 (HTML)
   ↓ 确保结构化、语义化
2. 表现层 (CSS)
   ↓ 基础样式 → 增强样式
3. 行为层 (JavaScript)
   ↓ 基本交互 → 高级交互

/* 步骤 1：基础样式（所有浏览器） */
.button {
  /* 核心功能：可点击的按钮 */
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.5;
}
 
/* 步骤 2：增强样式（现代浏览器） */
@supports (backdrop-filter: blur(10px)) {
  .button {
    backdrop-filter: blur(10px);
    background-color: rgba(0, 123, 255, 0.8);
  }
}
 
/* 步骤 3：高级效果（最新浏览器） */
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
  .button--special {
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  }
}

/* 基础：块级布局（所有浏览器） */
.container {
  overflow: hidden; /* 清除浮动 */
}
 
.item {
  float: left;
  width: 33.333%;
  margin-bottom: 20px;
  padding: 0 10px;
}
 
/* 增强：Flexbox（支持 Flexbox 的浏览器） */
@supports (display: flex) {
  .container {
    display: flex;
    flex-wrap: wrap;
    overflow: visible; /* 重置 */
  }
  
  .item {
    float: none; /* 重置 */
    flex: 0 0 33.333%;
    margin-bottom: 20px;
  }
}
 
/* 最高级：Grid（支持 Grid 的浏览器） */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .item {
    flex: none; /* 重置 */
    width: auto;
    margin-bottom: 0;
    padding: 0;
  }
}

/* 基础：无动画，直接显示（所有浏览器） */
.element {
  opacity: 1;
  visibility: visible;
}
 
/* 增强：过渡动画 */
@supports (transition: opacity 0.3s) {
  .element {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .element.visible {
    opacity: 1;
  }
}
 
/* 最高级：关键帧动画 + transform */
@supports (animation: fadeIn 0.5s) {
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .element {
    animation: fadeIn 0.5s ease forwards;
  }
}
 
/* 尊重用户偏好：减少动画 */
@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}

// 渐进增强的表单处理
function initForm() {
  const form = document.querySelector('form');
  if (!form) return;
  
  // 基础：表单默认提交（无需额外代码，浏览器原生支持）
  
  // 增强：客户端验证
  if ('checkValidity' in form) {
    form.addEventListener('submit', (e) => {
      if (!form.checkValidity()) {
        e.preventDefault();
        showValidationErrors(form);
      }
    });
  }
  
  // 更高级：AJAX 提交
  if (window.fetch && window.FormData) {
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      
      const formData = new FormData(form);
      try {
        const response = await fetch(form.action, {
          method: 'POST',
          body: formData
        });
        
        if (response.ok) {
          showSuccessMessage();
        } else {
          // 降级到默认提交
          form.submit();
        }
      } catch (error) {
        // 网络错误，降级到默认提交
        form.submit();
      }
    });
  }
}

优雅降级开发流程：
 
1. 设计完整功能
   ↓ 使用最新特性
2. 识别兼容性问题
   ↓ 分析不支持场景
3. 提供后备方案
   ↓ 确保基本可用
4. 测试降级效果
   ↓ 验证各环境表现

/* 完整功能：复杂渐变 */
.hero {
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.8) 0%,
    rgba(118, 75, 162, 0.8) 100%
  );
  background-size: cover;
}
 
/* 后备方案：纯色（不支持渐变的浏览器） */
@supports not (background: linear-gradient(white, black)) {
  .hero {
    background: #667eea;
  }
}

/* 完整功能：毛玻璃效果 */
.modal {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
 
/* 后备方案：半透明背景（不支持 backdrop-filter） */
@supports not (backdrop-filter: blur(10px)) {
  .modal {
    background: rgba(255, 255, 255, 0.95);
    /* 增加不透明度以补偿模糊效果的缺失 */
  }
}

/* 完整功能：CSS Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
 
/* 后备：Flexbox（不支持 Grid） */
@supports not (display: grid) {
  .grid {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
  }
  
  .grid-item {
    flex: 0 0 calc(33.333% - 20px);
    margin: 10px;
  }
}
 
/* 最终后备：块级布局（不支持 Flexbox） */
@supports not (display: flex) {
  .grid {
    display: block;
    margin: 0;
  }
  
  .grid-item {
    display: block;
    width: 100%;
    margin: 0 0 20px 0;
  }
}

// 优雅降级的网络请求
async function fetchUserData() {
  // 完整功能：使用 fetch API
  if (window.fetch) {
    try {
      const response = await fetch('/api/user');
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return await response.json();
    } catch (error) {
      console.error('Fetch failed:', error);
      // 降级到 XMLHttpRequest
    }
  }
  
  // 后备方案：XMLHttpRequest
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/user');
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = () => reject(new Error('Network error'));
    xhr.send();
  });
}

/* 步骤 1：移动端基础样式（所有设备） */
.container {
  padding: 15px;
  font-size: 14px;
}
 
.card {
  display: block;
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #eee;
}
 
/* 步骤 2：平板适配 */
@media (min-width: 768px) {
  .container {
    padding: 30px;
  }
  
  .card {
    display: flex;
  }
  
  .card-image {
    flex: 0 0 200px;
  }
  
  .card-content {
    flex: 1;
    padding-left: 20px;
  }
}
 
/* 步骤 3：桌面增强 */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Grid 增强 */
  @supports (display: grid) {
    .card-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    
    .card {
      display: block;
      margin-bottom: 0;
    }
  }
}

/* 结合响应式和渐进增强 */
 
/* 基础：所有设备 */
.nav {
  display: block;
}
 
.nav-item {
  display: block;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
 
/* 响应式：大屏幕 */
@media (min-width: 768px) {
  .nav {
    display: flex;
    justify-content: space-between;
  }
  
  .nav-item {
    display: inline-block;
    border-bottom: none;
  }
}
 
/* 特性增强：支持 Grid */
@supports (display: grid) {
  @media (min-width: 768px) {
    .nav {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: max-content;
      justify-content: space-between;
    }
  }
}
 
/* 触摸设备适配 */
@media (hover: none) and (pointer: coarse) {
  .nav-item {
    padding: 15px; /* 增大点击区域 */
    min-height: 44px;
  }
}
 
/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .nav-item {
    transition: none !important;
  }
}

<!-- 渐进增强的图片加载 -->
<picture>
  <!-- 高级格式（AVIF） -->
  <source srcset="image.avif" type="image/avif">
  <!-- 次优格式（WebP） -->
  <source srcset="image.webp" type="image/webp">
  <!-- 后备格式（JPEG） -->
  <img src="image.jpg" 
       alt="描述"
       loading="lazy"
       decoding="async"
       width="800"
       height="600">
</picture>
 
<script>
// 懒加载后备方案（不支持 loading="lazy" 的浏览器）
if (!('loading' in HTMLImageElement.prototype)) {
  // 使用 Intersection Observer 实现懒加载
  const lazyImages = document.querySelectorAll('img[loading="lazy"]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src || img.src;
        observer.unobserve(img);
      }
    });
  }, { rootMargin: '50px' });
  
  lazyImages.forEach(img => observer.observe(img));
}
</script>

// PostCSS 配置（推荐的兼容性处理工具链）
module.exports = {
  plugins: [
    // 自动添加浏览器前缀
    require('autoprefixer'),
    
    // 使用现代 CSS 语法，自动降级
    require('postcss-preset-env')({
      stage: 3,
      features: {
        'nesting-rules': true,
        'custom-properties': true,
        'custom-media-queries': true
      }
    }),
    
    // CSS 压缩
    require('cssnano')
  ]
};

// 简易特性检测脚本（可放在 <head> 中）
(function() {
  'use strict';
  
  const features = {
    // CSS 特性
    flexbox: CSS.supports('display', 'flex'),
    grid: CSS.supports('display', 'grid'),
    gap: CSS.supports('gap', '10px'),
    variables: CSS.supports('--test', '0'),
    aspectRatio: CSS.supports('aspect-ratio', '1'),
    container: CSS.supports('container-type', 'inline-size'),
    has: CSS.supports('selector(:has(*))'),
    
    // JS API
    fetch: 'fetch' in window,
    intersectionObserver: 'IntersectionObserver' in window,
    serviceWorker: 'serviceWorker' in navigator
  };
  
  // 添加 CSS 类到 html 元素
  Object.entries(features).forEach(([feature, supported]) => {
    document.documentElement.classList.toggle(feature, supported);
    document.documentElement.classList.toggle(`no-${feature}`, !supported);
  });
  
  // 暴露到全局
  window.CSSFeatures = features;
})();

/* 第 1 层：核心内容（所有浏览器） */
body {
  font-family: Georgia, serif;
  line-height: 1.6;
  color: #333;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
 
.article {
  margin-bottom: 40px;
}
 
.article-title {
  font-size: 24px;
  margin-bottom: 10px;
}
 
.article-image {
  width: 100%;
  height: auto;
}
 
/* 第 2 层：布局增强 */
@supports (display: flex) {
  .article-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
}
 
/* 第 3 层：视觉增强 */
@supports (display: grid) {
  .article-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
  }
}
 
/* 第 4 层：高级效果 */
@supports (backdrop-filter: blur(10px)) {
  .sticky-nav {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* 完整功能：现代布局 */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  height: 100vh;
  gap: 0;
}
 
.sidebar {
  grid-row: 1 / -1;
  background: #1a1a2e;
}
 
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
}
 
.main-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
  overflow: auto;
}
 
/* 降级方案：不支持 Grid */
@supports not (display: grid) {
  .dashboard {
    display: flex;
    flex-wrap: wrap;
  }
  
  .sidebar {
    width: 250px;
    min-height: 100vh;
  }
  
  .header {
    flex: 1;
    min-width: calc(100% - 250px);
  }
  
  .main-content {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    padding: 20px;
  }
  
  .widget {
    flex: 1 1 300px;
    margin: 10px;
  }
}
 
/* 高级增强：容器查询 */
@supports (container-type: inline-size) {
  .widget {
    container-type: inline-size;
  }
  
  @container (min-width: 400px) {
    .widget-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }
}

/* 融合策略：核心渐进增强 + 高级优雅降级 */
 
/* 基础：所有设备 */
.product-list {
  list-style: none;
  padding: 0;
}
 
.product-card {
  display: block;
  margin-bottom: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}
 
/* 响应式增强 */
@media (min-width: 768px) {
  .product-card {
    display: flex;
  }
  
  .product-image {
    flex: 0 0 200px;
  }
}
 
/* Grid 增强（渐进增强） */
@supports (display: grid) {
  @media (min-width: 1024px) {
    .product-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }
    
    .product-card {
      display: block;
      margin-bottom: 0;
    }
  }
}
 
/* 视觉增强（优雅降级） */
.product-card {
  /* 后备：简单边框 */
  border: 1px solid #eee;
}
 
@supports (box-shadow: 0 2px 8px rgba(0,0,0,0.1)) {
  .product-card {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }
  
  .product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
}