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) {}，不会唉工作（看文章）。