gulp-autoprefixerをGridレイアウトに対応させる
最終更新日: Update!!
Gridレイアウトの際に下記のようなプロパティで指定した場合、IE用にベンダープレフィックスを付与させた指定が必要になるのですが、GulpのAutoprefixerで自動化させたいと思います。
【CSS】
gulp-autoprefixerはあくまでGulpの関連パッケージであるため、プレフィックスの付与が上手く反映されない場合もあります。そんな時には本家のAutoprefixerを使う方法も有効です。
こちらのAutoprefixerをGulpで使う場合には、合わせて「gulp-postcss」のパッケージが必要になりますので、下記の通りパッケージをインストールします。
.gird-item { grid-row: 2 / 3; grid-column: 1 / 2; }Gulpの設定ファイルであるgulpfile.jsにAutoprefixerの関数を記述していきますが、引数の値に「grid: true」を指定することで、Girdレイアウトに対応できるようになります。ちなみにGirdレイアウトを対象外にする場合はfalseを指定します。 【gulpfile.js】
const gulp = require('gulp'); const prefix = require('gulp-autoprefixer'); gulp.task('prefix', function () { return gulp.src(['gulp-prefixed/*.css']) .pipe(prefix({ browsers: [ "last 2 versions", "ie >= 11", "Android >= 4", "ios_saf >= 8" ], cascade: false, grid: "autoplace" // gridの値に"autoplace"を指定する })) .pipe(gulp.dest('gulp-prefixed/prefixed')); });これでGulpのタスクを実行することで、Gridレイアウトに対応したベンダープレフィックスが付与されますが、下記のようなメッセージが出る場合もあります。
autoprefixer: /Users/USERNAME/gulp-prefixed/sample.css:2:3: IE supports only grid-row with / and span. You should add grid: false option to Autoprefixer and use some JS grid polyfill for full spec support実はAutoprefixerのパッケージのバージョンが古い場合には、IE用のベンダープレフィックスに対応していない場合があります。そこでAutoprefixerのパッケージをアップデートします。その前にnpmのバージョンを確認し、アップデートが必要であれば事前に済ませておきましょう。 パッケージのアップデートについてはnpm-check-updatesを使います。詳しくは過去記事「npmでインストールしたパッケージのバージョンを管理する」にまとめていますのでこちらを参考にどうぞ。 アップデートを済ませたら、再度コマンドでAutoprefixerのタスクを実行すると、無事に下記のように出力されました。 【CSS】
.sample { -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2 / 3; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2; }
browserslistの指定をpackage.jsonに記述する
上記ではautoprefixerの引数で対象ブラウザの指定を行なっていますが、現在ではpackage.jsonで指定することができるようです。下記のように同じようなフォーマットでそのまま書くことができます。 【package.json】※一部抜粋{ ......... "devDependencies": { ......... }, "browserslist": [ "last 2 version", "ie >= 11", "iOS >= 8.1", "Android >= 4.4" ] }
gulp-autoprefixerではなく、Autoprefixerで対応する場合
$ npm install --save-dev autoprefixer gulp-postcssそして、Gulpのタスク内の処理に次のように追加します。 【gulpfile.js】※一部抜粋
const autoprefixer = require('autoprefixer'); const postcss = require('gulp-postcss'); ....... .pipe(postcss([ autoprefixer( { cascade: false, grid: "autoplace" } ) ])) .......これで、面倒なIE対応も自動化できるようになるのでGirdレイアウトの導入もハードルが下がるのではないでしょうか。Girdレイアウトについては下記の過去記事を参考にしてもらえればと思います。 (参考記事) 「CSSのGridレイアウトをマスターするためのまとめ(各種プロパティ編)」 「CSSのGridレイアウトをマスターするためのまとめ(基本編:マルチカラムレイアウト)」 「CSSのGridレイアウトをマスターするためのまとめ(応用編:グリッド・変則レイアウト)」
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories