• 欢迎访问微视觉网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入微视觉微视觉-影视后期交流
  • 本站全面支持自动充值,目的是更好的服务大家!
  • 本站全面开启SSL服务,请放心使用!
  • 如果您觉得本站对你非常有用,那么赶紧使用Ctrl+D 收藏吧

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

WEB前端 Jason.w.wei 2年前 (2016-05-03) 2748次浏览 已收录 0个评论

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

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

写过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 计算哪些前缀是需要的,哪些是已经过期的。

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

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

下面距离看看吧:

.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);
}
官方网站

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


微视觉 , 版权所有丨如未注明 , 均为网络收集丨本网站采用BY-NC-SA协议进行授权 , 转载请注明一个处理 CSS 浏览器兼容性的神器网站:AutoPrefixer
喜欢 (6)
[wuwei967@126.com]
分享 (0)

您必须 登录 才能发表评论!