容器查询的浏览器兼容性与polyfill

容器查询自2022年起获得主流浏览器支持，但仍需考虑兼容性方案。

浏览器支持现状

支持情况（截至2026年）

特性支持详情

兼容性检测

CSS @supports检测

@supports (container-type: inline-size) {
  /* 容器查询支持的样式 */
  .container {
    container-type: inline-size;
  }
}

@supports not (container-type: inline-size) {
  /* 回退样式 */
  .container {
    /* 传统媒体查询方案 */
  }

  @media (min-width: 768px) {
    .card {
      display: flex;
    }
  }
}

JavaScript检测

// 方法1：CSS.supports API
const supportsContainer = CSS.supports('container-type: inline-size');

if (supportsContainer) {
  console.log('容器查询支持');
} else {
  // 加载polyfill或应用回退
}

// 方法2：检测属性存在
const testEl = document.createElement('div');
testEl.style.containerType = 'inline-size';
const hasContainer = testEl.style.containerType !== '';

结合回退方案

/* 默认样式（回退） */
.card {
  display: block;
}

/* 媒体查询回退 */
@media (min-width: 768px) {
  .card {
    display: flex;
  }
}

/* 容器查询增强（覆盖媒体查询） */
@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
  }

  @container (min-width: 400px) {
    .card {
      display: flex;
    }
  }
}

Polyfill方案

官方Polyfill

<!-- 使用CSS Container Queries Polyfill -->
<script src="https://cdn.jsdelivr.net/npm/container-query-polyfill@1"></script>

配置选项

// 自动检测并应用
if (!CSS.supports('container-type: inline-size')) {
  // Polyfill自动初始化
}

// 手动配置
ContainerQueryPolyfill.configure({
  // 监控的容器选择器
  containers: ['.card-container', '.panel-container'],

  // 断点定义
  breakpoints: {
    sm: 300,
    md: 500,
    lg: 800
  }
});

Polyfill局限

// DOM变化后刷新
document.addEventListener('DOMContentLoaded', () => {
  ContainerQueryPolyfill.refresh();
});

// 动态添加容器后
const newContainer = document.createElement('div');
newContainer.className = 'card-container';
parent.appendChild(newContainer);
ContainerQueryPolyfill.refresh();

渐进增强策略

策略1：媒体查询为基础

/* 基础：媒体查询保证基本响应式 */
.card {
  display: block;
  padding: 16px;
}

@media (min-width: 768px) {
  .card {
    display: flex;
    padding: 24px;
  }
}

/* 增强：容器查询精细控制 */
@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
  }

  @container (min-width: 300px) {
    .card {
      display: flex;
      padding: 16px;
    }
  }

  @container (min-width: 500px) {
    .card {
      padding: 24px;
    }
  }
}

策略2：功能降级

/* 容器查询单位回退 */
.title {
  font-size: 16px;  /* 固定值回退 */
  font-size: 5cqw;  /* 容器单位覆盖 */
}

/* 浏览器不支持cqw时使用16px */
/* 支持时使用容器相对值 */

筞略3：条件加载

<!-- 根据支持情况加载不同样式 -->
<link rel="stylesheet" href="base.css">

<script>
  if (CSS.supports('container-type: inline-size')) {
    document.write('<link rel="stylesheet" href="container-queries.css">');
  } else {
    document.write('<link rel="stylesheet" href="media-queries.css">');
    document.write('<script src="container-polyfill.js"><\/script>');
  }
</script>

生产环境建议

目标浏览器确定

// 确定项目浏览器支持范围
const browserslist = [
  '> 0.5%',
  'last 2 versions',
  'not dead',
  'Chrome >= 105',
  'Safari >= 16',
  'Firefox >= 110'
];

// 检查是否需要polyfill
// 大多数现代项目可直接使用

构建工具处理

// PostCSS配置
module.exports = {
  plugins: [
    require('autoprefixer'),
    // 容器查询不需要特殊PostCSS处理
    // 现代浏览器原生支持
  ]
};

检测结果使用

// 运行时检测并应用策略
function initContainerQueries() {
  const supported = CSS.supports('container-type: inline-size');

  if (!supported) {
    // 加载polyfill
    loadScript('https://cdn.jsdelivr.net/npm/container-query-polyfill@1');
  }

  // 统一初始化逻辑
  setupContainers();
}

要点总结

1. 主流浏览器105+版本完全支持容器查询
2. 使用@supports或CSS.supports()检测支持情况
3. 不支持时可加载官方polyfill，但有性能局限
4. 渐进增强：媒体查询为基础，容器查询增强
5. 大多数现代项目可直接使用，无需polyfill