Share

こんにちは、ますだです。

今回は僕のコーディング環境を紹介する予定でしたが、予定を変えてお送りします。

ベンダープレフィクス対応は大変

CSSのコーディングをする際、問題になってくるのがブラウザ間での表示の差異です。

これを解決するために、通常、「-webkit-」や「-ms-」のベンダープレフィクス(接頭辞)を使用して、各ブラウザに対応する必要があります。

「display: flex;」を例をあげるとこんな感じ。

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

POINT!

ベンダープレフィクスの種類
-webkit-:Google ChromeやSafari、Microsoft Edge用
-moz- :Firefox用
-ms- :Internet Explorer用
-o- :Opera用

1箇所だけであればそこまで問題ないかもしれませんが、そんなことはありえません。

その全てを手動で行おうとすると、単に作業量が増えてミスも増大するので、やるべきではありません。ただただ消耗するだけです。

そこで今回はベンダープレフィクスを自動で付与してくれる「gulp-autoprefixer」をご紹介します。

今回のフォルダ構成は下記の通りです。

node_modules
gulpfile.js
package.json
dev  // 開発フォルダ
  └ css
    └ style.css
dest  // 出力フォルダ
  └ css

gulp-autoprefixerを設定する

名前にもあるように、今回も私の大好きなgulpを使用します。

このモジュールは、CSSプロパティがブラウザに対応しているか確認するサイトCan I Useの情報を元に作成されています。

Can I use… Support tables for HTML5, CSS3, etc

(他にもwebpackで使う方法もあるみたいですが、それは別の機会で)

セットアップ、モジュールのインストール

では例のごとく、インストールから行います。

プロジェクトディレクトリに移動後、コマンドを使って設定を行なっていきます。

まずは初期化

npm init -y

続いて必要なモジュールをインストールします。

npm i -D gulp gulp-autoprefixer

これで完了です。

gulpfile.jsでタスクを定義

gulpfile.jsを作成して下記のように設定を行います。

const gulp         = require('gulp');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function () {
    return gulp.src(['dev/css/style.css'])
        .pipe(autoprefixer({
          overrideBrowserslist: ['last 2 version', 'iOS >= 9', 'Android >= 4.4'],
            cascade: false
        }))
        .pipe(gulp.dest('dest/css/'));
});

流れを説明すると、

1.ベンダープレフィクスをつけたいファイル「dev/css/style.css」を指定します

2.pipeを使ってautoprefixerを設定します。

3.「overrideBrowserslist」で対象となるブラウザを指定します。今回は、下記を指定しています。

ブラウザの最新2バージョンとiOS9以上、Androidは4.4以上
※ 他にも「日本でシェア5%以上あるブラウザを対象」などの設定を行うこともできます。

4.出力先を「dest/css/」で指定します。

これでタスクの定義が完了です。早速実行します。

npx gulp

ファイルを見てみましょう。元のファイルはこんな感じ。

div{
  display: flex;
  align-items: center;
  justify-content: center;
}

出力されたファイルはこんな感じです。

div{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

各プロパティに-webkit-や-ms-が付与されているのがわかるかと思います。

まずは「display:flex」で検証しましたが、「display:grid」の場合は、下記のオプションをautoprefixerの部分(cascade: falseの後)に追加する必要があります。

grid: true

これで実行すると、

div{
  display: grid;
}

div{
  display: -ms-grid;
  display: grid;
}

gridにもベンダープレフィクスをつけることができました。

その他のオプションについては、必要に応じてgithubで確認して追記しましょう。

GitHub – postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use

ブラウザ対応が劇的に楽になるのでぜひ導入を!

「どのプロパティにベンダープレフィクスが必要か」など、いちいち覚えておくのは面倒ですし、そもそも覚えきれないので、自動付与した方が効率的ですし確実です。

まだ導入していない方はぜひ導入してみてください。

株式会社 ヤップ エンジニア

升田 圭亮

ヤップのコーディング、プログラミング担当。日々学んだことを発信。

記事中の画像データを使いたい!や、この記事もっと詳しく書いて欲しいなどのご要望、ご意見は上記お問合せをクリック、もしくはお電話ください。

06-6445-7317