来自 前端知识 2019-12-07 15:33 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

编写纯CSS而不用担心浏览器加载缓慢,一个以最

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库。它们得以清除绝超过55%主题素材,但同期又引进了其余标题。

它们强制大家选取新的语法。它们迭代慢于今世浏览器,所以当稳固版发表时会发生众多不供给的前缀,临时大家需求创建自身的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而不用担心浏览器加载缓慢,一个以最

关键词: