Autoprefixer の使い方完全ガイド【CSS ベンダープレフィックス自動付与】

一言でいうと

Autoprefixer は、CSSを解析し Can I Use のブラウザ対応データに基づいてベンダープレフィックス（-webkit-、-moz- など）を自動付与する PostCSS プラグインです。Google が推奨し、Twitter や Alibaba でも採用されています。

どんな時に使う？

• ベンダープレフィックスを手書きしたくない時 — ::placeholder や flex、grid など、ブラウザごとに異なるプレフィックスを自動で補完してくれます
• 対応ブラウザを変更した際にCSSを自動調整したい時 — Browserslist の設定を変えるだけで、不要なプレフィックスの削除・必要なプレフィックスの追加が行われます
• ビルドパイプラインにCSS後処理を組み込みたい時 — webpack、Vite、Gulp、PostCSS CLI など主要なビルドツールとシームレスに統合できます

インストール

# npm
npm install autoprefixer postcss --save-dev

# yarn
yarn add autoprefixer postcss --dev

# pnpm
pnpm add autoprefixer postcss -D

PostCSS プラグインとして動作するため、postcss も併せてインストールが必要です。

基本的な使い方

PostCSS 設定ファイル（postcss.config.js）での利用

最も一般的な使い方は、postcss.config.js にプラグインとして登録するパターンです。

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

Browserslist の設定

Autoprefixer は Browserslist の設定を参照して、どのブラウザ向けにプレフィックスを付与するかを決定します。package.json に記述するのが最も簡単です。

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

もしくはプロジェクトルートに .browserslistrc を配置します。

> 1%
last 2 versions
not dead

Node.js API での利用（TypeScript）

import postcss from 'postcss';
import autoprefixer from 'autoprefixer';

const inputCss = `
::placeholder {
  color: gray;
}

.container {
  display: flex;
  align-items: center;
}

.image {
  width: stretch;
}
`;

async function processCss(css: string): Promise<string> {
  const result = await postcss([autoprefixer]).process(css, {
    from: undefined // ソースマップ不要の場合
  });

  // 警告があれば出力
  result.warnings().forEach(warn => {
    console.warn(warn.toString());
  });

  return result.css;
}

processCss(inputCss).then(output => {
  console.log(output);
});

出力例（対象ブラウザによって変動）：

::-moz-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.image {
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
}

Vite での利用

Vite は内部で PostCSS をサポートしているため、postcss.config.js を配置するだけで動作します。

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

webpack + postcss-loader での利用

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')
                ]
              }
            }
          }
        ]
      }
    ]
  }
};

よく使う Autoprefixer のオプション API

Autoprefixer はプラグイン初期化時にオプションオブジェクトを受け取ります。

1. overrideBrowserslist — 対象ブラウザの直接指定

Browserslist の設定ファイルを使わず、プラグイン側で直接ブラウザを指定します。

import autoprefixer from 'autoprefixer';

const plugin = autoprefixer({
  overrideBrowserslist: ['last 2 Chrome versions', '> 5%', 'Firefox ESR']
});

注意: 通常は package.json の browserslist や .browserslistrc で管理する方が、他のツール（Babel など）とも設定を共有できるため推奨されます。

2. grid — CSS Grid のプレフィックス制御

IE 向けの CSS Grid プレフィックス（-ms-）の付与を制御します。

const plugin = autoprefixer({
  grid: 'autoplace' // 'autoplace' | 'no-autoplace' | true | false
});

import postcss from 'postcss';
import autoprefixer from 'autoprefixer';

const css = `
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
`;

const result = await postcss([
  autoprefixer({ grid: 'autoplace' })
]).process(css, { from: undefined });

console.log(result.css);

3. remove — 不要なプレフィックスの削除制御

デフォルトでは、対象ブラウザに不要な古いプレフィックスを自動削除します。この動作を無効にできます。

