浏览器兼容性

W3C 标准化流程与浏览器实现的时间差：
 
ED（编辑草案） → WD（工作草案） → CR（候选推荐） → PR（提议推荐） → REC（推荐标准）
     ↑                ↑                  ↑
  Chrome 率先实现   各浏览器分头实现    行为趋于一致
  （可能偏离最终规范）  （实现细节差异大）   （但遗留差异仍存在）

/* 不同浏览器对 1px 的处理 */
.element {
  width: 33.333%; /* 三列布局 */
}
/* Chrome：可能四舍五入为 33.33%
   Firefox：可能截断为 33.33%
   Safari：可能向上取整为 33.34%
   → 三列总宽度可能超过 100%，导致最后一列换行 */

浏览器内核对 CSS 特性的支持进度：
 
WebKit (Safari, iOS)
├── 前缀：-webkit-
├── 特点：新特性支持较保守，但稳定性好
├── 注意：iOS 所有浏览器强制使用 WebKit
└── 典型问题：backdrop-filter 支持早，但 Grid 支持晚
 
Blink (Chrome, Edge, Opera)
├── 前缀：-webkit-（历史遗留）
├── 特点：新特性支持最快，实验性功能多
├── 注意：大部分新 CSS 特性的先行者
└── 典型问题：某些实验性特性可能变化
 
Gecko (Firefox)
├── 前缀：-moz-
├── 特点：标准支持好，CSS 变量最早支持
├── 注意：对 Web 标准贡献最大
└── 典型问题：某些 WebKit 特有属性不支持

// .browserslistrc 配置示例
 
// 大众项目（覆盖全球 90%+ 用户）
> 1%
last 2 versions
not dead
 
// 企业内部项目（可能需要支持旧浏览器）
> 0.5%
last 3 versions
not dead
IE 11
 
// 移动端项目
iOS >= 12
Android >= 5
Chrome >= 60
Safari >= 12
 
// 现代项目（放弃 IE）
> 0.5%
last 2 versions
not IE 11
not dead

// package.json 中的 browserslist 配置
{
  "browserslist": {
    "production": [
      "> 1%",
      "last 2 versions",
      "not dead",
      "not IE 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

# 查询目标浏览器列表
npx browserslist
 
# 查询覆盖率
npx browserslist --coverage
 
# 输出示例：
# chrome 120
# chrome 119
# edge 120
# firefox 121
# safari 17.2
# safari 17.1
# samsung 23
#
# Coverage: 92.5%

1. 解析 @supports 条件表达式
   ↓
2. 对每个 (property: value) 对：
   a. 创建临时CSS声明
   b. 将声明应用到临时元素
   c. 检查浏览器是否接受该声明
   d. 返回 true/false
   ↓
3. 应用逻辑运算符（and/or/not）
   ↓
4. 根据最终结果决定是否应用规则块内的样式

@supports (display: grid) and (gap: 10px) {
  /* 求值过程：
     1. 检测 display: grid → true/false
     2. 检测 gap: 10px → true/false
     3. true AND true → 应用样式
     4. 任一 false → 忽略整个块
  */
  .container {
    display: grid;
    gap: 10px;
  }
}

/* Blink 特有的解析行为 */
.element {
  /* 支持 -webkit-line-clamp 多行截断 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  
  /* 支持 backdrop-filter 较早 */
  backdrop-filter: blur(10px);
  
  /* Container Queries 支持最早（105+） */
  container-type: inline-size;
}

/* WebKit 特有的解析行为 */
.element {
  /* iOS Safari 特有的 -webkit-overflow-scrolling */
  -webkit-overflow-scrolling: touch;
  
  /* backdrop-filter 支持早（Safari 9+） */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  
  /* Grid 支持较晚（Safari 10.1+） */
  display: grid;
  
  /* CSS Nesting 支持较晚（Safari 16.5+） */
  & .nested { color: red; }
}

/* Gecko 特有的解析行为 */
.element {
  /* CSS 变量支持最早（Firefox 31+） */
  --custom-prop: value;
  
  /* -moz-appearance 独有行为 */
  -moz-appearance: none;
  
  /* backdrop-filter 支持较晚（Firefox 103+） */
  backdrop-filter: blur(10px);
  
  /* :has() 支持最晚（Firefox 121+） */
  &:has(.child) { color: blue; }
}

/* 现代语法：CSS Nesting */
.card {
  background: white;
  
  & .title {
    font-size: 20px;
    color: #333;
  }
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}
 
/* 降级方案：使用 PostCSS Nesting */
.card {
  background: white;
}
.card .title {
  font-size: 20px;
  color: #333;
}
.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 容器查询 */
.card-container {
  container-type: inline-size;
  container-name: card;
}
 
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}
 
/* 降级方案：使用媒体查询 */
@supports not (container-type: inline-size) {
  @media (min-width: 400px) {
    .card {
      display: grid;
      grid-template-columns: 200px 1fr;
    }
  }
}

/* :has() 选择器 */
.card:has(.badge) {
  border: 2px solid gold;
}
 
/* 降级方案：JavaScript */
<script>
  document.querySelectorAll('.card').forEach(card => {
    if (card.querySelector('.badge')) {
      card.classList.add('has-badge');
    }
  });
</script>
 
<style>
  .card.has-badge {
    border: 2px solid gold;
  }
</style>

/* @layer 层叠层 */
@layer base, components, utilities;
 
@layer base {
  button { background: blue; }
}
 
@layer components {
  .btn-primary { background: green; }
}
 
/* 降级方案：不使用 @layer，依赖源顺序 */
button { background: blue; }
.btn-primary { background: green; }

/* 手动添加前缀（不推荐） */
.element {
  -webkit-transform: translateX(100px); /* Safari, Chrome */
  -moz-transform: translateX(100px);    /* Firefox */
  -ms-transform: translateX(100px);     /* IE 9 */
  -o-transform: translateX(100px);      /* 旧 Opera */
  transform: translateX(100px);         /* 标准（必须放在最后） */
}

/* 检测支持 */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
 
/* 检测不支持 */
@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}
 
/* 组合检测：同时支持 */
@supports (display: grid) and (gap: 10px) {
  .grid {
    display: grid;
    gap: 10px;
  }
}
 
/* 组合检测：任一支持 */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .modal {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* 模式一：基础 → 增强 */
.card {
  /* 基础样式：所有浏览器都能渲染 */
  display: block;
  background: white;
  border: 1px solid #e0e0e0;
  padding: 16px;
}
 
@supports (display: grid) {
  .card {
    /* 增强样式：支持 Grid 的浏览器获得更好布局 */
    display: grid;
    grid-template-areas:
      "image title"
      "image desc";
    gap: 16px;
  }
}
 
@supports (backdrop-filter: blur(10px)) {
  .card {
    /* 视觉增强：支持毛玻璃的浏览器获得更好效果 */
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.8);
    border: none;
  }
}

/* 模式二：检测选择器支持（Safari 14+） */
@supports selector(:has(*)) {
  /* 只有支持 :has() 的浏览器才应用 */
  .card-container:has(.card:hover) {
    transform: scale(1.02);
  }
}
 
/* 模式三：检测 font-format 支持 */
@supports font-format(woff2) {
  @font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2');
  }
}

/* ❌ 无法检测 Bug：Safari 支持 gap 但在 Flexbox 中有 Bug */
@supports (gap: 10px) {
  .flex-container {
    gap: 10px; /* Safari 14 之前在 Flex 中 gap 不生效 */
  }
}
 
/* ✅ 正确做法：结合版本信息或使用更安全的方案 */
.flex-container {
  margin: -5px; /* 间距的后备方案 */
}
 
@supports (gap: 10px) and (display: flex) {
  .flex-container {
    margin: 0;
    gap: 10px;
  }
}

// CSS.supports API
if (CSS.supports('display', 'grid')) {
  console.log('支持 Grid');
}
 
// 检测 CSS 变量
if (CSS.supports('--css', 'variables')) {
  console.log('支持 CSS 变量');
}
 
// 多属性组合检测
if (CSS.supports('display: grid') && CSS.supports('gap: 10px')) {
  console.log('支持 Grid Gap');
}
 
