前端css3样式前缀自动补全工具--autoprefixer
最近在学习一份来自git的动画框架源码,看懂70%的核心代码后,打算自己动手实践一版,然鹅,所有框架搭起来以后,在动画这块却出了问题:
想设计一个slideInLeft的动画,必然想到了要从偏移-10%的位置,移动到0的位置,于是,乐呵呵编写了如下代码:
@keyframes fadeInLeft{
from{transform:translate3d(-100px,0,0);}
to{transform:translate3d(0px,0,0);}
}
自认为,逻辑严密没有任何问题,初始帧、结束帧都有了,但是为什么没有动画呢?看了git的动画源码,原来是我忘记加火狐的私有属性前缀了,加上如下代码:
@keyframes fadeInLeft{
from{transform:translate3d(-100px,0,0);}
to{transform:translate3d(0px,0,0);}
}
@-webkit-keyframes fadeInLeft{
from{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0);}
to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0px,0,0);}
}
刷新页面,动画动起来了(*^▽^*)~
综上可见,尤其对css3的新属性而言,浏览器私有属性前缀,是多么的重要,然鹅,如果要知道每个属性的浏览器私有前缀,必须每用一个就去mdn或者w3查一遍,好不麻烦,于是度娘一下,“如何不全css前缀”,这一百度不要紧,排名前几的答案无一例外都是回复:autoprefixer,不明白什么东西,根据链接点开一看:
是不是很惊喜,意外?你只需要按照标准写法编写左侧代码,右侧会自动生成兼容各个浏览器版本的带前缀写法,是不是很酷炫,而且你还可以根据网站的兼容性设置向前兼容的版本数,一般来说,向前兼容越少,生成的补全代码也越精简,因为后代浏览器的兼容性、对css3标准的实现肯定是越来越棒哒~
就此记录一下,神器autoPrefixer,你最美~
前端css3样式前缀自动补全工具--autoprefixer的更多相关文章
- Shell脚本一键部署——源码编译安装MySQL及自动补全工具
Shell脚本一键部署--源码编译安装MySQL及自动补全工具 编译安装MySQL 1.软件包 Mysql安装包 将安装包拖至/opt目录下,编辑一个脚本文件,将以下内容复制进去,然后source或者 ...
- msfvenom命令自动补全工具下载=>msfvenom-zsh-completion
msfvenom参数和命令很多,各种payload和encoder经常让⼈眼花缭乱,特别是对英语不好的⼈来说有些命令可能很容易忘记. 所以 Green_m 开发了⼀个zsh插件,可以⾃动化的补全msf ...
- CSS3前缀自动补全方案和插件
第一种方法:prefix free,js插件,大小2kb,直接导入,无需任何浏览器兼容前缀 <script src="prefixfree.min.js"></s ...
- Mycil命令行MySQL语法高亮和自动补全工具
MyCli 是MySQL,MariaDB和Percona的命令行界面,具有自动完成和语法高亮的功能. 其效果如图: 那么我们应该怎么安装它呢,这里附上windows的安装方法. 在命令行下输入 pip ...
- MySQL-代码自动补全工具
一.工具名称 mycli : 具有自动完成和语法高亮的功能 二.安装 pip install mycli 三.使用方法: mycli -u root -p password 四.效果图
- ubuntu 14.04 vim YoucompleteMe 代码自动补全工具安装
安装步骤如下: sudo apt-get install vim ; sudo apt-get install vim-youcompleteme ; sudo apt-get install vim ...
- 如何配置webpack让浏览器自动补全前缀
一.postcss-loader有什么用? PostCSS 本身是一个功能比较单一的工具.它提供了一种方式用 JavaScript 代码来处理 CSS.它负责把 CSS 代码解析成抽象语法树结构(Ab ...
- Jupyter Notebook自动补全
大多数程序员都非常熟悉不同的自动补全工具.然而,我注意到许多数据科学家还没有使用它.如果你是他们中的一员,是时候开始使用这个提高效率的工具了 什么是自动补全? 它是你的编程环境提供的一种功能,用于完成 ...
- Redis 实战 —— 08. 实现自动补全、分布式锁和计数信号量
自动补全 P109 自动补全在日常业务中随处可见,应该算一种最常见最通用的功能.实际业务场景肯定要包括包含子串的情况,其实这在一定程度上转换成了搜索功能,即包含某个子串的串,且优先展示前缀匹配的串.如 ...
随机推荐
- win64 qt与fortran (codeblocks) 混合编程
本教程主要解说用fortran生成dll供qt调用(win64) 本教程须要的软件及文件可从以下的连接下载: http://pan.baidu.com/s/1c04jziC fortran我用的软件是 ...
- 原生js 平滑滚动到页面的某个位置
window.scrollTo() 语法1: window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标. y-coord 是文档中的纵轴坐标. 例子: w ...
- http的session和cookie
1 http session和http请求之间的关系 http协议是无状态的,一次会话服务端需要处理多次http请求,就算是长连接,也是要发送多次请求的,由于http无状态所有每次的请求都是独立的,服 ...
- mysql连接com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link
jdbc驱动:mysql-connector-java-5.1.39-bin.jar 这个有问题, 换成:mysql-connector-java-5.1.34.jar 就可以了
- HDU - 1150 Machine Schedule(最小点覆盖数)
1.有两台机器A和B以及N个需要运行的任务.A机器有n种不同的模式,B机器有m种不同的模式,而每个任务都恰好在一台机器上运行.如果它在机器A上运行,则机器A需要设置为模式xi,如果它在机器B上运行,则 ...
- I.MX6 Android CAN 命令行测试
/********************************************************************* * I.MX6 Android CAN 命令行测试 * 说 ...
- NABCD项目需求报告
项目:记账小账本 N:need 需求 根据我们的调查,很多人虽然知道记账有很多的好处,但是因为种种的原因,我们都没能养成记账的好习惯,所以我们所做的记账小软件,说到底是一个行为养成类的软件,而这类软件 ...
- 洛谷P3004 宝箱Treasure Chest——DP
题目:https://www.luogu.org/problemnew/show/P3004 似乎有点博弈的意思,但其实是DP: f[i][j] 表示 i~j 的最优结果,就可以进行转移: 注意两个循 ...
- 从0开始学习Hadoop(2)安装JDK
参考文档: 安装包方式安装:http://www.cnblogs.com/wuyudong/p/ubuntu-jdk8.html PPA方式安装:推荐 http://www.cnblogs.com/ ...
- springMVC实现基本文件夹压缩下载功能
将文件夹压缩后下载: @Slf4j public class Test { private static final String BASE_PATH = "/root/doc/" ...