PostCSS: 跨浏览器兼容性

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 });
时间: 2024-11-03 05:44:06

PostCSS: 跨浏览器兼容性的相关文章

牛人推荐的跨浏览器兼容性总结

牛人推荐的跨浏览器兼容性总结 [复制链接]        发送短消息 UID2427精华4积分239共享分12442 威望1285 查看公共资料 搜索主题 搜索帖子 灵雨飘零  技术总监 组别管理员 生日帖子470精华4积分239共享分12442 威望1285 在线时间28275注册时间2013-11-24  1# 字体大小: t T  发表于 2013-12-26 08:27 |只看楼主 一. CSS样式兼容 1. FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多

Event对象跨浏览器兼容性写法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

解决SVG跨浏览器兼容性问题

Raphael JS:SVG/VML+JS实现跨浏览器的矢量图形实现方案 http://blog.csdn.net/tiewen/article/details/8535748 SVG那些小事儿 http://www.w3cfuns.com/article-5601506-1-1.html Raphaël—JavaScript Library http://raphaeljs.com/ Raphael JS:SVG/VML+JS实现跨浏览器的矢量图形实现方案

python+selenium实现跨浏览器兼容性测试

python https://www.python.org/ python是一种脚本语言, 易学易用,可以助你快速实现业务逻辑,高效集成系统. ----- http://zh.wikipedia.org/zh-cn/Python: 它的语法简单,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块. Python经常被用于Web开发.比如,通过mod_wsgi模块,Apache可以运行用Python编写的Web程序.使用Python语言编写的Gunicor n作为Web服务器,也能够

CSS实现跨浏览器的box-shadow盒阴影效果(2)

一.前言 我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章,本文虽然题目类似,但是核心部分是有差异的.前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜,但是使用的是shadow滤镜,这种滤镜的效果很牵强,效果过渡不自然,见下图: 您可以狠狠地点击这里:IE下阴影不自然demo 而本文实现的IE下的盒阴影效果就相对非常自然,而且还支持内阴影的UI表现.到底是如何实现的,究竟效果如果,请继续浏览. 二.浏览器纯爷们模式下的支持情况 CSS3 box-shadow属性基本上所有的现

[转]使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE

跨浏览器兼容性是网页制作永恒的难题.别看各浏览器厂商都努力在自己的浏览器中实现新式的css3标准特性,但都是以扩展样式的形式提供的, 所以在未来一段时间里,样式表里的-moz-,-webkit-,(-ms-,-o-)等等前缀将长期存在. 另外,虽说各家有志于扩张自己市场的浏览器厂商都提供了css3的新特性,但鉴于其老式版本的浏览器依然存在于用户的主机上(主要是微软旗下的ie6,7,8),除了考虑各家浏览器之间的兼容性外,我们还有必要向前兼容老式浏览器. 这些老式浏览器(低版本ie)对于css3的

常见的浏览器兼容性问题总结

1.https://blog.csdn.net/zhuwanwanshay/article/details/51882923 (常见的浏览器兼容性问题总结) 2.http://www.jb51.net/article/55193.htm (css与javascript跨浏览器兼容性总结) 3.https://blog.csdn.net/helloxiaoliang/article/details/51362107 (移动页面点击穿透问题解决方案) 4.https://blog.csdn.net/

如何在跨浏览器测试中提高效率

Web端应用测试主要障碍之一就是在不同的浏览器上"测试他们的网站/应用程序",也称为"跨浏览器测试"或者"兼容性测试". 浏览器和浏览器版本很多(Google Chrome,Mozilla Firefox,Internet Explorer,Microsoft Edge,Opera,Yandex等),可以通过多种设备(通过台式机,笔记本,智能手机,平板电脑等)访问网站/应用. )以及可能用于访问网站的多种操作系统(Windows,MacOS,Li

EventUtil——跨浏览器的事件对象

前言:什么是EventUtil? 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序 习惯上,这个方法属于一个名为EventUtil的对象 编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 本文将围绕着EventUtil对象展开,并提供该通用对象代码以作参考分享 文章主要内容参考书籍为<JavaScript高级程序设计>([美]Nicholas C.Z