autoprefixer

• Fix -webkit-background-size hack for contain and cover values.
• Don’t add -webkit- prefix to filter with SVG (by @iamvdo).

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Coat_of_arms_of_Greece.svg/500px-Coat_of_arms_of_Greece.svg.png" width="200" height="196" align="right">

• Add support for clip-path and mask properties.
• Fix 2.0.2 issue and return -webkit- prefix to filter with SVG URI. Thanks to @iamvdo for notice.

• Add readable names for new browsers from 2.0 release.
• Don’t add -webkit- prefix to filter with SVG URI.
• Don’t add -o- prefix 3D transforms.

• Save declaration style, when clone declaration to prefix.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Emblem_of_South_Korea.svg/479px-Emblem_of_South_Korea.svg.png" width="200" height="200" align="right">

This version based on PostCSS 1.0, supports @supports and enable visual cascade by default.

PostCSS 1.0

New PostCSS release has a lot of improvements, but source map API update is most important for Autoprefixer’s users.

@lydell suggested great plan to clean up options. Now all map options will be inside map object.

• inlineMap: true was renamed to map: { inline: true }.
• mapAnnotation: false was renamed to map: { annotation: false }.
• Previous source map should be set to separated option map: { prev: prevMap } instead of old map: prevMap.

There is map: 'inline' shortcut if you want to set only map: { inline: true }. Old options are deprecated and will print warnings.

Also there is two API improvements for plugin’s popular needs:

• Map can contain origin CSS source, if you set map: { sourcesContent: true } option.
• You can change result map path by map: { annotation: '../maps/app.css.map' } option. Note that path in annotation must be relative to output CSS file.

Property result.map will contains SourceMapGenerator object (from Mozilla’s source-map) instead of string. It will allow to change something in generated map:

var result = autoprefixer.process(css, { map: true });
result.map.applySourceMap(otherMap, 'undetected.css');

console.log('map: ' + result.map) // SourceMapGenerator has toString() method,
                                  // so old code should work
result.map.toJSON().file // But also you can access to generated map properties

Check out all changes in PostCSS docs.

Visual Cascade

By idea from @paulirish, Autoprefixer from 1.1 version has option for prefixes cascade. But this feature was disabled by default, because old Autoprefixer can’t restore own cascade, when it removes prefixes.

New Autoprefixer can restore prefixes cascade, when it remove unnecessary prefixes. So, now we can enable visual cascade by default.

a {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px
}

b {
    user-select: none
}

will be processed to:

a {
    border-radius: 4px;
}

b {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none
}

Cascade will be used, only if you process uncompressed CSS. Use cascade: false option to disable cascade, if you don’t like it.

@supports At-rule

CSS 3 added new @supports at-rule to use some styles, only if browser supports properties and values in at-rule conditions.

For example, we can set some styles only for browsers, which support fit-content width:

.menu {
  width: 400px
}

@supports (width: fit-content) {
     /* content will be used, only if browser supports fit-content */
    .menu {
        width: fit-content
    }
}

But Chrome doesn’t know fit-content, it knows only -webkit-fit-content. So we need to use prefixed properties and values in @support.

@callumacrae suggested this feature and explained how it should works. And now Autoprefixer 2.0 supports this at-rule and adds prefixes inside it conditions:

@supports ((width: -webkit-fit-content) or (width: -moz-fit-content) or (width: fit-content)) {
     /* content will be used, only if browser supports fit-content */
    .menu {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }
}

Other Changes

• Autoprefixer now supports all browsers from Can I Use: ie_mob, and_chr, and_ff, op_mob and op_mini.
• Autoprefixer is written on CoffeeScript, so you wasn’t be able to use latest unreleased versions from GitHub. Now code contains special hack and you can use latest Autoprefixer by "autoprefixer": "ai/autoprefixer" in your npm’s package.json.
• Binary now has --no-cascade, --annotation and --sources-content options and deprecates<br>-c and --cascade.

• Fix gradient hack, when background property contains color.

<img src="http://magistatic.com/crests/1047-1273245021.png" align="right" width="180" height="180">

• Add text-size-adjust support.
• Add background-size to support Android 2.

<img src="https://upload.wikimedia.org/wikipedia/commons/3/37/Imperial_Seal_of_Japan.svg" width="180" height="180" align="right">

Autoprefixer uses Can I Use data. Previous versions contain Can I Use dump inside npm package and I had special script to update this data from Can I Use repo. I manually run this scripts every day. It was a hack, not a good solution.

Few month ago @Fyrd started to publish official caniuse-db npm package. Autoprefixer 1.2 start to use this official data instead of local copy.

This changes made Autoprefixer’s maintaining much easier, but also it gives a few benefits to end-users:

1. Autoprefixer stops to use strange 1.1.20140605 versions with dump date in minor part. Now it will be normal versions like 1.2.0.
2. You can update Can I Use data separetly from Autoprefixer’s code. It is important for big companies, which have long test period on every code changes. Now you can have up-to-date browsers data and don’t be worry to broke styles.
3. Autoprefixer extremely cares about actual prefix data. In previous version there was day delay between Can I Use updates and Autoprefixer release. Now you will get faster updates directly from Can I Use author. Don’t forget to call npm update caniuse-db.