2.2 “Mobilis in mobili”

Autoprefixer 2.2 is based on PostCSS 2.1 with Safe Mode and brings control comments to disable Autoprefixer in some part of CSS.

PostCSS 2.1

New version of PostCSS was totally rewritten from CoffeeScript to ES6, but Autoprefixer users will see only 2 features: Safe Mode and better error messages.

Now Autoprefixer had special Safe Mode, which try to fix broken CSS. For example, it will parse a { as a {}. It will be useful for live input tool or to parse old legacy code.

autoprefixer.process('a {');                 // will throw "Unclosed block"
autoprefixer.process('a {', { safe: true }); // process CSS as a {}

You can now try Safe Mode on live input in Autoprefixer interactive demo by @simevidas.

Also by @jonathanong idea CSS syntax error messages now include broken source line:

> autoprefixer.process('a {\n  b { }\n}')
Can't parse CSS: Unexpected { in decls at line 2:5
a {
  b { }
    ^
}

PostCSS will try to detect environment and use colors in error output if they are supported.

Control Comments

Autoprefixer was designed without any interface. You just write CSS and Autoprefixer process it in background.

For example, it detects hacks automatically, when you use outdated prefix to control special browser:

a {
    transform: scale(0.5);
    -moz-transform: scale(0.6)
}

But sometimes we need control. Now you can disable Autoprefixer for some rules and write prefixes manually. Just put /* autoprefixer: off */ control comment inside rule:

a {
    transition: 1s; /* it will be prefixed */
}

b {
    /* autoprefixer: off */
    transition: 1s; /* it will not be prefixed */
}

Also you can use control comments recursively:

/* autoprefixer: off */
@support (transition: all) {
    /* autoprefixer: on */
    a {
        /* autoprefixer: off */
    }
}

2.1.1

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

2.1 “Eleftheria i thanatos”

- 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.

2.0.2

• 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.

2.0.1

• Save declaration style, when clone declaration to prefix.

2.0 “Hongik Ingan”

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
  -c and --cascade.

1.3.1

• Fix gradient hack, when background property contains color.

1.3 “Tenka Fubu”

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

1.2 “Meiji”

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.

1.1 “Nutrisco et extingo”

Notable Changes

Autoprefixer 1.1 based on PostCSS 0.3 “Prince Seere” with great improvements in source map support:

• Add source map annotation comment support.* Autoprefiixer now reads/writes annotation comment to end of CSS file, if map support is enabled.

• Add inline source map support. It will be really helpful for LESS users.

• Autodetect previous source map. If input CSS will contain annotation comment with inline map, Autoprefixer will read previous map, update it with prefixes changes and inline back to comment. If you set from option with input CSS file path and Autoprefixer will find map file near input CSS, it will read map, update and write new map file. You can disable autodetect by map: false option.

• Fix source map support on Windows and in subdirectories.* PostCSS 0.3 is much smarter with previous map support (maybe now it has best support for chain CSS tranformations with source maps). @nDmitry and @lydell did a great investigation about special cases with source map.

• Optional visual cascade of prefixes. This behavior is disabled by default yet, but you can enable it with cascade option.

  a {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box
  }

• Autoprefixer now has nice interactive demo by @simevidas.

* grunt-autoprefixer already had this fixes. @nDmitry covered Autoprefixer and fixed them by hacks.

API Changes

• Deprecated API from 0.8 version was removed. Use process(from: "a.css").css instead of compile(file: "a.css") and info() instead of inspect().
• Add new inlineMap, mapAnnotation options to control source map support. Read about them in PostCSS documentation.

Fixes

• Autoprefixer now adds prefix delector even if it is already prefixed by developer. @necolas find a lot of cases, when property logic can be used in selectors.
• Better flexbox support by @Rowno. flex property values now will be converted for old box-flex syntax. flex-basis, flex-shrink and flex-grow will be converted to separated properties for IE 10, instead of one flex property.
• Better break-inside support by hacks suggested in great investigation by @InterPaul.
• Autoprefixer now smarter groups prefixed and unprefixed properties and better wprks when you write two same properties near by (for example, two transform with and without calc()).