快捷搜索:
来自 新京葡娱乐场网址 2019-08-25 13:20 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

编写纯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库。它们可以解决绝大部分问题,但同时又引入了其他问题。

它们强制我们使用新的语法。它们迭代慢于现代浏览器,所以当稳定版发布时会产生很多不必要的前缀,有时我们需要创建自己的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

命令行

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

变量

语法与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规范相同,感谢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 */
}

无需前缀

最常用以及最新版浏览器的前缀都可以支持,所以你再也不用担心现有的浏览器该支持什么样的界面尺寸了。感谢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;
}

为什么要用Myth?

Myth能让你在书写纯净CSS的同时,还能享受LESS/Sass级别的待遇。你仍然像使用预处理器一样使用变量和数学函数,它填补了CSS未来规范的空缺。

CSS的某些功能使用时需要进行运算,这是Myth或者预处理器无法控制的,但Myth能帮你写出未来版本的CSS语法,也就是说,对以后的编译器版本可用。当浏览器终于更新到支持那些CSS功能时,你不需要再去重写代码,把文件直接级联就行!

输入不经处理的CSS意味着你可以用Myth来重处理其他任意的CSS(或其他预处理输出器),只需添加你所需支持的浏览器,无需任何重写即可生成语法完全不同的代码。

Myth使用Rework搭建,速度极快,支持命令行与JS API。

API

以及其他……

  • 4位和8位十六进制色彩支持。规范鸣谢
  • Font-variant属性简写。规范鸣谢

License

The MIT License (MIT)

官方网站:
开源地址:

数学

语法与CSS规范相同。就像未来的CSS,但省略了插值运算时间,感谢rework-calc支持。

CSS

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

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

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:编写纯CSS而不用担心浏览器加载缓慢,一个以最

关键词: