Auto vendor prefix for CSS3 properties
JavaScript CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitattributes
.gitignore
README.md
index.js
package.json

README.md

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:0px 0px 15px #407fab;
    border-radius:10px;
    display:box;
    box-pack:center;
    box-align:center
}

Prefixed CSS Rules

#example {
    -moz-box-shadow:0px 0px 15px #407fab;
    -webkit-box-shadow:0px 0px 15px #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

// Modfile
module.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.