const plugin = autoprefixer({
  remove: false // 既存のプレフィックスを削除しない
});

import postcss from 'postcss';
import autoprefixer from 'autoprefixer';

// 入力CSSに古いプレフィックスが含まれている場合
const css = `
.box {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
`;

// remove: true（デフォルト）なら不要な -webkit-border-radius は削除される
const result = await postcss([
  autoprefixer({ remove: true })
]).process(css, { from: undefined });

console.log(result.css);

4. flexbox — Flexbox プレフィックスの制御

IE 向けの Flexbox プレフィックスの付与を制御します。

const plugin = autoprefixer({
  flexbox: 'no-2009' // true | false | 'no-2009'
});

const result = await postcss([
  autoprefixer({ flexbox: 'no-2009' })
]).process('.box { display: flex; }', { from: undefined });

5. ignoreUnknownVersions — 未知のブラウザバージョンのエラー抑制

Browserslist で指定したブラウザバージョンが Can I Use データに存在しない場合のエラーを抑制します。

const plugin = autoprefixer({
  ignoreUnknownVersions: true
});

コメントによる制御

オプションではありませんが、CSS コメントで特定のブロックのプレフィックス付与を制御できます。

/* autoprefixer: off */
.no-prefix {
  appearance: none; /* プレフィックスが付与されない */
}

/* autoprefixer: on */
.with-prefix {
  appearance: none; /* プレフィックスが付与される */
}

/* autoprefixer: ignore next */
.skip-next {
  transition: all 0.5s; /* この宣言のみスキップ */
}

類似パッケージとの比較

postcss-preset-env はプレフィックス付与に加え、CSS の新しい構文（ネスティング、カスタムメディアクエリなど）のトランスパイルも行います。プレフィックスだけが目的なら Autoprefixer 単体で十分です。

注意点・Tips

1. Browserslist の設定を必ず確認する

Autoprefixer の出力は Browserslist の設定に完全に依存します。意図しないプレフィックスが付与される（またはされない）場合は、まず Browserslist の設定を確認してください。

# 現在の対象ブラウザを確認
npx browserslist

2. -webkit- などを手書きしない

Autoprefixer を導入したら、ソースCSSにベンダープレフィックスを書く必要はありません。むしろ手書きすると、remove: true（デフォルト）の場合に削除される可能性があります。

/* ❌ Bad: 手書きプレフィックス */
.box {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* ✅ Good: プレフィックスなしで記述 */
.box {
  transform: rotate(45deg);
}

3. grid オプションはデフォルト無効

IE 向けの CSS Grid プレフィックスはデフォルトでは付与されません。IE 対応が必要な場合は明示的に grid: 'autoplace' を設定してください。ただし、IE のサポート終了に伴い、多くのプロジェクトでは不要です。

4. デバッグには info() を活用

Autoprefixer がどのプレフィックスを付与するかを確認できます。

import autoprefixer from 'autoprefixer';

console.log(autoprefixer().info());
// Browsers, Properties, Selectors の対応状況が出力される

5. CSS-in-JS との併用

styled-components や Emotion などの CSS-in-JS ライブラリは、多くの場合独自にプレフィックスを付与します。二重にプレフィックスが付かないよう、併用時は注意してください。

6. パフォーマンスへの影響はほぼない

Autoprefixer はビルド時にのみ動作するため、ランタイムパフォーマンスへの影響はゼロです。ビルド時間への影響も、通常のプロジェクト規模では無視できるレベルです。

まとめ

Autoprefixer は、ベンダープレフィックスの管理を完全に自動化してくれる PostCSS プラグインです。Can I Use のデータに基づいて必要なプレフィックスだけを付与し、不要なものは削除してくれるため、CSSの保守性が大幅に向上します。

Browserslist と組み合わせることで、対象ブラウザの変更にも柔軟に対応でき、モダンなフロントエンド開発では事実上の必須ツールといえるでしょう。