// 封装检测函数
const featureDetection = {
  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(*))'),
 
  // 添加 CSS 类到 html 元素
  applyClasses() {
    Object.entries(this).forEach(([key, value]) => {
      if (typeof value === 'boolean') {
        document.documentElement.classList.toggle(key, value);
        document.documentElement.classList.toggle(`no-${key}`, !value);
      }
    });
  }
};
 
featureDetection.applyClasses();

/* CSS 中使用 @supports 提供样式降级 */
.hero {
  height: 100vh; /* 后备值 */
}
 
@supports (height: 100dvh) {
  .hero {
    height: 100dvh; /* 现代浏览器使用动态视口高度 */
  }
}

// JavaScript 中使用 CSS.supports 做逻辑判断
if (!CSS.supports('height', '100dvh')) {
  // 不支持 dvh 时，用 JS 动态计算视口高度
  function setVH() {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  }
  setVH();
  window.addEventListener('resize', setVH);
}

npm install postcss autoprefixer --save-dev

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      // 覆盖 browserslist 配置（可选）
      overrideBrowserslist: [
        '> 1%',
        'last 2 versions',
        'not dead'
      ],
      // 是否为 Grid 添加 IE 前缀
      grid: true
    })
  ]
};

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'  // 会自动读取 postcss.config.js
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ]
};

// vite.config.js
import { defineConfig } from 'vite';
 
export default defineConfig({
  css: {
    postcss: {
      plugins: [
        require('autoprefixer')({
          grid: true
        })
      ]
    }
  }
});

/* 输入 */
.element {
  display: flex;
  user-select: none;
  backdrop-filter: blur(10px);
}
 
/* 输出（根据 Browserslist 配置） */
.element {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

npm install postcss-preset-env --save-dev

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-preset-env')({
      stage: 2,  // 使用阶段 2+ 的特性
      features: {
        'nesting-rules': true,           // CSS 嵌套
        'custom-properties': true,       // CSS 变量降级
        'custom-media-queries': true,    // 自定义媒体查询
        'logical-properties-and-values': true  // 逻辑属性
      }
    })
  ]
};

/* 输入：使用现代语法 */
:root {
  --primary: #007bff;
}
 
@custom-media --mobile (max-width: 480px);
 
.element {
  color: var(--primary);
  
  &:hover {
    color: dark(var(--primary));
  }
  
  @media (--mobile) {
    font-size: 14px;
  }
}
 
/* 输出：降级后的代码 */
:root {
  --primary: #007bff;
}
 
.element {
  color: #007bff;  /* CSS 变量降级 */
  color: var(--primary);
}
 
.element:hover {
  color: #0056b3;
}
 
@media (max-width: 480px) {
  .element {
    font-size: 14px;
  }
}

布局类：flexbox, css-grid, multicolumn, container-queries
视觉类：backdrop-filter, clip-path, mask-image, mix-blend-mode
交互类：scroll-snap, touch-action, overscroll-behavior
变量类：css-variables, css-nesting, css-has
函数类：clamp, min-max, calc, env

┌─────────────────────────────────────────────────────────────┐
│ CSS Grid Layout                                             │
├─────────────────────────────────────────────────────────────┤
│ 支持度色块含义：                                              │
│ 🟢 深绿：完全支持（所有功能可用）                                │
│ 🟡 浅绿：部分支持（有已知问题或缺少部分功能）                      │
│ 🔴 红色：不支持                                               │
│ ⚪ 灰色：未知/未测试                                           │
├─────────────────────────────────────────────────────────────┤
│ 关键指标：                                                   │
│ • 全球支持率：97.5%（基于 StatCounter 数据）                    │
│ • 当前版本支持：显示最新版本号                                  │
│ • 已知问题：点击版本号查看详细 Bug 列表                         │
│ • 资源链接：规范文档、MDN 文档、测试套件                        │
└─────────────────────────────────────────────────────────────┘

# 在搜索结果页面，点击地区下拉菜单
# 可选择：中国、美国、全球等不同区域
# 中国市场的浏览器分布与全球差异较大：
#   - QQ 浏览器、UC 浏览器占比更高
#   - iOS Safari 占比相对更高（iPhone 用户多）
#   - 360 浏览器等双核浏览器需特殊关注

# 安装
npm install -g caniuse-cmd
 
# 查询特性支持
caniuse css-grid
 
# 输出表格格式
caniuse flexbox --short
 
