>

一个以最好的方式处理浏览器前缀的后处理程序

- 编辑:至尊游戏网站 -

一个以最好的方式处理浏览器前缀的后处理程序

Autoprefixer:三个以最棒的主意管理浏览器前缀的后管理程序

2014/08/26 · CSS · CSS

原稿出处: css-tricks   译文出处:三桂   

Autoprefixer深入分析CSS文件相同的时候拉长浏览器前缀到CSS法规里,使用Can I Use的多少来调节如何前缀是亟需的。

具有你供给做的正是把它加多到你的能源营造筑工程具(举个例子 Grunt)而且能够完全忘记有CSS前缀那东西。即便依据最新的W3C规范来符合规律书写你的CSS而无需浏览器前缀。像那样:

CSS

a{ transition :transform 1s }

1
2
3
a{
     transition :transform 1s
}

Autoprefixer使用二个数据库遵照当下浏览器的广泛度以至性能援救提须要你前缀:

CSS

a{ -webkit-transition :-webkit-transform 1s; transition :-ms-transform 1s; transition :transform 1s }

1
2
3
4
5
a{
     -webkit-transition :-webkit-transform 1s;
     transition :-ms-transform 1s;
     transition :transform 1s
}

问题

 

自然大家得以手写浏览器前缀,不过那展现干瘪以致易错。

我们也足以应用相近Prefixr这般的劳务以致编辑器插件,但那依然乏于跟一群重复的代码打交道。

咱俩得以采用象Compass之于Sass以及nib之于Stylus之类的预管理器提供的mixin库。它们能够消除绝大部分标题,但与此同一时间又引入了此外难题。

它们强制大家使用新的语法。它们迭代慢于今世浏览器,所以当稳固版发表时会产生不菲不供给的前缀,有时大家供给创建自身的mixins。

Compass实际上并不曾为您屏蔽前缀,因为你依然须要调节多数主题素材,举个例子:笔者供给为 border-radius 写四个mixin吗?笔者索要用逗号分割 +transition 的参数吗?

Lea Verou的-prefix-free差不离消除了那些标题,不过利用顾客端库并非个好注意,当您把最后客户品质记挂进去的话。为了防止频仍做相符的事务,最佳是在财富营造也许项目揭穿时再营造一次CSS。

揭秘

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计算哪些前缀是内需的,哪些是曾经晚点的。

当Autoprefixer加多前缀到你的CSS,还不会遗忘修复语法出入。这种方式,CSS是依照最新W3C标准爆发:

CSS

