首页 > 代码库 > PostCSS: 跨浏览器兼容性

PostCSS: 跨浏览器兼容性

2024-10-17 16:46:01   212人阅读

PostCSS工具

如果你不想从头开始手动设置您的项目，你可以下载本教程中提供的源码附件，提取Gulp或Grunt项目到一个空的文件夹中。

然后在命令终端运行：npm install。

安装插件

不管你是使用Gulp还是Grunt，在你项目的目录下运行下面的命令：

npm install autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change --save-dev

现在已经安装好插件了，下面我们继续将这些插件加载到您的项目中。

通过Gulp加载插件

如果你使用的是Gulp，在你的gulpfile.js加载这些变量：

var autoprefixer = require(‘autoprefixer‘);
var color_rgba_fallback = require(‘postcss-color-rgba-fallback‘);
var opacity = require(‘postcss-opacity‘);
var pseudoelements = require(‘postcss-pseudoelements‘);
var vmin = require(‘postcss-vmin‘);
var pixrem = require(‘pixrem‘);
var will_change = require(‘postcss-will-change‘);

并且将这些变量的名称添加到你的processors数组中：

var processors = [
    will_change,
    autoprefixer,
    color_rgba_fallback,
    opacity,
    pseudoelements,
    vmin,
    pixrem
];

做一个快速测试，在命令终端运行gulp css，检查style.css文件有没有放到dest文件夹中。

【参考文章1】

【参考文章2】

package.json 代码：

 1 {
 2   "name": "gulppostcssstarter",
 3   "version": "1.0.0",
 4   "description": "Basic starter project for PostCSS use via Gulp",
 5   "author": "Kezz Bracey",
 6   "license": "MIT",
 7   "devDependencies": {
 8     "autoprefixer": "^5.2.0",
 9     "gulp": "^3.9.0",
10     "gulp-postcss": "^5.1.10",
11     "pixrem": "^1.3.1",
12     "postcss-color-rgba-fallback": "^1.3.1",
13     "postcss-opacity": "^2.0.1",
14     "postcss-pseudoelements": "^2.2.0",
15     "postcss-vmin": "^1.0.0",
16     "postcss-will-change": "^0.2.0"
17   }
18 }

gulpfle.js的配置：

 1 var gulp = require(‘gulp‘);
 2 var postcss = require(‘gulp-postcss‘);
 3 
 4 var autoprefixer = require(‘autoprefixer‘);
 5 var color_rgba_fallback = require(‘postcss-color-rgba-fallback‘);
 6 var opacity = require(‘postcss-opacity‘);
 7 var pseudoelements = require(‘postcss-pseudoelements‘);
 8 var vmin = require(‘postcss-vmin‘);
 9 var pixrem = require(‘pixrem‘);
10 var will_change = require(‘postcss-will-change‘);
11 
12 gulp.task(‘css‘, function () {
13     var processors = [
14         will_change,
15         autoprefixer({
16             browsers: [‘> 1%‘,‘last 2 versions‘, ‘ie >=8‘, ‘Firefox > 20‘, ‘Chrome > 31‘]
17         }),
18         color_rgba_fallback,
19         opacity,
20         pseudoelements,
21         vmin,
22         pixrem
23     ];
24     return gulp.src(‘./src/*.css‘)
25         .pipe(postcss(processors))
26         .pipe(gulp.dest(‘./dest‘));
27 });

 

PostCSS: 跨浏览器兼容性


联系
我们