# 在脚本中集成
caniuse css-variables --percentages  # 输出百分比数据

// 使用 caniuse-api npm 包
import { support, isSupported, getSupport } from 'caniuse-api';
 
// 检测特性是否被目标浏览器支持
isSupported('css-grid', 'ie 11'); // false
isSupported('css-grid', 'chrome 100'); // true
 
// 获取特性的详细支持信息
const gridSupport = getSupport('css-grid');
// { chrome: { y: 57 }, firefox: { y: 52 }, safari: { y: 10.1 }, ... }
 
// 在 CI 中自动检查
const requiredFeatures = ['css-grid', 'css-variables', 'flexbox-gap'];
const targetBrowsers = '> 1%, last 2 versions, not dead';
 
requiredFeatures.forEach(feature => {
  if (!isSupported(feature, targetBrowsers)) {
    console.warn(`⚠️ ${feature} 在目标浏览器中未完全支持`);
  }
});

/* 完整兼容方案 */
.container {
  /* 旧版语法 (IE 10) */
  display: -ms-flexbox;
  -ms-flex-direction: row;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -ms-flex-align: center;
  
  /* 标准语法 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
 
.item {
  /* IE 10 */
  -ms-flex: 1 0 auto;
  /* 标准 */
  flex: 1 0 auto;
}

/* 后备方案：Flexbox */
.grid-container {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}
 
.grid-item {
  width: calc(33.333% - 20px);
  margin: 10px;
}
 
/* 现代浏览器使用 Grid */
@supports (display: grid) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;  /* 重置 flex 的 margin */
  }
  
  .grid-item {
    width: auto;
    margin: 0;
  }
}

:root {
  --primary-color: #007bff;
  --spacing: 16px;
}
 
.button {
  /* 后备值（必须写在前面） */
  background-color: #007bff;
  padding: 16px 32px;
  
  /* CSS 变量 */
  background-color: var(--primary-color);
  padding: var(--spacing) calc(var(--spacing) * 2);
}

.element {
  /* 后备值 */
  width: 95%;
  /* calc() */
  width: calc(100% - 20px);
  
  /* ⚠️ 嵌套 calc() 兼容性较差 */
  /* width: calc(100% - calc(50px + 1rem)); */
  
  /* ✅ 推荐：展开嵌套 */
  width: calc(100% - 50px - 1rem);
}

/* vh 在移动端的问题：iOS Safari 地址栏会占用高度 */
.hero {
  height: 100vh;
  /* iOS Safari 地址栏问题修复 */
  height: calc(var(--vh, 1vh) * 100);
}

// JavaScript 修复视口高度问题
function setVH() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
 
// 初始化
setVH();
 
// 监听 resize 和 orientationchange
window.addEventListener('resize', setVH);
window.addEventListener('orientationchange', setVH);
 
// 现代替代方案：使用 dvh (dynamic viewport height)
// CSS: height: 100dvh; (Chrome 108+, Safari 15.4+, Firefox 101+)

/* 问题：在 2x 屏上显示为 2px */
.border-normal {
  border-bottom: 1px solid #ddd;
}
 
/* 解决方案一：伪元素 + transform */
.hairline {
  position: relative;
}
 
.hairline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #ddd;
  transform: scaleY(0.5);  /* 2x 屏缩放 0.5 */
  transform-origin: 0 0;
}
 
/* 3x 屏 */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .hairline::after {
    transform: scaleY(0.33);
  }
}
 
/* 解决方案二：box-shadow */
.hairline-shadow {
  box-shadow: 0 -1px 0 0 #ddd;  /* 上边框 */
}
 
/* 解决方案三：border-image */
.hairline-image {
  border-bottom: 1px solid;
  border-image: linear-gradient(to right, #ddd, #ddd) 0 0 1 0;
}
 
/* 四边 1px 边框 */
.hairline-all::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #ddd;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
  box-sizing: border-box;
}

/* iOS 底部安全区域 */
.footer {
  /* iOS 11.0-11.2 */
  padding-bottom: constant(safe-area-inset-bottom);
  /* iOS 11.2+ */
  padding-bottom: env(safe-area-inset-bottom);
}
 
