• 明天我们家宝宝满月了
  • 一晚上忙了好几个小时,终于把支付前台通知解决了
  • 原计划要增加另外一种支付方案,现在可能要被搁置了
  • 今天上午刚刚注册了华为云,然后刚刚华为云的客服小姐姐就来电话了,小姐姐声音挺好听的
  • 今天无意中注册了华为云,然后发现跟阿里云基本一个模样,甚至连价格都一样
  • 继续测试一下
  • 发现一个问题就是,微信语音发送说说的时候,不要拦截没有UA的数据请求
  • 测试一下连接
  • 终于下雪了
  • 有赞的支付暂时用不了了,所以重新开发另一个支付插件

一个处理CSS浏览器兼容性的神器网站:AutoPrefixer

免费资源 云落 3年前 (2016-04-21) 352次浏览 已收录 3个评论
文章目录[隐藏]

autoprefixer是一款能够在线补齐CSS3浏览器兼容性标签的网站,使用这款在线工具可以免去考虑浏览器标签前缀的问题。

Buy-A-New-Car-l
写过CSS的都知道,不要同内核浏览器有不同的前缀标签,有时候我们可能忘记那些需要加标签,有时候会加多了,这时候我们需要一款只能添加,去除标签的工具,今天介绍的autoprefixer就是这款工具。

网站简介

Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS而不使用特定的语法。可以轻松跟Sass以及Stylus集成,由于它在CSS编译后运行。

Autoprefixer基于Rework,一个可以用来编写你自己的CSS后处理程序的框架。Rework解析CSS成有用Javascript结构经过你的处理后导回给CSS。

Autoprefixer的每个版本都包含一份最新的 Can I Use 数据:

  • 当前浏览器列表以及它们的普及度。
  • 新CSS属性,值和选择器前缀列表。

Autoprefixer默认将支持主流浏览器最近2个版本,这点类似Google。不过你可以在自己的项目中通过名称或者模式进行选择:

  • 主流浏览器最近2个版本用“last 2 versions”;
  • 全球统计有超过1%的使用率使用“>1%”;
  • 仅新版本用“ff>20”或”ff>=20″.

然后Autoprefixer计算哪些前缀是需要的,哪些是已经过期的。

使用说明

QQ截图20160421131202
这就是网站的预览效果,使用的时候,将代码放进左边框内,会在右侧自动生成修改过的代码

下面距离看看吧:

.id{
    display: flex;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

经过处理,会自动修改为下面的代码:

.id{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

看懂了吧,是不是很不错的东西。

相关链接

官方网站
-- 完 --
weinxin
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送WordPress小技巧,你可以随时退订,欢迎订阅哦~

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:一个处理CSS浏览器兼容性的神器网站:AutoPrefixer
喜欢 (8)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址