CSSプレフィックスの入力に時間を無駄にしない――Autoprefixerで自動化しよう

ブラウザは歴史的に、CSS開発者にとって扱いにくい存在でした。特に古いブラウザや、登場したばかりの実験的なCSSプロパティでは、ブラウザごとの非互換性が多く発生していました。この問題を回避するには、特定のCSSプロパティにベンダープレフィックス（接頭辞）を手動で付与し、すべてのブラウザでUIが同じように表示され、同じように動作するように調整する必要がありました。

flexboxに必要だった膨大なプレフィックス

その代表例がCSSのflexboxプロパティです。すべてのモダンブラウザに加えて、flexboxが部分的にしかサポートされていないIE10・IE11でも動作させるには、なんと4つのプレフィックスが必要でした。

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

プレフィックスは暗記するものではなく、自動化するもの

しかし現代では、優れたツールが揃っているため、プレフィックスを手入力する必要はありません。むしろ、こうしたプレフィックスを暗記しようと1秒たりとも無駄にすべきではありません。それは貴重な頭脳リソースの浪費にすぎません。

代わりに、AutoprefixerのようなツールをWebpackなどのタスクランナーやバンドラと組み合わせて使用しましょう。導入も簡単で、npm経由でPostCSSのプラグインとして追加するだけで利用できます。

npm install autoprefixer postcss --save-dev

Autoprefixerを使えば、CSSプロパティへのプレフィックス付与について一切悩む必要がなくなります。本番サーバーへ最新のCSSをデプロイする前に、ビルド後処理（ポストプロセス）として必要なプレフィックスをすべて自動的に追加してくれるからです。対象ブラウザの範囲もBrowserslistの設定で柔軟に指定できるため、プロジェクトの要件に合わせた最適な出力が得られます。

手作業によるプレフィックス管理は、書き忘れやメンテナンス漏れの原因にもなります。ツールに任せられる作業はツールに任せ、開発者は本来注力すべきデザインやロジックの実装に集中しましょう。