/* 顶部刘海适配 */
.header {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
 
/* 左右安全区域（横屏时） */
.container {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
 
/* 必须在 viewport meta 标签中启用 */
/* <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> */

/* 触摸设备检测 */
@media (hover: none) and (pointer: coarse) {
  /* 增大点击区域 */
  .button {
    padding: 12px 24px;
    min-height: 44px;  /* Apple 推荐的最小点击区域 */
    min-width: 44px;
  }
  
  /* 移除 hover 效果 */
  .button:hover {
    background: inherit;
  }
}
 
/* 精确指针设备（鼠标） */
@media (hover: hover) and (pointer: fine) {
  .button {
    padding: 8px 16px;
  }
  
  .button:hover {
    background: #f0f0f0;
  }
}
 
/* 禁用触摸调用 */
.no-touch-callout {
  -webkit-touch-callout: none;  /* iOS Safari 长按菜单 */
  -webkit-user-select: none;
  user-select: none;
}

/* 设备像素比检测 */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: 100px 50px;  /* 必须设置背景尺寸 */
  }
}
 
/* iOS 特定检测 */
@supports (-webkit-touch-callout: none) {
  /* iOS only */
  .ios-specific {
    -webkit-tap-highlight-color: transparent;  /* 移除点击高亮 */
  }
}
 
/* Safari 特定检测 */
@media not all and (min-resolution: .001dpcm) {
  @supports (-webkit-appearance: none) {
    .safari-specific {
      /* Safari only 样式 */
    }
  }
}
 
/* 暗色模式检测 */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #ffffff;
  }
}
 
/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 1. 输入框聚焦时页面缩放（iOS） */
/* 解决：设置 font-size >= 16px */
input, select, textarea {
  font-size: 16px;
}
 
/* 2. 滚动穿透问题 */
.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
 
/* 3. 橡皮筋效果禁用 */
.no-bounce {
  overflow: hidden;
  height: 100vh;
}
 
/* 4. 长按链接弹出菜单禁用 */
.no-callout a {
  -webkit-touch-callout: none;
}
 
/* 5. 表单元素外观统一 */
input, button, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}
 
/* 6. 点击延迟（300ms 问题） */
/* 解决：使用 touch-action 或 viewport 设置 */
.fast-click {
  touch-action: manipulation;
}

npm install core-js

// 方式一：按需引入（推荐，最小化包体积）
import 'core-js/modules/es.object.assign.js';       // Object.assign
import 'core-js/modules/es.array.from.js';           // Array.from
import 'core-js/modules/es.promise.js';              // Promise
 
// 方式二：通过 Babel 自动按需引入
// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',    // 按需引入，只 Polyfill 代码中用到的 API
      corejs: 3                // 使用 core-js@3
    }]
  ]
};
 
// 方式三：全量引入（不推荐，包体积大）
import 'core-js/stable';

// CSS.supports() 在旧浏览器中不可用
// core-js 不直接 Polyfill CSS.supports，但可以 Polyfill 依赖的 JS API
 
// 示例：动态样式计算依赖的 JS API
import 'core-js/modules/es.object.entries.js';  // Object.entries（遍历样式对象）
import 'core-js/modules/es.array.from.js';       // Array.from（类数组转换）
 
// 自定义 CSS.supports Polyfill
if (!window.CSS || !CSS.supports) {
  window.CSS = window.CSS || {};
  CSS.supports = function(property, value) {
    var element = document.createElement('div');
    if (arguments.length === 2) {
      element.style[property] = value;
      return element.style[property] !== '';
    } else {
      // 解析单参数形式：CSS.supports('display: grid')
      var parts = property.split(':');
      if (parts.length === 2) {
        element.style[parts[0].trim()] = parts[1].trim();
        return element.style[parts[0].trim()] !== '';
      }
    }
    return false;
  };
}

<!-- 动态 Polyfill 服务（需注意供应链安全风险） -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=css.supports,Object.entries,Array.from"></script>
 
<!-- 更安全的替代方案：自建 Polyfill 服务 -->
<!-- 使用 polyfill-library 自建 -->
<script src="/polyfill.min.js?features=css.supports"></script>

