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. hdoj1520(入门树形dp)

    题目链接:https://vjudge.net/problem/HDU-1520 题意:和luogu那道没有上司的舞会一样的题,给定一棵带点权的树,父结点和子结点不能同时选,问怎么选使得权值和最大,求 ...

  2. vi操作笔记一

    vi命令  gg 到首行 shift + 4 跳到该行最后一个字符 shift + 6 跳到该行首个字符 shift + g 到尾行 vi 可视 G 全选 = 程序对齐   gg 到首行 vi 可视  ...

  3. Oracle - WITH AS -用于查询当月与上月数据

    注:在之前工作的时候,数据需要根据时间查询出当月值和上月的值. 语法: WITH A AS( SELECT * FROM TABLE ), B AS (SELECT * FROM TABLE)SELE ...

  4. 在Ubuntu上安装hadoop-2.7.7

    1.安装open-vm-tools sudo apt-get install open-vm-tools 2.安装openjdk sudo apt-get install openjdk-8-jdk ...

  5. mybatis-plus配置多数据源invalid bound statement (not found)

    mybatis-plus配置多数据源invalid bound statement (not found) 错误原因 引入mybatis-plus应该使用的依赖如下,而不是mybatis <de ...

  6. scoket模块 粘包问题 tcp协议特点 重启服务器会遇到地址被占用问题

    scoket()模块函数用法 import socket socket.socket(socket_family,socket_type,protocal=0) 获取tcp/ip套接字 tcpsock ...

  7. 怎样理解 Vue 的 "Hello, World!" 代码?

    直接复制以下代码到 html 文件中即可运行. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  8. date和time

    time和date两个函数在Lua中实现所有的时钟查询功能.函数time在没有参数时返回当前时钟的数值. t=os.date()print(t) 05/07/19 16:49:18 --------- ...

  9. 【原创】数据库基础之Sqlite

    官方:https://www.sqlite.org/index.html 简介 SQLite is a C-language library that implements a small, fast ...

  10. luogu题解 P2184 【贪婪大陆】

    题目链接: https://www.luogu.org/problemnew/show/P2184 思路: 首先我想吐槽一下为什么现有题解中的做法都是一样的,而且还比较难以理解; 我就讲下我的做法,本 ...