zoukankan      html  css  js  c++  java
  • 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 的语法

  • 相关阅读:
    Dev中出现Error 0: 操作成功完成。
    找出一个二维数组中的鞍点,即该位置上的元素在该行上最大、在该列上最小。也可能没有没有鞍点。
    oracle 日常删除多余数据
    java程序练习:输入数字转换成中文输出(金额相关)
    linux压缩和解压文件命令
    一篇文章搞定Git——Git代码管理及使用规范
    读书心得(1)-20191108
    回表查询的说明
    Java 8新特性解读
    java-try catch中return在finally之前 还是之后执行
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/5592481.html
Copyright © 2011-2022 走看看