CSS 浏览器兼容与 Hack 实战指南

一、厂商前缀处理

1.1 常见厂商前缀

CSS 厂商前缀是为了让浏览器厂商能够实现实验性功能而引入的机制，常见的有：

-webkit-  /* Chrome, Safari, Edge */
-moz-     /* Firefox */
-ms-      /* IE, Edge */
-o-       /* Opera (旧版) */

1.2 使用场景示例

/* 渐变背景兼容写法 */
.background {
  background: -webkit-linear-gradient(top, #fff, #000);
  background: -moz-linear-gradient(top, #fff, #000);
  background: -o-linear-gradient(top, #fff, #000);
  background: linear-gradient(to bottom, #fff, #000);
}

/* 弹性布局兼容写法 */
.container {
  display: -webkit-box;      /* 老版本语法 */
  display: -moz-box;
  display: -ms-flexbox;      /* 混合版本语法 */
  display: -webkit-flex;     /* 新版本语法 */
  display: flex;
}

1.3 现代解决方案

PostCSS + Autoprefixer 是目前最推荐的自动化前缀处理方案：

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versions', '> 1%']
    })
  ]
}

实践建议：

1. 新项目直接使用构建工具自动处理前缀
2. 维护老项目时保留原有前缀，新增代码使用标准写法
3. 定期检查浏览器支持情况，移除不再需要的前缀

二、IE 条件 Hack

2.1 常见 IE Hack 语法

/* IE6 及以下 */
selector { _property: value; }

/* IE7 及以下 */
selector { *property: value; }

/* IE8/9/10 */
selector { property: value\9; }

/* IE9/10 */
selector { property: value\0; }

/* IE10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ 专用样式 */
}

2.2 条件注释 (HTML Hack)

<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css">
<![endif]-->

<!--[if lte IE 8]>
<script src="html5shiv.js"></script>
<![endif]-->

2.3 现代替代方案

特性检测是更优雅的解决方案：

// 检测 Flexbox 支持
if ('flex' in document.documentElement.style) {
  // 支持 Flexbox
} else {
  // 降级方案
}

实践建议：

1. 新项目尽量避免使用 Hack，优先考虑特性检测
2. 维护老项目时保留必要 Hack 并添加详细注释
3. 为 IE 单独加载 polyfill 而不是污染全局样式

三、常见兼容性问题解决方案

3.1 Flexbox 兼容方案

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

3.2 CSS Grid 兼容方案

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.grid-item {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  grid-column: 1;
  grid-row: 1;
}

3.3 动画兼容方案

@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  -webkit-animation: fadeIn 1s;
          animation: fadeIn 1s;
}

四、兼容性检查工具

1. Can I Use (https://caniuse.com) - 查询 CSS 特性兼容性
2. BrowserStack - 多浏览器测试平台
3. Modernizr - 特性检测库
4. CSS Validator - W3C 官方验证工具

五、最佳实践总结

1. 渐进增强：从基础功能开始，逐步增加高级特性
2. 优雅降级：确保在不支持新特性的浏览器中仍能正常工作
3. 特性检测：优先使用 Modernizr 等工具检测特性支持
4. 分离样式：为特定浏览器创建单独的样式表
5. 定期审查：随着浏览器更新，定期移除不必要的 Hack

通过合理使用厂商前缀和条件 Hack，结合现代构建工具，可以在保证兼容性的同时保持代码的整洁和可维护性。