• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

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

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

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
喜欢 (8)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

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

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