Autoprefixer #

Autoprefixer 是最流行的 PostCSS 插件，它根据 Can I Use 的数据自动添加浏览器前缀，让开发者无需关心浏览器兼容性问题。

什么是 Autoprefixer？ #

工作原理 #

text

┌─────────────────────────────────────────────────────────────┐
│                   Autoprefixer 工作流程                      │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  CSS 输入                                                   │
│     │                                                       │
│     ▼                                                       │
│  ┌──────────────────┐                                       │
│  │  解析 CSS 属性    │                                       │
│  └────────┬─────────┘                                       │
│           │                                                 │
│           ▼                                                 │
│  ┌──────────────────┐                                       │
│  │ 查询 Can I Use   │                                       │
│  │ 数据库           │                                       │
│  └────────┬─────────┘                                       │
│           │                                                 │
│           ▼                                                 │
│  ┌──────────────────┐                                       │
│  │ 匹配浏览器列表    │                                       │
│  │ (browserslist)   │                                       │
│  └────────┬─────────┘                                       │
│           │                                                 │
│           ▼                                                 │
│  ┌──────────────────┐                                       │
│  │ 添加必要的前缀    │                                       │
│  └────────┬─────────┘                                       │
│           │                                                 │
│           ▼                                                 │
│  CSS 输出                                                   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

为什么需要 Autoprefixer？ #

css

/* 手动添加前缀（繁琐且容易遗漏） */
.button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 使用 Autoprefixer（简洁） */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

安装与配置 #

安装 #

bash

npm install autoprefixer --save-dev

基本配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

带选项配置 #

javascript

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

配置选项 #

overrideBrowserslist #

指定目标浏览器：

javascript

require('autoprefixer')({
  overrideBrowserslist: [
    '> 1%',           // 全球使用率大于 1%
    'last 2 versions', // 每个浏览器的最后 2 个版本
    'not dead',       // 排除已停止维护的浏览器
    'not ie 11'       // 排除 IE 11
  ]
})

常用浏览器查询 #

查询	说明
`> 1%`	全球使用率大于 1%
`> 1% in CN`	中国使用率大于 1%
`last 2 versions`	每个浏览器的最后 2 个版本
`last 2 Chrome versions`	Chrome 最后 2 个版本
`not dead`	排除已停止维护的浏览器
`not ie 11`	排除 IE 11
`since 2020`	2020 年后发布的版本
`iOS 7`	iOS 7
`Firefox ESR`	Firefox 长期支持版
`defaults`	默认配置（> 0.5%, last 2 versions, Firefox ESR, not dead）

grid 选项 #

控制 CSS Grid 前缀：

javascript

require('autoprefixer')({
  grid: true,  // 启用 Grid 前缀
  // 或
  grid: 'autoplace'  // 自动放置 Grid 项目
})

css

/* 输入 */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* 输出（grid: true） */
.container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

flexbox 选项 #

控制 Flexbox 前缀：

javascript

require('autoprefixer')({
  flexbox: true,       // 启用所有 Flexbox 前缀
  // 或
  flexbox: 'no-2009'   // 不添加 2009 年旧版 Flexbox 前缀
})

remove 选项 #

控制是否移除过时的前缀：

javascript

require('autoprefixer')({
  remove: true,   // 移除过时的前缀（默认）
  remove: false   // 保留所有前缀
})

supports 选项 #

控制是否添加 @supports 前缀：

javascript

require('autoprefixer')({
  supports: true   // 添加 @supports 前缀（默认）
})

browserslist 配置 #

配置文件方式 #

创建 .browserslistrc 文件：

text

# .browserslistrc
> 1%
last 2 versions
not dead
not ie 11

package.json 方式 #

json

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

不同环境配置 #

json

