postcss autoprefixer忽略網格屬性與吞噬

Question

我使用autoprefixer與吞噬添加瀏覽器呈現前綴屬性。但似乎像autoprefixer忽略所有的網格屬性。

gulp.task('postcss',function() { 
 

 
    console.log("Running postcss task"); 
 
    var plugins = [autoprefixer({browsers: "last 5 versions"}),orderValues()]; 
 
    return gulp.src('www/css/*.css') 
 
       .pipe(postcss(plugins,{ map:true , inline:true })) 
 
       .pipe(gulp.dest("www/css/")); 
 

 
});

Answer 1

此功能默認是關閉的。您需要grid: true

Documentation of Autoprefixer

Autoprefixer有4個特點，它可以通過選項來啓用或禁用，以使其能夠在給Autoprefixer選項：

• 支持：false將禁用@支持參數前綴。
• flexbox：false將禁用flexbox屬性前綴。或flexbox：「no-2009」只會爲最終和IE版本的規範添加前綴。
• remove：false將禁用清除過時的前綴。
• grid：true將爲IE啓用網格佈局前綴。

的決定是在Twitter（問題#817）一表決後發言和背後的原因是，在IE10-11和邊緣12-15實施的舊電網規範是從現代的方式也不同一個以Chr，Fx，Saf（？）和傳入邊緣16實現。
您需要更多的手動工作才能在IE10-Edge 15上獲得相同的結果，可以是回退或抑制使用不受支持的屬性（grid-area等）和值（repeat()我認爲等）：在這兩種情況下，它不能由Autoprefixer自動完成，所以不行，默認禁用。

編輯： 去比你的問題越走越回答：「我能做些什麼瀏覽器支持與IE10推出的老第一網格佈局規範嗎？」：

• useful table雷切爾安德魯的「IE 10的邊緣15「與」現代瀏覽器和Edge 16+「網格屬性進行比較，如果您想手動執行或驗證Autoprefixer是否正確執行此操作。
• ，如果你想對那些2類瀏覽器的獨立的CSS，可以由Morten蘭德 - 亨德里克森使用這種寶石在SmashingMag Building Production-Ready CSS Grid Layouts Today文章： @supports (grid-area: auto) { /* */ }

但不@supports (display: grid) {}，不會唉工作（看文章）。