display: gridがieでレイアウト崩れする対策

年末からの怒涛の忙しさラッシュも台風の目に入り、昨日・今日はのほほんと生きています。
来週からまた忙しさの暴風雨に入るのでひとときの休息です。

さて、毎回のごとく言っている「ie死ね!」ですが、今年も早速キーーーーーーってなりました。

「display: grid」の際にieだとレイアウトが崩れるのなんとかしぃよホント…。

うちはスタイルシートの記述方法として今の所は「cssnext」を採用しており、だいたいのベンダープレフィックスは自動で付加してくれるんで安心してたんですが、gridは範疇にないんですよね。以前も同じことあったのにすっかり忘れてました。

こんなのいちいち対応してたらキリがないし非効率なので、postcssする際に「autoprefixer」を設定して自動付加するようにしておきました。

ちなみに、うちはビルド時に色々もりもり命令してるので煩雑にならないようにcssの変換はwebpackでまとめずにgulpで行ってます。jsのみwebpackですね!
ここらの処理はいつもどうしようって悩むところですね。

const autoprefixer = require('autoprefixer');
const plugins = [
	cssimport,
	cssnext({
		browsers: AUTOPREFIXER_BROWSERS,
	}),
	autoprefixer({grid: true}), // ieのグリッド対応,
	cssnano({
		autoprefixer: false,
	}),
];

gulp.src(src.css)
	.pipe(gulpif(!isProduction, sourcemaps.init()))
	.pipe(postcss(plugins))
	.pipe(gulpif(!isProduction, sourcemaps.write()))
	.pipe(gulp.dest(dest.css));

とりあえず今回はautoprefixerさまさまでした。

ここらの仕様統一はしっかりせぇよ。


※実はautoprefixerのgulp版がgulp-autoprefixerだと思い、なんか上手くいかないってなってたのはいい思い出。gulp-autoprefixerは全然更新されてなくて、そもそも別もんなんですね。紛らわしい。

こちらの記事もおすすめ

ひきこもりCEO
この記事を書いた人

ひきこもりCEO

社内に引きこもっているが、スタジオパプリカのCEO。ゲームやアニメ、テニスが好き。 同じことを二度するのは無駄だから嫌い。無駄無駄。