CSSのベンダープリフィクスの付与はgulp-autoprefixerが便利です

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

前回の記事では、Macによるgulpの開発環境の構築について書きました。

記事の中で、gulpで実行させるタスクの例としてSCSSをコンパイルしてCSSにする方法を説明しましたが、今回はもう一歩だけ進んで、SCSSをコンパイルして出力されたCSSにさらに自動でベンダープレフィックスを付与してみたいと思います。

gulp-autoprefixerをインストール

CSSのコーディングをしていて、面倒に感じるのは、やはりベンダープレフィックスの付与です。

flexboxやtransformを使用するのであれば、ベンダープレフィックスは必要ですし、書いたコードにベンダープレフィックスをつける必要があるかをCan I Useで調べて、毎回記述するのは面倒です。更につけ忘れによるバグも心配です。

ただ、gulp-autoprefixerを使用すれば、そんな面倒な作業から解放されます。

gulp-autoprefixerは、CSSコードを解釈し、必要なベンダープレフィックスを自動で付与してくれるので、非常に便利です。

さっそく導入してみましょう。

まず、プロジェクトディレクトリを作成し、gulpを使用する環境を準備します。

環境を準備しましたら、gulp-autoprefixerプラグインをインストールします。

コンパイルするSCSSファイルを用意

つぎにgulpでコンパイルするSCSSファイルを用意します。 プロジェクトディレクトリであるwebprojectの配下に下記のような階層を作成します。

次にsassディレクトリ内にscssファイルを作成します。

今回は、flexboxを試してみましょう。

gulpfile.jsを作成

プロジェクトディレクトリ(webproject)に戻り、gulpで実行させるタスクを「gulpfile.js」に記述していきましょう。

gulpfile.jsのコードについては前回記事を参考していただきたいのですが、autoprefixerの部分については少し解説したいと思います。

autoprefixerのオプションについてですが、まず、browsersオプションで対応するブラウザのバージョンを指定します。
上記の例だとieは9以上、Androidは4以上、それ以外は最新3バージョンで必要なベンダープレフィックスが付与されます。

次にcascadeオプションですが、デフォルトはtrueになっているのですが、これをfalseにするとCSSが変に整形されないようになりますので、設定しておきましょう。(あとで確認するときに便利です)

では、gulpを実行してみます。

下記のようにCSSにベンダープレフィックスが自動に付与されたものが出力されていると思います。

本日は以上です。

参考

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*

CAPTCHA