<!-- 使用 css-vars-ponyfill 支持 IE 11 -->
<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>
<script>
  cssVars({
    onlyLegacy: true,      // 只在旧浏览器启用
    preserveVars: true,    // 保留 CSS 变量声明
    silent: true,          // 静默模式
    watch: true            // 监听 DOM 变化
  });
</script>

<!-- flexibility.js 支持 IE 8-9 -->
<!--[if lte IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexibility/2.0.1/flexibility.js"></script>
<script>
  flexibility(document.documentElement);
</script>
<![endif]-->

<!-- picturefill.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>
 
<picture>
  <source srcset="large.jpg" media="(min-width: 800px)">
  <source srcset="medium.jpg" media="(min-width: 400px)">
  <img src="small.jpg" alt="Responsive image">
</picture>

<!-- html5shiv.js 让 IE 8 及以下识别 HTML5 元素 -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

<!-- respond.js 让 IE 6-8 支持媒体查询 -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- IE 所有版本 -->
<!--[if IE]>
  <link rel="stylesheet" href="ie.css">
<![endif]-->
 
<!-- IE 9 及以下 -->
<!--[if lte IE 9]>
  <script src="html5shiv.js"></script>
  <script src="respond.js"></script>
<![endif]-->
 
<!-- 非 IE 浏览器 -->
<!--[if !IE]><!-->
  <link rel="stylesheet" href="modern.css">
<!--<![endif]-->

/* 1. 盒模型问题 */
*, *:before, *:after {
  box-sizing: border-box;
}
 
/* 2. 最小高度问题 */
.element {
  min-height: 100px;
  height: auto !important;
  height: 100px; /* IE 6 解析为 min-height */
}
 
/* 3. 透明度问题 */
.transparent {
  opacity: 0.5;
  filter: alpha(opacity=50); /* IE 8 及以下 */
}
 
/* 4. PNG 透明问题 */
.png-fix {
  background: transparent;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='image.png',
    sizingMethod='scale'
  );
}
 
/* 5. 双倍边距问题 */
.double-margin {
  float: left;
  margin-left: 10px;
  _display: inline; /* IE 6 修复 */
}
 
/* 6. 清除浮动 */
.clearfix {
  *zoom: 1; /* IE 6-7 */
}
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

## 桌面浏览器测试清单
 
### Chrome / Edge (Blink)
- [ ] 最新两个版本
- [ ] CSS Grid 布局正常
- [ ] Flexbox 布局正常
- [ ] CSS 变量正常
- [ ] 动画流畅
 
### Firefox (Gecko)
- [ ] 最新两个版本
- [ ] CSS Grid 布局正常
- [ ] Flexbox 布局正常
- [ ] CSS 变量正常
- [ ] 表单元素样式一致
 
### Safari (WebKit)
- [ ] 最新版本
- [ ] CSS Grid 布局正常
- [ ] Flexbox 布局正常
- [ ] backdrop-filter 正常
- [ ] 滚动行为正常
 
## 移动端测试清单
 
### iOS Safari
- [ ] iOS 12+
- [ ] 刘海屏安全区域适配
- [ ] 输入框聚焦不缩放
- [ ] 滚动流畅
- [ ] 1px 边框正常
 
### Android Chrome
- [ ] Android 5.0+
- [ ] 各种屏幕尺寸适配
- [ ] 虚拟键盘弹出时布局正常
- [ ] 触摸交互正常
 
### 微信内置浏览器
- [ ] iOS 微信
- [ ] Android 微信
- [ ] 小程序 WebView
 
## 兼容性验证工具
 
- [ ] BrowserStack（真实设备测试）
- [ ] Sauce Labs（跨浏览器测试）
- [ ] LambdaTest（自动化测试）
- [ ] Chrome DevTools 设备模拟

1. 确定兼容范围
   ↓ 配置 Browserslist
2. 配置自动化工具
   ↓ Autoprefixer + PostCSS
3. 编写基础样式
   ↓ 使用标准 CSS 语法
4. 关键特性检测
   ↓ @supports 提供降级方案
5. 移动端适配
   ↓ 安全区域、触摸优化
6. 多浏览器测试
   ↓ BrowserStack / 真机测试
7. 持续监控
   ↓ Sentry / 用户反馈

@media (hover: none) and (pointer: coarse) {
  /* 触摸设备样式 */
}

const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;