When we deal with web pages, we often encounter compatibility problems. There are two major directions on this issue: Screen Responsiveness & Browser Compatibility. There are many ways to use the screen, including frames and the like, but browser compatibility does not have a frame with a number. In our daily processing, we will use attribute compatibility (*background, _background...), prefix compatibility (-webkot-, -oz-, -o-...) and annotation compatibility ([if it ie...] ). There are many methods, but we have to add these attributes one by one, which will inevitably slow down our efficiency. In this case, PostCSS came into being. Then start our learning journey:
One: Preparations:
To use PostCSS, you need to ensure that npm, node, gulp,
First create a new folder, I named it Postcss1, and create a new package.json in the file directory (used to save the installed plugin information), gulpfle.js (used to write commands), dest file (used to store the processed css file) and src file (used to store the original css file), as shown below:
Two: installation of gulp and postcss related plugins
Open your command command small black window (window+R), enter CMD, and then go to your root directory, as shown below:
Then we enter npm install gulp --save-dev, this step is the installation of gulp;
After the installation is successful, the following installation information will appear in package.json:
The file directory of node_modules will appear in the root directory
Well, congratulations, lad. You have successfully installed, and then we will install postcss and related plugins,
Continue to type in the command line: npm install postcss autoprefixer cssnext precss --save-dev
After the installation is successful, the information in package.json will become:
The relevant plug-ins have been successfully installed; then proceed to the third step:
Three: Configure gulpfle.js:
In the js file, we first create the relevant variables:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');
我们现在可以设置一个任务，让PostCSS读取CSS原文件并且处理它：
gulp.task('css', function () {
var processors = [autoprefixer, cssnext, precss];
return gulp.src('./src/*.css').pipe(postcss(processors)).pipe(gulp.dest('./dest'));
});
我们一起来看一下上面的代码。在第一行，设置了一个任务名叫css。这个任务将会执行一个函数，同时在这个函数中创建了一个名为processors的数组。将上面创建的变量添加到数组当中，这里将插入我们想使用的PostCSS插件。
在processors数组后面，我们指定了需要处理的目标文件，即src目录中的任何CSS文件。
这里面使用了两个.pipe()函数，设置postcss()执行PostCSS，并且给postcss()传递processors参数，后面会告诉PostCSS要使用哪个插件。
接下来的第二个.pipe()函数，指定结过PostCSS处理后的CSS放置在dest文件夹中。
然后我们需要一个检测的函数，当原始文件改变时，处理文件也跟着发生相关的改变，代码如下：
gulp.task('watch', function () {
gulp.watch('./src/*.css', ['css']);
});
gulp.task('default', ['watch', 'css']);
四：运行：
我们只需要在命令行里输入gulp css即可运行：
src文件下的css：
执行命令行dest下面的css:
IE-“无法浏览网页” 教你十招解决疑难杂症
“无法浏览网页” 教你十招解决疑难杂症 相信大家也有遇到过像IE不能上网浏览的问题.下面就来给大家介绍一下常见原因和解决方法: 一.网络设置的问题 这种原因比较多出现在需要手动指定IP.网关.DNS服 ...
IE内嵌google chrome frame解决浏览器兼容问题
IE内嵌google chrome frame解决浏览器兼容问题 http://www.cnblogs.com/xwdreamer/archive/2013/12/17/3477776.html 参 ...
第四节：教你如何快速让浏览器兼容ES6特性
写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...
js复制当前url地址解决浏览器兼容
1.网上搜索的js复制链接代码,好像只能支持ie浏览器,其他浏览器不支持, 案例: var url=12; if(window.clipboardData){ wi ...
教你如何快速让浏览器兼容es6
写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用户使用 ...
解决浏览器兼容ES6特性
为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...
【转】使用Chrome Frame，彻底解决浏览器兼容问题
本文转自http://www.ryanbay.com/?p=269,感谢该作者的总结 X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的. 通过在meta中设置 ...
vue cli创建的项目 当你后期使用了ES6语法，如何解决浏览器兼容问题
最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...
在不同的浏览器使用不同的css样式,解决浏览器兼容问题
区别IE6与FF: background:orange; *background:blue; 区别IE6与IE7: background:green !import ...
随机推荐
MVC思想
MVC英文即Model-View-Controller,即把一个应用的输入.处理.输出流程按照Model.View.Controller的方式进行分离,这样一个应用被分成三个层--模型层.视图层.控制 ...
Dapper学习笔记(2)-链接引用
在研究Dapper源码时发现Dapper NET45类库中的SqlMapper.cs文件前面有个蓝色的箭头图标,发现在Dapper NET45文件夹下根本不存在SqlMapper.cs文件,其文件属性 ...
Android搭建junit测环境
在AndroidManifest.xml文件中增加两个东西,分别是: 1.uses-library ,位于application里面. 2.instrumentation,与application同级 ...
C语言中的 extern 关键字
今天在 BLE 中看到很多 extern 关键字,现在总结一下: extern 关键字主要用于在一个c文件中要用到另一个c文件中的变量或者函数. example: #extern_base.c ; # ...
使用ExposedObject对Asp.net MVC中匿名类型的JsonResult做单元测试
返回JsonResult是MVC中的常见返回值类型,而且简单方便的方式是结合匿名类型一起使用. 比如: public ActionResult PreviewEmail() { …… return J ...
css学习之color: window和color: currentColor
一.易被忽略的属性 color: currentColor color: window 看完之后感觉眼前一亮,有的我之前根本没有用过,甚至都不知道有color: currentColor这么个东西 ...
比较和排序 IComparable And IComparer
1.List默认排序 为类创建默认排序实现IComparable,此代码的实现为年龄升序 using System; using System.Collections.G ...
jQuery克隆DOM节点
jQuery克隆DOM节点
JAVA_SE基础——52.匿名内部类
电信的电箱烧了,害我断了2天网,真拿命,耽误了 Java匿名内部类的总结: 没有名字的内部类.就是内部类的简化形式.一般只用一次就可以用这种形式.匿名内部类其实就是一个匿名子类对象.想要定义匿名内部类 ...
Linux starts jmeter (23), executes ./jmeter.sh error solution (reproduced)
Reprinted from http://www.cnblogs.com/yangxia-test 1.l-bash: ./jmeter.sh: Permission denied Solution: Change the execution permission of jmeter.sh...