还在手动给css加前缀?no!几种自动处理css前缀的方法简介

我们知道在写css的时候由于要兼容不同厂商浏览器,一些比较新的属性需要给它们添加厂商前缀来兼容。移动端还好,基本只要兼容webkit内核的即可,pc端就虐心了,ff、ie、Opera……可以说五花八门,应有尽有,每次要使用例如一些css3属性的时候,就要考虑到添加前缀兼容的问题,那么多属性那么多前缀,简直是泯灭人性!

不过好在现在各种工具的出现,已经可以很好地解决这个问题了,下面就简单介绍几个吧。

1. postcss

postcss是一个用JS插件转化样式的工具。这些插件可以检查CSS,支持变量和mixin,转译未来的CSS语法,内联图像等等……总之是一个非常强大的css处理工具。

在本文中我们主要介绍postcss里面使用率最高的一个插件Autoprefixer。Autoprefixer是专门用来添加厂商前缀的postcss插件,它处理兼容性的依据来源于caniuse

使用效果

编译前:

.example {  display: flex;  transition: all .5s;  user-select: none;  background: linear-gradient(to bottom, white, black);
}

编译后:

.example {  display: -webkit-box;  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);
}
如何使用?

使用构建工具gulp、webpack、grunt等

gulp

在gulp中,你可以安装npm包gulp-postcss来启用Autoprefixer。

var gulp = require('gulp');
gulp.task('autoprefixer', function () {  var postcss      = require('gulp-postcss');  var autoprefixer = require('autoprefixer');  return gulp.src('./postcss/*.css')
    .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
    .pipe(gulp.dest('./dist/postcss'));
});

webpack

在webpack中,你可以安装npm包postcss-loader来启用Autoprefixer。

var autoprefixer = require('autoprefixer');module.exports = {  module: {
    loaders: [
        {
            test:   /\.css$/,
            loader: "style-loader!css-loader!postcss-loader"
        }
    ]
  },
  postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}

grunt

在grunt中,你可以安装npm包grunt-postcss来启用Autoprefixer。

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-postcss');

  grunt.initConfig({
    postcss: {
        options: {
            map: true,
            processors: [                require('autoprefixer')({
                    browsers: ['last 2 versions']
                })
            ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
  });

  grunt.registerTask('default', ['postcss:dist']);
};

2.在less、sass等css预处理器中处理前缀

less

在less中可以使用mixin来解决。

例如:

.animation(@args){
  -webkit-animation:@args;
  -moz-animation:@args;
  -ms-animation:@args;
  -o-animation:@args;  animation:@args;
}

然后调用:

div{
  .animation(fadeIn  1s);
}

sass

在sass中可以使用工具库compass来帮助我们。(安装compass前需要先安装Ruby,如何安装自行百度)

然后我们在sass中引入compass模块中需要的部分,然后通过@include命令调用,例如:

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

编译后结果:

.rounded {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  -o-border-radius: 5px;  -ms-border-radius: 5px;  -khtml-border-radius: 5px;  border-radius: 5px;
}

3.css预处理搭配构建工具使用Autoprefixer更酸爽

其实我们也看出来了,在预处理中添加前缀其实还是有点麻烦的,但是在webpack等工具中同时使用它们会更为便捷,思路其实很简单,就是:先用预处理器把less、sass转为css,然后再通过Autoprefixer给编译好的css加前缀。以webpack为例:

var autoprefixer = require('autoprefixer');module.exports = {  module: {
    loaders: [
        {
            test:   /\.less$/,
            loader: "style-loader!css-loader!postcss-loader!less-loader"
        }
    ]
  },
  postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}

首先我们先用less-loader编译less为css,然后在通过postcss-loader给编译后的css加前缀,就是这么简单。 参考文章:

https://github.com/postcss/autoprefixer

http://www.ruanyifeng.com/blog/2012/11/compass.html

http://blog.csdn.net/natalie86/article/details/43524285

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2016-08-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏智能大石头

[netcore]CentOS安装使用.netcore极简教程(免费提供学习服务器) 新生命团队netcore服务器免费开放计划

本文目标是指引从未使用过Linux的.Neter,如何在CentOS7上安装.Net Core环境,以及部署.Net Core应用。

22400
来自专栏做全栈攻城狮

C#实现动态网站伪静态,使seo更友好

本教程将使用Visual Studio 2013手把手教你实现webform动态页面的伪静态。本教程配套的C#源码工程可通过我的github下载。地址:http...

15840
来自专栏JAVA高级架构

Redis面试题及分布式集群

30610
来自专栏冰霜之地

如何快速给自己构建一个温馨的"家"——用Jekyll搭建静态博客

我相信,每个程序员都有一个愿望,都想有一个属于自己的"家"——属于自己的博客,专属的网站。在自己的“家”中,可以和志同道合的兄弟一起分享和讨论任何技术,谈天说地...

33420
来自专栏ChaMd5安全团队

记一次phpcms漏洞利用到获得服务器过程分享

记一次phpcms漏洞利用到获得服务器 by lshc 随着最近phpcms V9 任意上传和注入poc的流出,在圈内又掀起了一阵漏洞利用浪潮,想到之...

69060
来自专栏java技术学习之道

常见的Redis面试题及分布式集群讲解

44370
来自专栏编程

Captcha插件后门分析和修复

0×00 前言 近日看到网上爆出wordpress官方插件captcha出现后门,大惊,本人当初千辛万苦找验证码插件,在十几个插件中选了这款,感觉还挺好用,竟然...

28260
来自专栏杨建荣的学习笔记

Datapump数据迁移前的准备工作(r9笔记第31天)

其实对于Datapump迁移而言,如果参与过XTTS,OGG,Veritas SF,外部表增量等迁移方式的话,会发现Datapump还是很简单清晰的,一个优点...

28330
来自专栏ionic3+

Cordova插件使用——Office文档在线预览那些事

第一种方式,有两种实现方法,一是使用在线的接口(如谷歌、微软……但前者被墙,后者付费使用,当然也可以自己部署个接口处理转换,不想特别折腾也可以用微软的offic...

1.1K40
来自专栏北京马哥教育

rsync同步的艺术

如果你是一位运维工程师,你很可能会面对几十台、几百台甚至上千台服务器,除了批量操作外,环境同步、数据同步也是必不可少的技能。 说到“同步”,不得不提的利器就是r...

44470

扫码关注云+社区

领取腾讯云代金券