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. A.Who is better?(The Preliminary Contest for ICPC Asia Xuzhou 2019)

    https://nanti.jisuanke.com/t/41383 解: 斐波那契博弈+中国剩余定理. #include <bits/stdc++.h> using namespace ...

  2. T100——修改单身栏位,开窗,当前行

    PRIVATE FUNCTION axmt500_update_xmdc028() ###更改出货库位 DEFINE l_i INT DEFINE l_index INT DIALOG ATTRIBU ...

  3. phpexcel 生成大于26列数据

    function excelExport2($fileName = '', $headArr = [], $data = [], $widths=[]) { ob_clean(); // $fileN ...

  4. eclipse 创建Java web项目 Cannot change version of project facet Dynamic web module to xxx

    问题描述: 用Eclipse创建Java web项目时选择的Artifact Id为maven-artchetype-webapp,由于这个archetype比较老,用的servlet还是2.3的. ...

  5. SharePoint 创建母版页

    一.前言 文章成体系,如果有不明白的地方请查看前面的文章. 二.目录 1.创建HTML页面 2.将HTML文件转换为SharePoint母版页 3.在 SPD中修改母版页“PlaceHolderMai ...

  6. Pycharm有必要改的几个默认设置项以及快捷键

    最近在用Pycharm学习Python的时候,总有两个地方感觉不是很舒服,比如调用方法的时候区分大小写(thread就不会出现Thread,string就不会出现String)等,这让我稍稍有点不舒服 ...

  7. 【原创】Java基础之Nginx缓存

    1 proxy_ignore_headers 1.1 Set-Cookie By default, nginx does not caches requests with Set-Cookie. 默认 ...

  8. 使用WSAIoctl获取AcceptEx,Connectex,Getacceptexsockaddrs函数指针

    运行WinNT和Win2000的系统上,这些APIs在Microsoft提供的DLL(mswsock.dll)里实现,可以通过链接mswsock.lib或者通过WSAioctl的SIO_GET_EXT ...

  9. 转:Git和Github简单教程

    转自:https://www.cnblogs.com/schaepher/p/5561193.html Git和Github简单教程   原文链接:Git和Github简单教程 网络上关于Git和Gi ...

  10. shell 中执行Oracle查询和执行存储过程

    [oracle@master2 test]$ more b.sh #!/bin/sh #数据库地址 ip=192.168.1.250 port sid=orcl username=c##scott p ...