postcss autoprefixer忽略网格属性与吞噬
问题描述:
我使用autoprefixer与吞噬添加浏览器呈现前缀属性。但似乎像autoprefixer忽略所有的网格属性。postcss 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/"));
});
答
此功能默认是关闭的。您需要grid: true
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) {}
,不会唉工作(看文章)。
感谢它的工作! –
不客气! – FelipeAls