autoprefixer 处理css3的前缀
css3书写的时候,有时需要加上前缀,比如“-webkit-*、-moz-*”等等,但可能会写的不完整或者是写错,也很麻烦,那么autoprefixer可以处理这些。
autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。比如:
a{
display : flex;
}
处理后:
a{
display : -webkit-box;
display : -webkit-flex;
display : -moz-box;
display : -ms-flexbox;
display : flex;
}
autoprefixer同样会清理过期的前缀,如:
div{
-webkit-border-radius: 5px;
border-radius: 5px;
}
编译后:
div{
border-radius: 5px;
}
autoprefixer在编译css的同时,也会修复语法差异。这种方式,CSS是基于最新W3C规范产生。
autoprefixer利用npm安装配置可参考:https://www.npmjs.com/package/autoprefixer-loader
autoprefixer同时也可以在多种构建工具中使用,如webpack、grunt、glup,可参考:https://github.com/postcss/autoprefixer进行配置
参考文章:http://www.cnblogs.com/aNd1coder/archive/2013/08/12/3252690.html
autoprefixer 处理css3的前缀的更多相关文章
- Autoprefixer处理CSS3属性前缀
http://www.w3cplus.com/css3/autoprefixer-css-vender-prefixes.html
- 如何处理CSS3属性前缀
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- (13/24) css进阶:自动处理css3属性前缀
什么是属性前缀 为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 例如: transition: width ...
- 如何处理CSS3属性前缀(转载)总结
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- css3浏览器前缀 -mos/-webkit/-o/-ms
1.css3浏览器前缀的意思 -moz为firefox的前缀: -webkit为safari和chrome的前缀: -o为opera浏览器的前缀: -ms为ie浏览器的前缀: 2.常见的需要使用浏览器 ...
- CSS3无前缀脚本prefixfree.js与Animatable使用
现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS ...
- CSS3无前缀脚本prefixfree.js与Animatable使用介绍
要求 必备知识 本文要求基本了解 JAVASCRIPT 和 和 CSS3 基本知识. 运行环境 桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端: ...
- 前端css3样式前缀自动补全工具--autoprefixer
最近在学习一份来自git的动画框架源码,看懂70%的核心代码后,打算自己动手实践一版,然鹅,所有框架搭起来以后,在动画这块却出了问题: 想设计一个slideInLeft的动画,必然想到了要从偏移-10 ...
- 详解CSS3属性前缀(转)
原文地址 CSS3的属性为什么要带前缀 使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀.这是为什么呢? 我的理解是,浏览器厂商以前就一直在实 ...
随机推荐
- [转帖]PostgreSQL的用户、角色和权限管理
PostgreSQL的用户.角色和权限管理 2018年05月18日 14:02:29 jerry-89 阅读数 6143 https://blog.csdn.net/eagle89/article/d ...
- SQLYOG如何将数据导出excel格式
方法/步骤 如图,笔者的数据库中有一张student表,想把这张表中的数据导出成excel 在这张表上右击,选择“Export”,再选择“Export Table Data as CSV, ...
- JVM 分析工具和查看命令,超详细
jinfo 可以输出并修改运行时的java 进程的opts. jps 与unix上的ps类似,用来显示本地的java进程,可以查看本地运行着几个java程序,并显示他们的进程号. jstat 一个极强 ...
- jQuery添加/删除Select的Option项
使用语法1. $("#select_id").append("<option value='Value'>Text</option>") ...
- Linux就该这么学——新手必须掌握的命令之常用的系统工作命令
echo命令 含义:echo命令用于在终端输出字符串或变量提取后的值,格式为 : echo [字符串|$变量] 示例: 将”Linuxprobe.com”输出到终端屏幕的命令为: [root@linu ...
- winform 中如何获取debug目录的路径
项目中需要在debug启动目录创建文件夹,所以先获取debug路径: var debugPath = System.AppDomain.CurrentDomain.BaseDirectory;
- 怎样在 Vue 中使用 v-model 处理表单?
主要是通过 v-model 对表单元素做数据的 双向绑定. 用法其实也很简单, 只是因为表单元素有不同类型, 处理方式有些许不同, 这点需要注意. 1. 如果是 输入框 , 可以直接使用 v-mode ...
- java中的接口和php的接口的区别
php: 规范: 接口是一种特殊的抽象类,这种抽象类中只包含抽象方法和静态常量. 在接口中的抽象方法只能是public的,默认也是public权限. abstract和final修饰符也不能修饰接口中 ...
- js判断是否是对象获取子窗体值
判断是否是对象 Object.prototype.toString.call(obj) 装换为数组 Array.prototype.slice.call(obj) 父窗体获取值子窗体值$(functi ...
- Java list的实现类
Java list的实现类 本文是根据博文整理 Java中,List接口一共有三个实现类:ArrayList.Vector和LinkedList. 其中ArrayList和Vector都是利用数组这一 ...