オンライン版のautoprefier(https://autoprefixer.github.io/)で
対象ブラウザをie >= 11にして
下記scssを変換すると
scss
1.grid { 2 display: grid; 3 grid-template-columns: 1fr 1fr; 4 grid-template-rows: auto auto; 5 grid-gap: 20px; 6}
次のようなcssが出力されますが
css
1.grid { 2 display: -ms-grid; 3 display: grid; 4 -ms-grid-columns: 1fr 20px 1fr; 5 grid-template-columns: 1fr 1fr; 6 -ms-grid-rows: auto 20px auto; 7 grid-template-rows: auto auto; 8 grid-gap: 20px; 9}.grid > *:nth-child(1) { 10 -ms-grid-row: 1; 11 -ms-grid-column: 1; 12}.grid > *:nth-child(2) { 13 -ms-grid-row: 1; 14 -ms-grid-column: 3; 15}.grid > *:nth-child(3) { 16 -ms-grid-row: 3; 17 -ms-grid-column: 1; 18}.grid > *:nth-child(4) { 19 -ms-grid-row: 3; 20 -ms-grid-column: 3; 21}
gulpのautoprefixerだと
.grid > *:nth-child(1)部分が出力されず
下記のようになってしまいます。
そしてIE11の表示が崩れます。
css
1.grid { 2 display: -ms-grid; 3 display: grid; 4 -ms-grid-columns: 1fr 1fr; 5 grid-template-columns: 1fr 1fr; 6 -ms-grid-rows: auto auto; 7 grid-template-rows: auto auto; 8 grid-gap: 20px; 9}
gulpから呼び出すautoprefixerとオンライン版では出力が異なるのがデフォルトなんでしょうか?
package.json
json
1 "gulp": "^4.0.0", 2 "gulp-sass": "^4.0.2", 3 "gulp-postcss": "^8.0.0", 4 "autoprefixer": "^9.4.3",
gulpfile.jsのautoprefixerにはgird:trueをつけています。
javascript
1gulp.task("default", function () { 2 return gulp.src("src/style.css") 3 .pipe(sass({ outputStyle: "expanded" })) 4 .pipe(postcss([ 5 autoprefixer({ 6 browsers: ["ie >= 11"], 7 grid: true 8 }) 9 ])) 10 .pipe(gulp.dest("dist")); 11});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/19 08:26