cssprefix

Automatically adds vendor-specific prefixes (-moz, -webkit, -ms, and -o) to CSS3 properties

Support by https://github.com/ai/autoprefixer

Origin CSS Rules

#example {
box-shadow:0px0px15px#407fab;
border-radius:10px;
display:box;
box-pack:center;
box-align:center
}

Prefixed CSS Rules

#example {
-moz-box-shadow:0px0px15px#407fab;
-webkit-box-shadow:0px0px15px#407fab;
-moz-border-radius:10px;
-webkit-border-radius:10px;
display:-moz-box;
display:-webkit-box;
display:-ms-box;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
-moz-box-align:center;
-webkit-box-align:center;
-ms-box-align: middle
}

Usage

// Modfilemodule.exports={plugins: {cssprefix: "mod-cssprefix"},tasks: {cssprefix : {src: "./css/*.css",dest : "./cssprefixed/"}}};

Browsers

You can specify the browsers you want to target in your project:

cssprefix : {src: "./css/*.css",dest : "./cssprefixed/",browsers: ["last 1 version", "> 1%", "ie 8", "ie 7"]}

• last n versions is last versions for each browser. Like ¡°last 2 versions¡± strategy in Google.
• > n% is browser versions, selected by global usage statistics.
• ff > 20 and ff >= 20 is Firefox versions newer, that 20.
• none don¡¯t set any browsers to clean CSS from any vendor prefixes.
• You can also set browsers directly.

Blackberry and stock Android browsers will not be used in last n versions. You can add them by name:

cssprefix : {src: "./css/*.css",dest : "./cssprefixed/",browsers: ["last 1 version", "bb 10", "android 4"]}

You can find the browsers codenames in data file:

• android for old Android stock browser.
• bb for Blackberry browser.
• chrome for Google Chrome.
• ff for Mozilla Firefox.
• ie for Internet Explorer.
• ios for iOS Safari.
• opera for Opera.
• safari for desktop Safari.

By default, Autoprefixer uses > 1%, last 2 versions, ff 17, opera 12.1:

• Firefox 17 is a latest ESR.
• Opera 12.1 will be in list until Opera supports non-Blink 12.x branch.