Sublime Text 插件 autoprefixer

简介:

Sublime Text 早就有插件(Sublime Prefixr)使用 prefixr 的 API 来自动完成 CSS 前缀,但是 autoprefixer 更牛,这款可使用 Can I Use 的资料库。
插件官方网址:Sublime Autoprefixer on GitHub

/* 使用前 */
body {
  background: linear-gradient(to bottom, #DADADA, #000);
}

p a {
  -webkit-border-radius: 5px;
  border-radius: 5px
}




/* ------------------------
 * 使用后
 */
body {
  background: -webkit-linear-gradient(top, #DADADA, #000);
  background: linear-gradient(to bottom, #DADADA, #000);
}

p a {
  border-radius: 5px;
}

效果明显,多于的 CSS 会自动删掉,border-radius 早就已经不需要前缀了(参考 caniuse border-radius),只有 Firefox 3.6,Chrome 4,Safari 4 和 Android 2.1 需要前缀;而 参考 caniuse css graident 桌面版的 Firefox 15 和 Chrome 25 或者更旧的版本 和目前手机版的游览器才需要前缀。

安装

使用 Package Control,安装 Autoprefixer,然后重启 Sublime Text

系统需求

电脑需要安装 Node.js

使用方法

按 Ctrl + Shift + P,然后选 Autoprefix CSS 或者设置键盘快捷键 – “Preferences > Key Bindings – User”

[
    { "keys": ["ctrl+alt+x"], "command": "autoprefixer" }
]

选项

打开选项
Preferences > Package Settings > Autoprefixer > Settings – User

默认设置:
过去2个版本(如果 Chrome 30 是最新版的,这款插件自动选 Chrome 28 – 30 的版本来判断否需要前缀)

配置参数

last n versions 支持过去n个版本

n% 全球使用率大于百分之 n
ff > 20 和 ff >= 20 Firefox 20 或者更新
none 消灭前缀

总结

autoprefixer 的精确度比 prefixr 好很多
速度飞快
默认配置够用了,你的代码要前缀就是为了最新的科技而写的,不是为了支持 IE7 IE8 这些古董
PS: 写 CSS 时,写 W3C 官方的语法,这样才插件才能自动帮你添加前缀。例如 linear-gradient,这个有 2008 年 Apple webkit 提案旧的语法,但是 autoprefixer 只看 W3C 的语法


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5592481.html,如需转载请自行联系原作者

相关文章
|
XML 数据格式
【sublime Text】sublime Text3安装可以使xml格式化的插件
应该有机会 ,会碰到需要格式化xml文件的情况。 例如,修改word转化的xml文件之后再将修改之后的xml文件转化为word文件。 但是,word另存的xml文件是没有格式的一片:    那怎么格式化 这个巨大的xml文件的格式呢?   解决方法: 1。
4818 0
|
IDE Java 编译器
Sublime Text安装与配置教程
Sublime Text是我一直使用的代码编辑器,我喜爱它的原因就是好看啊!当然打开速度毋庸置疑啦,毕竟不是IDE。这里我把我的安装与配置步骤教给大家,如有未尽之处,大家自己摸索咯,也欢迎与我交流。
807 0
Sublime Text安装与配置教程
|
JSON JavaScript 开发工具
sublime text 2插件
Sublime有好几种安装插件的方法,但是最好用也是最长用的是ctrl+shift+p。
|
Web App开发 移动开发 Python
如何根据自己的实际需求开发属于自己的sublime text插件
如何根据自己的实际需求开发属于自己的sublime text插件
100 0
如何根据自己的实际需求开发属于自己的sublime text插件
|
JavaScript 前端开发
Sublime Text工具使用
安装Sublime Text 3 官网下载 选择对应的版本安装。完事后,要安装一个基础的、必备的包管理:Package Control,用来以后安装插件用的。 安装指导 https://sublime.
1567 0
|
C语言 C++
Sublime Text3 配置
1. 配置C/C++编译环境 1). 下载编译工具 MingW codeblocks 雅乐网推荐的方法是借助codeblocks,选择带有mingw的版本安装,安装后把mingw文件夹复制出来就可以了。
1248 0
|
开发工具 git HTML5
SubLime Text3 常用插件总结
近来开始恶补前端知识,在一定的技能基础上,逐渐开始进阶的学习和使用。因此在这里罗列下,SubLime Text3 常用插件: 1、Emmet 提高HTML & CSS3编写速度。 2、Theme – Soda 一直用的一款皮肤 3、sideBarEnhancements 侧边栏右键增效插件,提高页面处理速度。
1168 0
|
开发工具 git
sublime text 3如何安装插件
原博客地址:http://blog.csdn.net/weixin_40682842/article/details/78727266 我自己的部分操作如下: 学习Sublime Text扩展插件的安装前,让我们来先了解一下它的插件官方网站:https://packagecontrol.io/。
2021 0
|
Python Shell 开发工具
Sublime Text 的安装和配置
Sublime Text的安装和基本配置
2359 0
|
移动开发 JavaScript 前端开发
Sublime Text 3安装及常用插件安装
一、Sublime3下载 1.百度搜索Sublime3 download,选择进入下载页面 2.我选择下载Win64位安装程序 二、Sublime3安装 傻瓜式安装,一直点下一步即可。 三、Sublime3插件配置 1.直接安装 安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->
2941 0