以下是一些实用的 CSS 小技巧及示例，附浏览器兼容性说明，帮助开发者提升效率并处理常见问题：

1. 使用 gap 简化间距布局

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* 替代传统 margin 方案 */
}


.flex-container {
  display: flex;
  gap: 15px; /* 避免使用 :not(:last-child) 选择器 */
}

兼容性：

• Chrome 84+、Firefox 76+、Safari 14.1+、Edge 84+

• 替代方案：旧版浏览器可用 margin + calc() 模拟。

2. 自动适应列布局（Grid）

说明：列宽最小 250px，自动填充容器空间，无需媒体查询。
兼容性：现代浏览器均支持（Chrome 57+、Firefox 52+）。

3. CSS 变量实现主题切换

:root {
  --primary-color: #2196f3;
  --text-color: #333;
}


.button {
  background: var(--primary-color);
  color: var(--text-color);
}

兼容性：

• Chrome 49+、Firefox 31+、Safari 9.3+

• 注意：IE 不支持，可通过预处理器变量降级。

4. 粘性定位（Sticky Header）

兼容性：

• Chrome 56+、Firefox 59+、Safari 13+（需 -webkit-sticky 前缀）

• 问题：父容器需有滚动空间。

5. 文字截断（单行/多行）

.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

兼容性：多行截断仅限 WebKit 内核（Chrome、Safari）。

6. 自定义滚动条样式

兼容性：

• WebKit 浏览器（Chrome/Safari）支持完整样式

• Firefox 64+ 支持基础颜色配置。

7. 响应式图片适配

.responsive-image {
  width: 100%;
  height: auto;
  object-fit: cover; /* 避免拉伸变形 */
}

兼容性：Chrome 31+、Firefox 36+、Safari 10+。

8. 混合模式（叠加效果）

兼容性：Chrome 41+、Firefox 32+、Safari 8+。

9. 使用 will-change 优化动画性能

.animated-element {
  will-change: transform, opacity; /* 提前告知浏览器变化属性 */
}

注意：避免滥用，仅在需要高性能动画时使用。

10. 媒体查询增强体验

兼容性：Chrome 76+、Firefox 63+、Safari 12.1+。

浏览器兼容性策略

1. 渐进增强：优先实现现代浏览器效果，再为旧版降级。

2. 工具检测：使用 Can I Use 检查特性支持。

3. 前缀处理：通过 PostCSS/Autoprefixer 自动添加 -webkit-、-moz- 等前缀。

这些技巧兼顾实用性与兼容性，可根据项目需求灵活选择。如需支持旧版浏览器（如 IE），建议搭配 Polyfill 或渐进降级方案。

参考文章：原文链接​

​