a { background : linear-gradient(to top, black, white); display : flex } ::placeholder { color : #ccc }

1
2
3
4
5
6
7
a {
     background : linear-gradient(to top, black, white);
     display : flex
}
::placeholder {
     color : #ccc
}

编译成:

CSS

a { background : -webkit-linear-gradient(bottom, black, white); background : linear-gradient(to top, black, white); display : -webkit-box; display : -webkit-flex; display : -moz-box; display : -ms-flexbox; display : flex } :-ms-input-placeholder { color : #ccc } ::-moz-placeholder { color : #ccc } ::-webkit-input-placeholder { color : #ccc } ::placeholder { color : #ccc }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
a {
    background : -webkit-linear-gradient(bottom, black, white);
    background : linear-gradient(to top, black, white);
    display : -webkit-box;
    display : -webkit-flex;
    display : -moz-box;
    display : -ms-flexbox;
    display : flex
}
:-ms-input-placeholder {
    color : #ccc
}
::-moz-placeholder {
    color : #ccc
}
::-webkit-input-placeholder {
    color : #ccc
}
::placeholder {
    color : #ccc
}

Autoprefixer 相通会清理超时的前缀(来自遗留的代码或看似 Bootstrap CSS库),因而上边包车型地铁代码:

CSS

a { -webkit-border-radius : 5px; border-radius : 5px }

1
2
3
4
a {
    -webkit-border-radius : 5px;
    border-radius : 5px
}

编译成:

CSS

a { border-radius : 5px }

1
2
3
a {
    border-radius : 5px
}

因为通过Autoprefixer管理,CSS将仅满含实际的浏览器前缀。Fotorama从Compass切换到Autoprefixer之后,CSS大小减少了将近20%。

演示

生机勃勃经你还未有用过别的工具来自动化塑造你的静态能源,应当要尝试下Grunt,小编刚毅推荐你起先使用创设筑工程具。那将拉开您全体语法糖世界,高效的mixin库以至实用的图片管理工科具。全数开采者的敏捷方法用来节省大量活力以致时光(自由接纳语言,代码服用,使用第三方库的力量)现将都适用于前端开采人士。

让大家成立二个品种目录甚至在style.css中写些轻易的CSS:

至尊游戏网站,style.css

{ }

在此个例子中,大家将采用Grunt。首先必要运用npm安装 grunt-autoprefixer :

npm install grunt-cli grunt-contrib-watch grunt-autoprefixer

下一场大家要求创立 Gruntfile.js 文件以至启用Autoprefixer:

JavaScript

Gruntfile.js module.exports = function (grunt) { grunt .initConfig ({ autoprefixer : { dist : { files : { 'build/style.css' : 'style.css' } } }, watch : { styles : { files : ['style.css' ], tasks : ['autoprefixer' ] } } }); grunt.loadNpmTasks('grunt-autoprefixer' ); grunt.loadNpmTasks('grunt-contrib-watch' );};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Gruntfile.js
module.exports = function (grunt) {
     grunt .initConfig ({
          autoprefixer : {
               dist : {
                    files : { 'build/style.css' : 'style.css' } } },
                    watch : {
                         styles : {
                              files : ['style.css' ],
                              tasks : ['autoprefixer' ]
                         }
                    }
               });
grunt.loadNpmTasks('grunt-autoprefixer' );
grunt.loadNpmTasks('grunt-contrib-watch' );};

此布置文件能够让Autoprefixer编写翻译 style.css 到 build/style.css. 同样我们将用 grunt-contrib-watch``来监听style.css文件变化又一次编写翻译build/style.css。

启用Grunt的Watch功能:

./node_modules/.bin/grunt watch

现今我们增多贰个CSS3表明式到style.css并保存:

style.css

JavaScript

a { width : calc(50% - 2em) }

1
2
3
a {
     width : calc(50% - 2em)
}

接下去是见证神跡的随即,以后自个儿有了build/style.css文件,Grunt监测到style.css文件产生变化并启用Autoprefixer任务。

Autoprefixer发现了calc() 值单元必要Safari 6的浏览器前缀。

build/style.css

CSS

a { width : -webkit-calc(50% - 2em); width : calc(50% - 2em) }

1
2
3
4
a {
     width : -webkit-calc(50% - 2em);
     width : calc(50% - 2em)
}

咱俩再添扩大一丢丢冗杂的CSS3到style.css并保存:

style.css

CSS

a { width : calc(50% - 2em); transition : transform 1s }

1
2
3
4
a {
     width : calc(50% - 2em);
     transition : transform 1s
}

Autoprefixer已知Chrome,Safari 6以及Opera 15需要为transitiontransform 添加前缀。但IE9也须求为transform增多前缀,作为transition的值。

build/style.css

CSS

a { width : -webkit-calc(1% + 1em); width : calc(1% + 1em); -webkit-transition : -webkit-transform 1s; transition : -ms-transform 1s; transition : transform 1s }

1
2
3
4
5
6
7
a {
     width : -webkit-calc(1% + 1em);
     width : calc(1% + 1em);
     -webkit-transition : -webkit-transform 1s;
     transition : -ms-transform 1s;
     transition : transform 1s
}

Autoprefixer为造成你具备脏活而设计。它会基于Can I Use数据库,写入全体供给的前缀並且相通清楚标准之间的差距,款待来到未来的CSS3 – 不再有浏览器前缀!

下一步?

1、Autoprefixer支持Ruby on Rails,Middleman,Mincer,Grunt,Sublime Text。驾驭更加多关于如何在你的际遇中选用的文档。

2、倘使您的条件还不援救Autoprefixer,请告诉给本人。

3、关注@autoprefixer得到更新以致新性格音讯。

赞 收藏 评论

至尊游戏网站 1

本能源由 伯乐在线 - 凝枫 整理

至尊游戏网站 2

CSS 如你所愿。

Myth是大器晚成款预管理器,就像CSS的填充剂,帮您编写纯净CSS的还要,无需担忧老旧浏览器包容或然其余标准协理问题。

安装

Shell

$ npm install -g myth

1
$ npm install -g myth

用法

Shell

$ myth input.css output.css # Generated output.css from input.css

1
2
$ myth input.css output.css
# Generated output.css from input.css

分享财富

  • mnmly/builder-myth: component-builder 插件
  • gulp-myth: Gulp 插件
  • grunt-myth: Grunt 插件
  • duo-myth: Duo 插件
  • myth-loader: Webpack 加载器
  • meteor-myth: Meteor 插件
  • myth-transformer: Dart 转换器

怎么要用Myth?

Myth能令你在书写纯净CSS的同一时候,还是可以分享LESS/Sass品级的对待。你依然像使用预管理器相通使用变量和数学函数,它填补了CSS以后业内的空缺。

CSS的少数职能使用时要求开展演算,那是Myth恐怕预管理器不能调控的,但Myth能帮您写出今后版本的CSS语法,约等于说,对现在的编写翻译器版本可用。当浏览器终于更新到支撑那些CSS功用时,你无需再去重写代码,把公文一直级联就行!

输入不经管理的CSS意味着你能够用Myth来重处理此外随便的CSS(或任何预管理输出器),只需加多你所需支撑的浏览器,无需任何重写就可以生成语法完全分化的代码。

Myth使用Rework搭建,速度不慢,扶助命令行与JS API。

案例

多说无凭,有例为证。假诺您依据专门的学业写下了以下CSS:

CSS

:root { --green: #a6c776; } @custom-media --narrow-window screen and (max-width: 30em); @media (--narrow-window) { html { font-size: 1.2rem; } } a { color: var(--green); font-variant: all-small-caps; transition: color 1s; } a:hover { color: color(var(--green) shade(20%)); } ::placeholder { opacity: .4; transition: opacity 1s; } :focus::placeholder { opacity: .2; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
:root {
  --green: #a6c776;
}
 
@custom-media --narrow-window screen and (max-width: 30em);
 
@media (--narrow-window) {
  html {
    font-size: 1.2rem;
  }
}
 
a {
  color: var(--green);
  font-variant: all-small-caps;
  transition: color 1s;
}
 
a:hover {
  color: color(var(--green) shade(20%));
}
 
::placeholder {
  opacity: .4;
  transition: opacity 1s;
}
 
:focus::placeholder {
  opacity: .2;
}

… Myth能帮你转变来浏览器帮衬的CSS:

CSS

@media screen and (max-width: 30em) { html { font-size: 1.2rem; } } a { color: #a6c776; -webkit-font-feature-settings: "smcp", "c2sc"; -moz-font-feature-settings: "smcp", "c2sc"; font-feature-settings: "smcp", "c2sc"; font-variant: all-small-caps; -webkit-transition: color 1s; transition: color 1s; } a:hover { color: rgb(133, 159, 94); } ::-webkit-input-placeholder { opacity: .4; -webkit-transition: opacity 1s; transition: opacity 1s; } ::-moz-placeholder { opacity: .4; transition: opacity 1s; } :-ms-input-placeholder { opacity: .4; transition: opacity 1s; } ::placeholder { opacity: .4; -webkit-transition: opacity 1s; transition: opacity 1s; } :focus::-webkit-input-placeholder { opacity: .2; } :focus::-moz-placeholder { opacity: .2; } :focus:-ms-input-placeholder { opacity: .2; } :focus::placeholder { opacity: .2; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
@media screen and (max-width: 30em) {
  html {
    font-size: 1.2rem;
  }
}
 
a {
  color: #a6c776;
  -webkit-font-feature-settings: "smcp", "c2sc";
  -moz-font-feature-settings: "smcp", "c2sc";
  font-feature-settings: "smcp", "c2sc";
  font-variant: all-small-caps;
  -webkit-transition: color 1s;
  transition: color 1s;
}
 
a:hover {
  color: rgb(133, 159, 94);
}
 
::-webkit-input-placeholder {
  opacity: .4;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
 
::-moz-placeholder {
  opacity: .4;
  transition: opacity 1s;
}
 
:-ms-input-placeholder {
  opacity: .4;
  transition: opacity 1s;
}
 
::placeholder {
  opacity: .4;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
 
:focus::-webkit-input-placeholder {
  opacity: .2;
}
 
:focus::-moz-placeholder {
  opacity: .2;
}
 
:focus:-ms-input-placeholder {
  opacity: .2;
}
 
:focus::placeholder {
  opacity: .2;
}

特色

变量

语法与CSS规范无差别于。就好像现在的CSS,但没有需求级联,感激rework-vars支持。

CSS

:root { --purple: #847AD1; } a { color: var(--purple); }

1
2
3
4
5
6
7
:root {
  --purple: #847AD1;
}
 
a {
  color: var(--purple);
}

数学

语法与CSS规范同后生可畏。犹如以后的CSS,但回顾了插值运算时间,感激rework-calc支持。

CSS

pre { margin: calc(50px * 2); }

1
2
3
pre {
  margin: calc(50px * 2);
}

自定义媒体询问

语法与CSS规范相同,感谢rework-custom-media支持。

CSS

@custom-media --narrow-window (max-width: 30em); @media (--narrow-window) { /* narrow window styles */ } @media (--narrow-window) and (script) { /* special styles for when script is allowed */ }

1
2
3
4
5
6
7
8
9
@custom-media --narrow-window (max-width: 30em);
 
@media (--narrow-window) {
  /* narrow window styles */
}
 
@media (--narrow-window) and (script) {
  /* special styles for when script is allowed */
}

色蒲剧节

语法与CSS规范相同,感谢rework-color-function支持。

CSS

a { color: #847AD1; } a:hover { color: color(#847AD1 tint(20%)); }

1
2
3
4
5
6
7
a {
  color: #847AD1;
}
 
a:hover {
  color: color(#847AD1 tint(20%));
}

无须前缀

最常用甚至新型版浏览器的前缀都得以支撑,所以您再也不用担忧现存的浏览器该支持什么的分界面尺寸了。感激autoprefixer支持!

CSS

.button { background: linear-gradient(to bottom, black, white); transition: transform .25s; }

1
2
3
4
.button {
  background: linear-gradient(to bottom, black, white);
  transition: transform .25s;
}

以至任何……

  • 4位和8位十五进制色彩援救。规范鸣谢
  • Font-variant属性简写。规范鸣谢

API

命令行

Shell

Usage: myth [<input>] [<output>] Options: -h, --help output usage information -V, --version output the version number -c, --compress compress output -w, --watch watch the input file for changes -s, --sourcemap add source map -v, --verbose log verbose output for debugging --no-import disable import support --no-variables disable variables support --no-custom-media disable custom media support --no-hex-alpha disable hex alpha support --no-color disable color support --no-calc disable calc support --no-font-variant disable font variant support --no-rebeccapurple disable rebeccapurple support --no-prefixes disable prefixes support Examples: # pass an input and output file: $ myth input.css output.css # watch the input file for changes: $ myth --watch input.css output.css # unix-style piping to stdin and stdout: $ cat input.css | myth | grep background-color

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Usage: myth [<input>] [<output>]
 
Options:
 
  -h, --help          output usage information
  -V, --version       output the version number
  -c, --compress      compress output
  -w, --watch         watch the input file for changes
  -s, --sourcemap     add source map
  -v, --verbose       log verbose output for debugging
 
  --no-import         disable import support
  --no-variables      disable variables support
  --no-custom-media   disable custom media support
  --no-hex-alpha      disable hex alpha support
  --no-color          disable color support
  --no-calc           disable calc support
  --no-font-variant   disable font variant support
  --no-rebeccapurple  disable rebeccapurple support
  --no-prefixes       disable prefixes support
 
Examples:
 
  # pass an input and output file:
  $ myth input.css output.css
 
  # watch the input file for changes:
  $ myth --watch input.css output.css
 
  # unix-style piping to stdin and stdout:
  $ cat input.css | myth | grep background-color

Node.js

JavaScript

var myth = require('myth'); var fs = require('fs'); var css = fs.readFileSync('index.css', 'utf8'); var converted = myth(css); fs.writeFileSync('converted.css', converted);

1
2
3
4
5
6
7
var myth = require('myth');
var fs = require('fs');
 
var css = fs.readFileSync('index.css', 'utf8');
var converted = myth(css);
 
fs.writeFileSync('converted.css', converted);

您也能够一贯运用Rework插件:

JavaScript

var myth = require('myth'); var rework = require('rework'); var fs = require('fs'); var css = fs.readFileSync('index.css', 'utf8'); var converted = rework(css) .use(myth()) .toString(); fs.writeFileSync('converted.css', converted);

1
2
3
4
5
6
7
8
9
10
var myth = require('myth');
var rework = require('rework');
var fs = require('fs');
 
var css = fs.readFileSync('index.css', 'utf8');
var converted = rework(css)
  .use(myth())
  .toString();
 
fs.writeFileSync('converted.css', converted);

可选项:

关键词 类型 描述
browsers Array 支持的浏览器版本数组列表。
compress Boolean CSS输出时是否压缩
features Object 无效功能字典。所有功能默认开启,可用功能有:calc, color, customMedia, fontVariant, hexAlpha, import, prefixes, rebeccapurple, variables.
preserve Boolean 输出时是否保留变量
source String CSS源文件的完整路径,如果你想要Myth把CSS中所有@import规则串联起来,请务必使用它。
sourcemap Boolean 是否嵌入源地图
variables Object 使用CSS变量字典

License

The MIT License (MIT)

官方网站:
开源地址:

本文由设计建站发布,转载请注明来源:一个以最好的方式处理浏览器前缀的后处理程序