{
  "browserslist": {
    "production": [
      "> 1%",
      "last 2 versions",
      "not dead"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

查询当前配置 #

bash

# 查看当前浏览器列表
npx browserslist

# 查看特定查询的结果
npx browserslist "> 1%"

# 查看配置覆盖情况
npx browserslist --config="path/to/.browserslistrc"

支持的属性 #

常用属性 #

属性	说明
`display: flex`	Flexbox 布局
`display: grid`	Grid 布局
`user-select`	用户选择
`backdrop-filter`	背景滤镜
`appearance`	外观
`text-size-adjust`	文本大小调整
`tab-size`	Tab 大小
`hyphens`	连字符
`writing-mode`	书写模式
`text-orientation`	文本方向
`image-rendering`	图像渲染
`clip-path`	裁剪路径
`mask`	遮罩
`filter`	滤镜

Flexbox 相关 #

css

/* 输入 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  order: 1;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

/* 输出 */
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}

Grid 相关 #

css

/* 输入 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  justify-items: center;
  align-items: center;
}

/* 输出 */
.container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
  grid-template-columns: repeat(3, 1fr);
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  gap: 20px;
  -ms-grid-row-align: center;
  justify-items: center;
  -ms-grid-column-align: center;
  align-items: center;
}

变换相关 #

css

/* 输入 */
.element {
  transform: translateX(10px) rotate(45deg);
  transform-origin: center center;
  perspective: 1000px;
}

/* 输出 */
.element {
  -webkit-transform: translateX(10px) rotate(45deg);
  -ms-transform: translateX(10px) rotate(45deg);
  transform: translateX(10px) rotate(45deg);
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

过渡和动画 #

css

/* 输入 */
.element {
  transition: all 0.3s ease;
  animation: fadeIn 1s ease-in-out;
}

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

/* 输出 */
.element {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-animation: fadeIn 1s ease-in-out;
  animation: fadeIn 1s ease-in-out;
}

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

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

控制注释 #

禁用 Autoprefixer #

css

/* 禁用整个文件 */
/* autoprefixer: off */

.container {
  display: flex;
}

/* 禁用特定规则 */
.button {
  /* autoprefixer: ignore next */
  -webkit-user-select: none;
  user-select: none;
}

指定 Grid 支持 #

css

/* autoprefixer grid: on */
.container {
  display: grid;
}

指定浏览器 #

css

/* autoprefixer: > 5% */
.container {
  display: flex;
}

高级用法 #

与其他插件配合 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-nested'),
    require('autoprefixer'),  // 在语法转换后
    require('cssnano')        // 在最后压缩
  ]
}

条件配置 #

javascript

// postcss.config.js
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: isProduction
        ? ['> 1%', 'last 2 versions', 'not dead']
        : ['last 1 chrome version']
    })
  ]
}

自定义数据源 #

javascript

require('autoprefixer')({
  overrideBrowserslist: ['> 1%'],
  // 使用自定义的 Can I Use 数据
  stats: './stats.json'
})

调试与验证 #

查看添加的前缀 #

javascript

const postcss = require('postcss')
const autoprefixer = require('autoprefixer')

const css = '.button { display: flex; }'

postcss([autoprefixer])
  .process(css, { from: undefined })
  .then(result => {
    console.log(result.css)
    
    // 查看警告信息
    result.warnings().forEach(warn => {
      console.warn(warn.toString())
    })
  })

在线工具 #

Autoprefixer CSS Online
可以快速测试不同配置的输出结果

命令行测试 #

bash

# 安装 CLI
npm install postcss-cli autoprefixer --save-dev

# 处理文件
npx postcss input.css --use autoprefixer -o output.css

# 查看详细输出
npx postcss input.css --use autoprefixer -o output.css --verbose

常见问题 #

前缀没有添加 #

javascript

// 检查 browserslist 配置
npx browserslist

// 确保配置正确
require('autoprefixer')({
  overrideBrowserslist: ['last 2 versions']  // 确保包含目标浏览器
})

Grid 前缀问题 #

javascript

// 默认不添加 Grid 前缀
require('autoprefixer')({
  grid: true  // 显式启用
})

与 CSS 预处理器配合 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    // Less/Sass 处理后
    require('autoprefixer')  // 添加前缀
  ]
}

移除不需要的前缀 #

javascript

require('autoprefixer')({
  remove: true  // 移除过时的前缀
})

最佳实践 #

1. 使用 browserslist 配置文件 #

text

# .browserslistrc
> 1%
last 2 versions
not dead

2. 与团队共享配置 #

json

{
  "browserslist": [
    "extends @company/browserslist-config"
  ]
}

3. 定期更新 #

bash

# 更新 Autoprefixer
npm update autoprefixer

# 更新 browserslist 数据
npx browserslist@latest --update-db

4. CI/CD 中检查 #

bash

# 检查浏览器覆盖率
npx browserslist --coverage

# 输出示例
# These browsers account for 92.4% of all users globally

版本历史 #

text

v10.x ─── 支持最新 CSS 特性
    │
v9.x  ─── 改进 Grid 支持
    │
v8.x  ─── 移除对 Node.js 旧版本支持
    │
v7.x  ─── 使用 Browserslist 4.x
    │
v6.x  ─── 支持 Grid 布局
    │
v5.x  ─── 重构核心逻辑

下一步 #

现在你已经深入了解了 Autoprefixer，接下来学习自定义插件开发开发自己的 PostCSS 插件！