CSS Academy · 课时

Autoprefixer 与 cssnano

Q: 「Autoprefixer 与 cssnano」这节课中我会学到什么？

使用 Autoprefixer 自动添加厂商前缀，并使用 cssnano 压缩 CSS 输出。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Autoprefixer 自动添加厂商前缀，并使用 cssnano 压缩 CSS 输出。

Autoprefixer 与 cssnano 是 CoddyKit 上的免费 CSS Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 Autoprefixer？

Autoprefixer 是一个 PostCSS 插件，会根据您需要支持的浏览器以及 Can I Use 中的数据，自动为 CSS 属性添加浏览器厂商前缀（-webkit-、-moz-、-ms-）。

Autoprefixer 的工作原理

您可以编写不带前缀的标准 CSS。Autoprefixer 会读取您的 Browserslist 配置，并在构建过程中为目标浏览器添加所需的前缀。

<div class="flex">Flexbox row (display: flex — Autoprefixer would add -webkit-box/-ms-flexbox for older targets)</div>

Browserslist 配置

Autoprefixer 使用 Browserslist 来确定目标浏览器。请在 .browserslistrc 或 package.json 中定义：

# .browserslistrc
> 1%
last 2 versions
not dead

现代 CSS 很少需要前缀

截至 2024 年，大多数现代 CSS（Grid、Flexbox、自定义属性和变换）不需要前缀，或只需要极少的前缀。Autoprefixer 对 appearance、user-select 等前沿属性以及较新的 API 最有用。

将 Autoprefixer 添加到 PostCSS

在 PostCSS 配置中加入 autoprefixer：

// postcss.config.js
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [autoprefixer]
};

什么是 cssnano？

cssnano 是一个 PostCSS 插件，通过删除空白字符、注释和冗余声明，并应用安全的优化来压缩 CSS，从而生成尽可能小的 CSS 文件。

cssnano 预设

cssnano 提供了多种优化预设：

default：安全的压缩操作（删除空白字符、注释和重复内容）
advanced：更激进的优化，可能会改变优先级（请谨慎使用）

// postcss.config.js
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    cssnano({ preset: 'default' })
  ]
};

cssnano 的功能

cssnano 的优化包括：

删除空白字符和注释
将颜色转换为最短形式（#ffffff → #fff）
合并相同的规则
删除冗余属性
缩短零值（0px → 0）

在配置中组合两者

同时使用这两个插件的生产环境 PostCSS 配置：

module.exports = {
  plugins: [
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('cssnano')({ preset: 'default' })
  ].filter(Boolean)
};

使用压缩生成源代码映射

在开发构建中使用 cssnano 时，请始终生成源代码映射。它们会将压缩后的输出映射回源 CSS，以便在 DevTools 中调试。

cssnano 的替代方案

其他 CSS 压缩工具包括：clean-css、lightningcss（基于 Rust，速度非常快），以及构建工具内置的压缩工具，例如 Vite 的内部 CSS 压缩工具（使用 esbuild）。

快速检查

Autoprefixer 根据什么来确定要添加到 CSS 中的浏览器厂商前缀？

回顾

Autoprefixer 会根据 Browserslist 中的目标浏览器自动添加浏览器厂商前缀，因此无需手动编写前缀。cssnano 通过删除空白字符和注释并应用安全优化来压缩 CSS。在生产环境的 PostCSS 流水线中同时使用两者。现代 CSS 所需的前缀比以前更少，请根据实际目标浏览器进行验证。

常见问题解答

「Autoprefixer 与 cssnano」课时是免费的吗？

是的 — 「Autoprefixer 与 cssnano」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「Autoprefixer 与 cssnano」这节课中我会学到什么？

使用 Autoprefixer 自动添加厂商前缀，并使用 cssnano 压缩 CSS 输出。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「Autoprefixer 与 cssnano」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy