Latest release

6.6.1

@ai ai released this Jan 3, 2017

  • Add metadata to use Autoprefixer in JSS tests (by @cvle).

Downloads

6.6 “Kaiyuan”

@ai ai released this Dec 23, 2016 · 6 commits to master since this release

Emperor Xuanzong of Tang

This release uses Browserslist 1.5 and is focused on sharing browsers with babel-preset-env and create-react-app.

package.json

We know that many developers hate the current mess of config files in the project root.

With Autoprefixer 6.6 you can specify browsers in package.json to reduce config files:

{
  "private": true,
  "devDependencies": {
    "autoprefixer": "^6.6.0",
    "postcss": "^5.2.6"
  },
  "browserslist": [
    "last 2 versions",
    "ie 9"
  ]
}

Note that we highly recommend specifying browsers in browserslist config or in package.json instead of Autoprefixer option. In this case many other tools will share browsers list, including Stylelint and babel-env-preset.

Environments

In most cases, you should use same browsers list for Autoprefixer in development and production. But right now Autoprefixer share browsers list with many other tools including babel-env-preset.

To improve development performance developers might want to use different target browsers in development.

So both Browserslist config now supports environments:

[development]
last 1 version

[production]
last 2 version
> 1%
  "private": true,
  "devDependencies": {
    "autoprefixer": "^6.6.0",
    "postcss": "^5.2.6"
  },
  "browserslist": {
    "development": [
      "last 1 version"
    ],
    "production": [
      "last 2 version",
      "> 1%"
    ]
  }

Autoprefixer will use env option, BROWSERSLIST_ENV or NODE_ENV to detect current environment.

Custom Browser Statistics

In addition to > 1% and > 1% in US, Browserslist supports > 1% in my stats to select popular versions according your visitors statistics.

To do it you need save JSON data from Google Analytics.

Autoprefixer 6.6 support standard name for this usage data file browserslist-stats.json and will load it automatically, without need to pass stats options.

It is especially useful if you share browsers with other tools without stats option support.

Downloads

6.5.4

@ai ai released this Dec 12, 2016 · 10 commits to master since this release

  • Fix unitless 0 basis in IE10/IE11 shorthand flex (by Google).

Downloads

6.5.3

@ai ai released this Nov 10, 2016 · 18 commits to master since this release

  • Add error for popular mistake with browser option instead of browsers.

Downloads

6.5.2

@ai ai released this Nov 6, 2016 · 21 commits to master since this release

Downloads

6.5.1

@ai ai released this Oct 12, 2016 · 27 commits to master since this release

  • Fix selectors with :-- prefix support.

Downloads

6.5 “Einigkeit und Recht und Freiheit”

@ai ai released this Sep 27, 2016 · 33 commits to master since this release

The Lesser Arms of the German Empire, 1871 - 1918

Autoprefixer 6.5 brings defaults keyword and fixes Grid support.

defaults

Autoprefixer 6.5 includes Browserslist 1.4 with defaults keyword. So now you could extend default browsers list:

postcss([
  autoprefixer({ browsers: ['defaults', 'ie 9'] })
])

Also don’t miss new tool to check what browsers will be picked by Browserslist: browserl.ist.

CSS Grid Layout

With Autoprefixer small subset of coming CSS Grid Layout will works in IE by adding a -ms- prefix and change the syntax (as we do for Flexbox). In 6.5 we fixed some cases with -ms-grid-row-align.

.container {
    display: grid;
    grid-template-columns: auto 1fr;
}
.element {
    align-self: stretch;
    grid-column-start: 1;
    grid-column-end: span 3;
}
.container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 1fr;
    grid-template-columns: auto 1fr;
}
.element {
    -ms-grid-row-align: stretch;
    align-self: stretch;
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 3;
    grid-column-end: span 3;
}

Flexbox

align-self has same syntax in final and 2009 Flexbox specification.

In 6.5 we fixed when Autopefixer removed -webkit-align-self even if final spec is still in requirements.

Downloads

6.4.1

@ai ai released this Sep 2, 2016 · 40 commits to master since this release

  • Fix node cloning after some PostCSS plugins.

Downloads

6.4 “Hic et ubique terrarum”

@ai ai released this Aug 3, 2016 · 48 commits to master since this release

Coat of arms of University of Paris

Autoprefixer 6.4 brings :any-link and text-decoration-skip support.

New Support

New Autoprefixer will compile:

:any-link {
    text-decoration-skip: ink;
}

to:

:-webkit-any-link {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip: ink;
}
:-moz-any-link {
  text-decoration-skip: ink;
}
:any-link {
  -webkit-text-decoration-skip: ink.;
          text-decoration-skip: ink;
}

Transition

Autoprefixer 6.4 support reverse parameters in transition:

.foo {
    transition: 200ms color;
}

Also we fix transition prefixing in Opera 12.

Other

  • Fix -webkit- prefix for backface-visibility.
  • Fix rad unit support in gradients (by @gucong3000).
  • Removed Safari TP Grid prefixes support.

Downloads

6.3.7

@ai ai released this Jul 1, 2016 · 62 commits to master since this release

  • Fix rare Cannot read property 'constructor' of null issue.

Downloads