• 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 的语法

  • 相关阅读:
    rest framework 认证 权限 频率
    rest framework 视图,路由
    rest framework 序列化
    10.3 Vue 路由系统
    10.4 Vue 父子传值
    10.2 Vue 环境安装
    10.1 ES6 的新增特性以及简单语法
    Django 跨域请求处理
    20190827 On Java8 第十四章 流式编程
    20190825 On Java8 第十三章 函数式编程
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/5592481.html
Copyright © 2020-2023  润新知