您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net处理CSS3属性前缀,编写纯CSS而不用担

新葡亰496net处理CSS3属性前缀,编写纯CSS而不用担

发布时间:2019-09-17 06:22编辑:新葡亰官网浏览(59)

    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获得更新以及新特性信息。

    赞 收藏 评论

    新葡亰496net 1

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

    如何处理CSS3属性前缀,处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题。在春节前和@一丝姐姐说起Sass中有关于gradient的mixins。姐姐说:

    为什么还要用mixin呢?为什么不使用Autoprefixer?使用Autoprefixer,只需要输入一行代码,编译器帮你做了一切,还纠结个毛mixin。
    

    姐姐的一句话让我汗颜,我还在思考着如何让Sass来写Gradient,或者类似这样需要带前缀的CSS3属性。也这样让我在思考,那么有了 Autoprefixer这样的后处理,Sass中有关于CSS3的mixins是不是已失去了他存在的意义。带着这样的为什么?我们一起来开启今天有关 于CSS3前缀的探讨。

    Sass入门与实战

    一、PostCss简介

    PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS(A tool for transforming CSS with JavaScript)。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的,比如可以支持变量和混入(mixin),增加浏览器相关的声明前缀,或是把使用将来的 CSS 规范的样式规则转译(transpile)成当前的 CSS 规范支持的格式。从这个角度来说,PostCSS 的强大之处在于其不断发展的插件体系。开发人员也可以根据项目的需要,开发出自己的 PostCSS 插件。

    PostCSS 不会单独使用,而是与已有的构建工具配合使用,如 Gulp、Grunt 和 Webpack 都可以。我们只需要选择需要的 PostCSS 插件进行配置。本文主要介绍在Gulp 中使用 PostCSS 的几种常用插件。

    新葡亰496net 2

    CSS3的属性为什么要带前缀

    使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀。这是为什么呢?

    我的理解是,浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准。为此,当一些CSS3样式语法还存在波动时,它们提供针对浏览器的前缀。现在主要流行的浏览器内核主要有:

    • Trident内核:主要代表为IE浏览器
    • Gecko内核:主要代表为Firefox
    • Presto内核:主要代表为Opera
    • Webkit内核:产要代表为Chrome和Safari

    而这些不同内核的浏览器,CSS3属性(部分需要添加前缀的属性)对应需要添加不同的前缀,也将其称之为浏览器的私有前缀,添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性:

    • Trident内核:前缀为-ms
    • Gecko内核:前缀为-moz
    • Presto内核:前缀为-o
    • Webkit内核:前缀为-webkit

    来看一个简单的示例,早期写一个圆角border-radius,需要这样写:

    .box {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
    }
    

    这样编写代码,无形之中给前端人员增加了不少工作量,于是开始有人在讨论这个问题“如何在编写CSS时不需要添加浏览器的私有前缀,又能让浏览器识别?”

    **Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.**打开Sass官网就可以看见这样一句话。这话一点儿都不谦虚:Sass世界上最成熟、最稳定、最强大的专业级CSS扩展语言!他如此自信想必是有各种自信的理由,下面我们就一起来了解了解Sass,看看它在吹牛还在真的如此厉害。

    二、构建gulp PostCss项目

    关于gulp的使用方法,请参考gulp教程,构建步骤:
    <pre>
    1.npm init
    2.npm install gulp gulp-postcss --save-dev
    3.npm install autoprefixer --save-dev(添加需要引用的插件)
    </pre>
    在项目文件夹下新建文件gulpfile.js、文件夹/dest & /src,然后配置gulpfile.js:
    <pre>
    var gulp = require('gulp');
    var postcss = require('gulp-postcss');
    // autoprefixer 给某些需要兼容性的属性添加浏览器私有前缀
    var autoprefixer = require('autoprefixer');
    // cssnext 允许使用CSS的将来版本
    var cssnext = require('cssnext');
    // precss 检查了@if @else,编译符合需求的代码
    var precss = require('precss');
    // alias 定义自己的速写或"别名"
    var alias = require('postcss-alias');
    // postcss-crip 有数百个属性缩写的插件
    var crip = require('postcss-crip');
    // 创建CSS图形 postcss-circle(创建圆) postcss-triangle(创建三角形)
    var circle = require('postcss-circle');
    var triangle = require('postcss-triangle');
    // 使用 top: center; 来达到垂直居中, left: center; 达到水平居中
    var center = require('postcss-center');
    gulp.task('css', function() {
    var processors = [
    autoprefixer,
    cssnext,
    precss,
    alias,
    crip,
    circle,
    triangle,
    linkcolor,
    center
    ];
    return gulp.src('./src/.css')
    .pipe(postcss(processors))
    新葡亰496net处理CSS3属性前缀,编写纯CSS而不用担心浏览器加载缓慢。.pipe(gulp.dest('./dest'));
    });
    gulp.task('default', ['css']);
    </pre>
    配置完成后,我们可以来测试下postcss插件到底能带来什么样的惊喜。
    1.在/src目录下新建一个style.css的文件,随便写一个平常我们需要设置浏览器前缀的样式,例如:
    <pre>
    .demo {
    display: flex;
    transform: rotate(90deg);
    }
    </pre>
    2.在控制台输入命令gulp css 或者gulp,查看/dest文件夹,发现文件夹下有一个style.css的文件,里面就是通过postcss的autoprefixer插件处理的css代码:
    <pre>
    .demo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    }
    新葡亰496net处理CSS3属性前缀,编写纯CSS而不用担心浏览器加载缓慢。</pre>
    再看看其他postcss插件所起到的效果:
    1.cssnext 插件允许开发人员在当前的项目中使用CSS将来版本中可能会加入的新特性。cssnext 负责把这些新特性转译成当前浏览器中可以使用的语法cssnext 是一系列与 CSS 将来版本相关的 PostCSS 插件的组合,更多方法可以参考更多cssnext方法。
    • 自定义属性的名称以“--”开头。当声明了自定义属性之后,可以在样式规则中使用“var()”函数来引用,如下:
    <pre>
    .cssnext {
    background: color(red alpha(-10%));
    }
    :root {
    --mainColor: red;
    }
    a {
    color: color(var(--mainColor) alpha(90%));
    }
    编译后的结果:
    .cssnext {
    background: rgba(255, 0, 0, 0.9);
    }
    a {
    color: rgba(255, 0, 0, 0.9);
    }
    </pre>
    • 自定义选择器,CSS 扩展规范(CSS Extensions)中允许创建自定义选择器,比如可以对所有的标题元素(h1 到 h6)创建一个自定义选择器并应用样式。通过“@custom-selector”来定义自定义选择器。
    <pre>
    @custom-selector :--style h1, h2, h3, h4, h5, h6;
    :--style {
    font-weight: bold;
    }
    编译后的结果:
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    font-weight: bold;
    }
    </pre>
    • @apply,命名自定义属性中存储一组属性,然后以其他样式引用它们,类似于sass的@extend,需要引用并下载:
    <pre>
    在gulpfile.js中引用:
    var apply = require('postcss-apply');
    在控制台输入命令:
    npm install postcss-apply --save-dev
    </pre>
    <pre>
    :root {
    --my-theme: {
    background-color: black;
    color: white;
    border: 1px solid green;
    };
    }
    .my {
    @apply --my-theme;
    }
    编译后的结果:
    .my {
    background-color: black;
    color: white;
    border: 1px solid green;
    }
    </pre>
    • calc()可以使用数学运算中的简单加( )、减(-)、乘(
    )和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算:
    <pre>
    在gulpfile.js中引用:
    var calc = require('postcss-calc');
    在控制台输入命令:
    npm install postcss-calc --save-dev
    </pre>
    <pre>
    :root {
    --font-size-theme: 14px;
    }
    body {
    font-size: var(--font-size-theme);
    }
    div {
    font-size: calc(var(--font-size-theme) x 2);
    height: calc(50px - 1em);
    margin-bottom: calc(var(--font-size-theme) x 1.5);
    }
    编译后的结果:
    body {
    font-size: 14px;
    }
    div {
    font-size: 28px;
    height: calc(50px - 1em);
    margin-bottom: 21px;
    }
    </pre>
    2.使用纯CSS来创建形状,如postcss-circle & postcss-triangle,创建圆形和三角形的语法:
    <pre>
    .circle {
    circle: size color
    }
    .triangle {
    triangle: pointing-<up|down|left|right>;
    width: <length>;
    height: <length>;
    background-color: <color>;
    }
    </pre>
    postcss有许多有趣的插件,有兴趣的可以去github上查看相关的plugin,然后尝试使用。

    CSS 如你所愿。

    -prefix-free

    新葡亰496net 3

    为了解决手工书写前缀的问题,最早的一个解决方案是由Lea Verou提供的一个-prefix-free脚本。你只需要在你的.html文件中插入一个prefixfree.js文件(可以是文档任何地方),建议把这个脚本文件放在样式表之后。

    添加这个脚本之后,使用CSS3的属性时,只需书写标准样式即可。但是这种做法将所有压力交给了客户端来处理。如此一来页面解析压力就大了,性能会打一定的折扣,并且一旦脚本加载失败,那么就会出现浏览器无法正常渲染CSS3的样式风格。

    prefixfree脚本仅在IE9 、Opera10 、Firefox3.5 、Safari4 得到支持。

    css预处理器

    Myth是一款预处理器,如同CSS的填充剂,帮你编写纯净CSS的同时,无需担心老旧浏览器兼容或者其他规范支持问题。

    编辑器插件

    除了prefixfree脚本之外,很多同学依赖于文本编辑器的插件来处理。这里来看看Sublime Text编辑器里是如何实现Autoprefixer功能的。

    要在编辑器中安装Autoprefixer插件,首先需要你的环境中已经安装好了Node.js。你可以在命令终端执行:

    node -v
    

    来检测是否已安装,如果没有安装,请先安装。在这里假设你已具备Node.js环境。

    现在开启你的Sublime Text编辑器,你可以同时按下command Shift p三个键,选择"Install Package"。然后搜索Autoprefixer。

    新葡亰496net 4

    现在你在你的Sublime Text中使用Autoprefixer功能。假设你在样式文件中输入:

    .box {
      transform: rotate(45deg);
      border-radius: 5px;
      box-shadow: 1px 1px 0 rgba(0,0,0,.25);
      transition: all .2s ease .1s;
    }
    

    这个时候你只需要同时按下Command Shift P三个键,选择“Autoprefix CSS”,并且回车,就能得到下面这样的代码:

    .box {
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
      border-radius: 5px;
      box-shadow: 1px 1px 0 rgba(0,0,0,.25);
      transition: all .2s ease .1s;
    }
    

    如下图所示:

    新葡亰496net 5

    注:不同的配置,执行的效果不一样。详细可以点击这里查阅。

    学过CSS的人都知道,它不是一种编程语言。网页开发离不开它,但它有发展缓慢。自然而然就有想出了解决方案:css预处理器

    安装

    Shell

    $ npm install -g myth

    1
    $ npm install -g myth

    预处理器中的混合宏

    随着CSS预处理器越来越普及,部分同学开始采用预处理器中的混合宏来处理CSS3前缀的事项。比如说Compass,里面就是使用Sass的mixin为CSS3需要带前缀的属性定制了一些mixin。还有类似于Stylus中的nib等。预处理器中的混合宏确实可以解决很多问题,但也产生了新的问题,就是它所使用的语法是全新的,如果要使用就必须重新学习,另外这类工具的演进速度通常都会跟不上浏览器的发展速度,这样也会造成其产生的CSS有过时的问题,有时候为了解决一些问题,还需要自己去写mixins。比如:

    新葡亰496net 6

    正如前面所说的,如果要跟上浏览器的演进,就需要不断的更新你的CSS3 mixins,不然就会造成你的代码不是最新的。其中Compass就存在这样的问题:

    @import "compass";
    
    .box {
      @include border-radius(5px);
    }
    

    编译出来的CSS:

    .box {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }
    

    而现实却不尽人意,因为到写这篇文章为止,我们写圆角属性只需要:

    .box {
      border-radius: 5px;
    }
    

    各主流浏览器就能正常的解析。造成这个原因的时,Compass中的CSS3的mixin没有跟上步子去更新定义好的mixins。

    CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题:

    用法

    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

    使用Autoprefixer

    使用Sass、LESS、Stylus或者其他类似的工具都是属于CSS的前处理器(Preprocessor),而Autoprefixer则是 一种后处理器(Postprocessor)。它是直接针对CSS本身来进行处理,不需要任何额外的语法。因为它是在CSS代码产生之后才进行后续处理。

    Autoprefixer是以Rework这种架构所发展的CSS后处理器,他是将CSS代码解析后转成JavaScript的资料结构,进行处理后再产生新的CSS代码。

    Autoprefixer会分析CSS代码,并且根据Can I Use所提供的资料来决定要加上哪些浏览器前缀,而你要做的事情就是把他加入自己的自动化开发工具中(比如Grunt或者Gulp),然后就可以直接使用W3C的标准来写CSS,不需要加上任何浏览器的私有前缀。

    接下来看看如何使用自动化工具实现Autoprefixer功能。

    语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器;

    共享资源

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

    Grunt中配置Autoprefixer

    假设你的环境中已具备了Grunt的运行环境,如果没有请先移步Grunt官网了解,这里不做过多阐述。

    在Github中有一个grunt-autoprefixer的插件,按照其官方提示,我在命令行中执行了下面的语句:

    npm install grunt-autoprefixer --save-dev
    

    命令终端提示:

    新葡亰496net 7

    似乎没有成功(其实我也不太懂Grunt,只是临阵磨枪)。于是我改投@一丝姐姐说的postcss。在命令终端重新输入:

    npm install grunt-postcss --save-dev
    

    这下似乎有戏了:

    新葡亰496net 8

    不过我还跟着官网所说的执行了另外一个命令:

    npm install grunt-postcss autoprefixer-core csswring
    

    运行命令后可以看到下图的提示信息:

    新葡亰496net 9

    接下来需要在你项目的根目录中配置Gruntfile.js文件:

    'use strict';
    module.exports = function(grunt) {
    
      // Dynamically loads all required grunt tasks
      require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
    
      var autoprefixer = require('autoprefixer-core');
    
      // Configures the tasks that can be run
      grunt.initConfig({
        postcss: {
            options: {
                processors: [
                  autoprefixer({ browsers: ['last 2 version'] }).postcss
                ]
            },
            // dist: {
            //  src: 'src/css/*.css',
            //  dest:'dest/css/*.css'
            // }
            multiple_files: {
              expand: true,
              flatten: true,
              src: 'src/css/*.css', // -> src/css/file1.css, src/css/file2.css
              dest: 'dest/css/' // -> dest/css/file1.css, dest/css/file2.css
            },
        },
      });
    
      grunt.loadNpmTasks('grunt-postcss');
    
      grunt.registerTask('default', ['postcss']);
    
    };
    

    为了验证这样做是否正确,我在项目中的src/css/中创建了一个main.css文件,然后输入代码:

    a {
      transition: all .2s ease .1s;
      transform: rotate(45deg) translateY(200px);
    }
    

    在命令终端执行:

    grunt
    

    终端将运行:

    Running "postcss:multiple_files" (postcss) task
    File dest/css/main.css created.
    
    Done, without errors.
    

    查看项目中自动创建了一个dest/css/main.css文件,而里面的代码:

    a {
      transition: all .2s ease .1s;
      -webkit-transform: rotate(45deg) translateY(200px);
              transform: rotate(45deg) translateY(200px);
    }
    

    正是我需要的样式代码。这样尝试一回,觉得比使用Sass中的mixin爽多了。

    没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。

    为什么要用Myth?

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

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

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

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

    Gulp中配置Autoprefixer

    除了Grunt可以配置Autoprefixer之外,还可以使用Gulp来配置。这里也假设你的项目中已具备了Gulp的运行环境,如果没有,可以查阅Gulp官网相关资料。

    根据gulp-autoprefixer官网提示,我在命令终端输入了:

    npm install gulp-autoprefixer --save-dev
    

    在终端中可以看到这样的提示信息:

    新葡亰496net 10

    在Grunt中需要在Gruntfile.js进行配置,而在Gulp中也有点类似,需要在gulpfile.js中进行配置:

    // include gulp
    var gulp = require('gulp'); 
    
    // include plug-ins
    var autoprefix = require('gulp-autoprefixer');
    
    // JS hint task
    gulp.task('styles', function() {
      gulp.src(['./src/styles/*.css'])
        .pipe(autoprefix('last 2 versions'))
        .pipe(gulp.dest('./build/styles'));
    });
    

    看上去要比Gruntfile.js配置简单一些。为了验证操作是否正确,我在项目中创建了src/styles/style.css,并且在style.css文件中输入了:

    a {
      transform: translateY(20px) rotate(45deg);
    }
    

    接下来在命令终端执行:

    gulp styles
    

    看到如下提示信息:

    [12:53:26] Using gulpfile ~/Sites/test/gulp-autoprefixer/gulpfile.js
    [12:53:26] Starting 'styles'...
    [12:53:26] Finished 'styles' after 7.26 ms
    

    此时,在项目中会自动创建一个build/styles/style.css文件,打开这个文件查看代码:

    a {
      -webkit-transform: translateY(20px) rotate(45deg);
          -ms-transform: translateY(20px) rotate(45deg);
              transform: translateY(20px) rotate(45deg);
    }
    

    正是我们需要的。

    其实在PostCSS也提供了有关于如何在Gulp中配置Autoprefixer的说明。感兴趣的同学可以看看。

    有了Autoprefixer这样的工具对于处理CSS3属性前缀来说就不再是头痛的事情了。当然,如果你正在使用CSS预处理器编写代码,那么也可以很完美的结合Autoprefixer去处理。

    所以这就决定了 CSS 预处理器的主要目标:提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。这不是锦上添花,而恰恰是雪中送炭。

    案例

    多说无凭,有例为证。如果你按照规范写下了以下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;
    }

    总结

    经过几年的技术演进,CSS3属性前缀的问题已不再是一个问题。如今天你完全可以忽略我要不要加前缀,要加哪些前缀,而只需要专心去码你的代码。把这些烦人的事情交给Autoprefixer去处理。当然,越到后面,或许我们都不需要使用任何前缀。

    今天闲来无聊,重新来说说CSS3前缀的问题。在春节前和@一丝姐姐说起Sass中有关于gradient的mixins。...

    css预处理器已发展多年,处理Sass外,还有less,Stylus...

    特色

    除了css预处理器,css后处理器也很流行如postcss

    变量

    语法与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);
    }

    开始使用Sass

    数学

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

    CSS

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

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

    完全兼容 CSS3

    自定义媒体查询

    语法与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 语言基础上添加了扩展功能,比如变量、嵌套 (nesting)、混合 (mixin)

    色彩控制

    语法与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%));
    }

    对颜色和其它值进行操作的{Sass::Script::Functions 函数}

    无需前缀

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

    支持 Firebug

    命令行

    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

    Sass的两种语法

    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变量字典

    Sass 有两种语法。

    License

    The MIT License (MIT)

    官方网站:
    开源地址:

    第一种被称为 SCSS (Sassy CSS),是一个 CSS3 语法的扩充版本,也就是说,所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。

    第二种比较老的语法成为缩排语法(或者就称为 "Sass"), 提供了一种更简洁的 CSS 书写方式。 它不使用花括号,而是通过缩排的方式来表达选择符的嵌套层级,I而且也不使用分号,而是用换行符来分隔属性。

    一般使用Scss多余Sass,不过二者除了上述不同外,基本在无差别,也许你和我一样,有时候写写Python后会突然想用Sass,有时有钟情于Scss,这些都无关紧要

    SASS提供四个编译风格的选项

    nested:嵌套缩进的css代码,它是默认值。

    expanded:没有缩进的、扩展的css代码。

    compact:简洁格式的css代码。

    compressed:压缩后的css代码。

    最后推荐大家使用gulp来编译Sass。关于gulp这里不多讲。下面给出一个简单gulp配置文件来编译sass

    constgulp=require('gulp')constsass=require('gulp-sass')gulp.task('sass',function() {returngulp.src('./sass/**/*.scss')        .pipe(sass().on('error',sass.logError))        .pipe(gulp.dest('./css'))})gulp.task('sass:watch',function() {gulp.watch('./sass/**/*.scss', ['sass'])})

    具体参见GitHub

    下面我们将快速学习sass的语法

    sass语法快速入门

    基本语法

    1.变量

    Sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一 次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。

    //scss style//-----------------------------------$fontStack:Helvetica,sans-serif;$primaryColor:#333;body{font-family:$fontStack;color:$primaryColor;}//css style//-----------------------------------body{font-family:Helvetica,sans-serif;color:#333;}

    2.嵌套

    sass可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐。

    //scss style//-----------------------------------nav{ul{margin:0;padding:0;list-style:none;  }li{display:inline-block; }a{display:block;padding:6px12px;text-decoration:none;  }}//css style//-----------------------------------navul{margin:0;padding:0;list-style:none;}navli{display:inline-block;}nava{display:block;padding:6px12px;text-decoration:none;}

    3. 计算功能

    SASS允许在代码中使用算式:

    body{margin: (14px/2);top:50px 100px;right:80*10%;}

    4.颜色

    sass中集成了大量的颜色函数,让变换颜色更加简单。

    //scss style//-----------------------------------$linkColor:#08c;a{text-decoration:none;color:$linkColor;&:hover{// &是父选择器的标识符color:darken($linkColor,10%);    }}//css style//-----------------------------------a{text-decoration:none;color:#0088cc;}a:hover{color:#006699;}

    &是父选择器的标识符

    5. 注释

    Sass共有两种注释风格。

    标准的CSS注释 /* comment */ ,会保留到编译后的文件。

    单行注释 // comment,只保留在SASS源文件中,编译后被省略。

    在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

    /*!我是个傲娇的注释,不会被省略*/

    代码的重用

    1. 导入

    sass中如导入其他sass文件,最后编译为一个css文件,优于纯css的@import

    文件的名称约定以下划线开头

    以下划线卡头的文件名称不会被编译

    //scss style//-----------------------------------// _reset.scsshtml,body,ul,ol{margin:0;padding:0;}//scss style//-----------------------------------// base.scss@import'reset';body{font-size:100%Helvetica,sans-serif;background-color:#efefef;}//css style//-----------------------------------html,body,ul,ol{margin:0;padding:0;}body{background-color:#efefef;font-size:100%Helvetica,sans-serif;}

    2. 扩展/继承

    sass可通过@extend来实现代码组合声明,使代码更加优越简洁。

    //scss style//-----------------------------------.message{border:1pxsolid#ccc;padding:10px;color:#333;}.success{@extend.message;border-color:green;}.error{@extend.message;border-color:red;}.warning{@extend.message;border-color:yellow;}//css style//-----------------------------------.message,.success,.error,.warning{border:1pxsolid#cccccc;padding:10px;color:#333;}.success{border-color:green;}.error{border-color:red;}.warning{border-color:yellow;}

    3. mixin

    sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。比如说处理css3浏览器前缀*(更好的解决方案:autoprefixer)*

    //scss style//-----------------------------------@mixinbox-sizing($sizing) {-webkit-box-sizing:$sizing;-moz-box-sizing:$sizing;box-sizing:$sizing;}.box-border{border:1pxsolid#ccc;@includebox-sizing(border-box);}//css style//-----------------------------------.box-border{border:1pxsolid#ccc;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

    mixin的强大之处,在于可以指定参数和缺省值。

    高级用法

    高级用法可以翻译为“用的少”,但威力很大“

    1.条件语句

    @if可一个条件单独使用,也可以和@else结合多条件使用

    //scss style//-------------------------------$lte7:true;$type: monster;.ib{display:inline-block;@if$lte7{*display:inline;*zoom:1;    }}p{@if$type== ocean {color:blue;  }@else if$type== matador {color:red;  }@else if$type== monster {color:green;  }@else{color:black;  }}//css style//-------------------------------.ib{display:inline-block;*display:inline;*zoom:1;}p{color:green; }

    2.循环语句

    SASS支持for循环:

    for循环有两种形式,分别为:@for $var from through 和@for $var from to 。$i表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。

    @for$ifrom1to10{.border-#{$i}{border:#{$i}pxsolidblue;  }}

    也支持while循环:

    $i:6;@while$i>0{.item-#{$i}{width:2em*$i; }$i:$i- 2;}

    each命令,作用与for类似:

    语法为:@each $var in 。其中$var表示变量,而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。

    //scss style//-------------------------------$animal-list: puma, sea-slug, egret, salamander;@each$animalin$animal-list{  .#{$animal}-icon{background-image:url('#{$animal}.png');  }}//css style//-------------------------------.puma-icon{background-image:url('puma.png'); }.sea-slug-icon{background-image:url('sea-slug.png'); }.egret-icon{background-image:url('gret.png'); }.salamander-icon{background-image:url('salamander.png'); }

    了解了上面这些内容,基本上就算入门了,再去看看这些链接:

    Sass官网

    Sass中文网

    w3cplus

    gulp中文网

    实战

    传送门:GitHub

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net处理CSS3属性前缀,编写纯CSS而不用担

    关键词: