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属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀.这是为什么呢? 我的理解是,浏览器厂商以前就一直在实 ...
随机推荐
- MYsql 客户端下载地址
workbench: https://www.mysql.com/cn/products/workbench/
- mybatis-plus 错误 java.lang.NoClassDefFoundError
错误 java.lang.NoClassDefFoundError: org/apache/velocity/context/Context 使用mybatis-plus自动生成文件的时候,报下面的错 ...
- HDU-6704 K-th occurrence (后缀自动机father树上倍增建权值线段树合并)
layout: post title: HDU-6704 K-th occurrence (后缀自动机father树上倍增建权值线段树合并) author: "luowentaoaa&quo ...
- 状压DP--Rotate Columns (hard version)-- Codeforces Round #584 - Dasha Code Championship - Elimination Round (rated, open for everyone, Div. 1 + Div. 2)
题意:https://codeforc.es/problemset/problem/1209/E2 给你一个n(1-12)行m(1-2000)列的矩阵,每一列都可以上下循环移动(类似密码锁). 问你移 ...
- 协议相关(HTTP,TCP,webservice,socket)
什么是协议? 我们常常点开的链接(URL)就有HTTP.HTTPS协议 枯燥点的知识(协议模型) HTTP,webservice都是在<TCP/IP协议>的应用层. TCP,socket在 ...
- 24-Perl 数据库连接
1.Perl 数据库连接本章节我们将为大家介绍 Perl 数据库的连接.Perl 5 中我们可以使用 DBI 模块来连接数据库.DBI 英文全称:Database Independent Interf ...
- C# Reflection exception Method not found
C# Reflection exception Method not found Ok I figured it out. The server has Microsft .NET 4.0 insta ...
- QT获取屏幕分表率(PC、安卓)
QRect screenRect = QGuiApplication::primaryScreen()->geometry(); double devicePixelRatio = QGuiAp ...
- ns nat rule
ns nat rule NAT实现方式: NAT的实现方式有三种,即静态转换(Static Nat).动态转换(Dynamic Nat) 和 端口多路复用(OverLoad). 静态转换是指将内部网络 ...
- 【weixi】微信支付---微信公众号JSAPI支付
一.JSAPI支付 JSAPI支付是用户在微信中打开商户的H5页面,商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付.应用场景有: ◆ 用户在微信公众账号内进入商家公众号,打 ...