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的前缀的更多相关文章

  1. Autoprefixer处理CSS3属性前缀

    http://www.w3cplus.com/css3/autoprefixer-css-vender-prefixes.html

  2. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  3. (13/24) css进阶:自动处理css3属性前缀

    什么是属性前缀 为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 例如: transition: width ...

  4. 如何处理CSS3属性前缀(转载)总结

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  5. css3浏览器前缀 -mos/-webkit/-o/-ms

    1.css3浏览器前缀的意思 -moz为firefox的前缀: -webkit为safari和chrome的前缀: -o为opera浏览器的前缀: -ms为ie浏览器的前缀: 2.常见的需要使用浏览器 ...

  6. CSS3无前缀脚本prefixfree.js与Animatable使用

    现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS ...

  7. CSS3无前缀脚本prefixfree.js与Animatable使用介绍

    要求 必备知识 本文要求基本了解 JAVASCRIPT 和 和 CSS3 基本知识. 运行环境 桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端: ...

  8. 前端css3样式前缀自动补全工具--autoprefixer

    最近在学习一份来自git的动画框架源码,看懂70%的核心代码后,打算自己动手实践一版,然鹅,所有框架搭起来以后,在动画这块却出了问题: 想设计一个slideInLeft的动画,必然想到了要从偏移-10 ...

  9. 详解CSS3属性前缀(转)

    原文地址 CSS3的属性为什么要带前缀 使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀.这是为什么呢? 我的理解是,浏览器厂商以前就一直在实 ...

随机推荐

  1. SQL SERVER DATEDIFF函数

    定义: DATEDIFF() 函数返回两个日期之间的时间间隔. 语法: DATEDIFF(datepart,startdate,enddate) 参数: ①datepart 参数可以是下列的值: da ...

  2. Oracle 的查询-scott用户介绍

    scott用户 密码tiger 解锁scott用户 alter user scott account unlock; 解锁scott密码(也可重置密码) alter user scott identi ...

  3. JavaScript作用域简单记录

    作用域以及作⽤用域链 this 没有块级作⽤用域 闭包 作用域 - 作用域链 作用域 - this this 永远是最后调用的对象 作用域 - 没有块级作用域 function Main(){ if( ...

  4. mysql oracle postgresql 体系架构对比

    2个角度sqlservermysqloracle 12cpostgresql如果从create database角度来看 那么一个实例是可以对应多个数据库的~如果从实例和磁盘上的数据库文件(数据文件. ...

  5. TUM 慕尼黑工业大学 MSEI 课程结构介绍 ws19/20

    本文内容 根据德文 tum 官网介绍:https://www.ei.tum.de/studium/master-ei-msei/ 翻译,提取并且翻译成中文信息. 本文适用于ws19/20届的学生. 概 ...

  6. llinux 进阶篇

    df 查看磁盘空间 df -h (加了之后就有单位了) free 指令,查看内存使用情况 free -m(表示一mb单位进行查看) head 查看一个文件的前n行,如果没有n 就默认为前10行 hea ...

  7. Docker结合Jenkins构建持续集成环境

    1.环境说明: jenkins+svn:192.168.71.142 测试环境:192.168.71.145 生产环境:192.168.71.148 操作系统:centos7. Maven3. Tom ...

  8. 26-Perl 包和模块

    1.Perl 包和模块Perl 中每个包有一个单独的符号表,定义语法为:package mypack;此语句定义一个名为 mypack 的包,在此后定义的所有变量和子程序的名字都存贮在该包关联的符号表 ...

  9. oracle按用户导出导入表

    查看备份目录:select * from dba_directories where directory_name='DATA_PUMP_DIR'; 导入导出的文件名默认都是以备份目录为相对路径. 按 ...

  10. Java Web DNS域名解析

    一.什么是DNS DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串 ...