autoprefixer

• Fix -ms- prefix for grid cells with same grid-area (by @evgeny-petukhov).

• Fix multiple prefixes in declaration value.

• Fix IE 10 support.

• Fix grid-template-areas in @media (by @evgeny-petukhov).

• Fix _autoprefixerDisabled is undefined issue.

• Fix IE and other old JS runtimes support.

<img src="https://user-images.githubusercontent.com/19343/33527596-ab375970-d864-11e7-985f-fd8b285092d9.png" alt="Coat of arms of Brazil" width="200" height="200" align="right" />

Autoprefixer 7.2 brings better Grid support for IE<br> and autoprefixer-info CLI tool.

Grid Layout

With grid: true option Autoprefixer adds -ms- prefixes to Grid Layout properties. But this feature was very limited.

In 7.0 we dramatically improved Grid support for IE. @Alex7Kom added grid-area and improved grid-row and grid-column support. @evgeny-petukhov added grid-template-areas and grid-template support.

Even this complex emoji example will work with new Autoprefixer (output):

body {
    display: grid;
    grid-template-rows: 30px auto 30px;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "🎩 🎩"
                         "🍔 📰"
                         "👞 👞";
}
.header {
    grid-area: 🎩;
}
.nav {
    grid-area: 🍔;
}
.main {
    grid-area: 📰;
}
.footer {
    grid-area: 👞;
}

Just don’t forget to set grid: true option:

auoprefixer({ grid: true })

Info CLI Tool

Autoprefixer 7.2 ships with new CLI tool to check which browsers are selected and which properties will be prefixed.

Just go to your project directory and run npx autoprefixer-info:

Browsers:
  Edge: 16

These browsers account for 0.04% of all users globally

At-Rules:
  @viewport: ms

Selectors:
  ::placeholder: ms

Properties:
  user-select: ms
  hyphens: ms
  appearance: webkit
  scroll-snap-type: ms
  scroll-snap-coordinate: ms
  scroll-snap-destination: ms
  scroll-snap-points-x: ms
  scroll-snap-points-y: ms
  flow-into: ms
  flow-from: ms
  region-fragment: ms
  text-spacing: ms

Also, @pdokas added default value (current working dir) for from option in autoprefixer.info().

Other Changes

• Add wrong radial-gradient properties warning.
• Do not prefix reverse animation direction.
• Improve test coverage (by @Semigradsky).

• Add warning for using browserslist option instead of browsers.
• Add warning for multiple control comments in the same scope.
• Fix Invalid array length error during indent changes.

• Fix ::placeholder prefix for Edge.
• Fix inherit/initial/unset values for flex-direction.
• Fix RegExp usage in gradients (by @YetAnotherMinion).

• Fix radial-gradient direction conversion.
• Fix image-set in cursor.

• Add warning for old radial-gradient direction syntax.

• Fix text-decoration shortcut support.

• Remove non--webkit- intrinsic prefixes in Grid Layout (by @yisibl).

<img src="https://cloud.githubusercontent.com/assets/19343/26038720/24ea441c-390f-11e7-89fa-01a394af2085.png" alt="Humboldt University of Berlin coat of arms" width="200" height="197" align="right" />

Autoprefixer 7.1 brings unicode-bidi support, -webkit-appearance to Edge and fix intrinsic widths prefixes in Grid Layout.

unicode-bidi

Autoprefixer 7.1 will add prefixes for isolate, plaintext and isolate-override values in unicode-bidi:

.foo {
  unicode-bidi: -webkit-isolate;
  unicode-bidi: isolate;
}

Edge and -webkit-appearance

Prefixes sometime could be very strange. Edge started to support appearance property with a prefix. But because of many only-for-Safari websites it supports -webkit-appearance instead of -ms-appearance.

Autoprefixer 7.1 knows it and will generate -webkit-appearance even if you set only "last 1 Edge version" in browserslist config.

Intrinsic Widths

min-content, stretch and other Intrinsic sizes was fixed in grid-template-columns and other Grid Layout properties.

.foo {
  grid-template-columns: minmax(100px, -webkit-min-content);
  grid-template-columns: minmax(100px, min-content);
}

Browserslist in info()

By accident Browserslist 1 loaded config from current working dir if file path was missed. In Browserslist 2 we fixed it and now you must specify path to file in explicit way.

It is not a problem for Autoprefixer user, because Autoprefixer takes CSS file path from PostCSS. But autoprefixer.info() stopped to load conifg in 7.0. In 7.1 we added from option to info().

Set the path to your CSS file and info() will show what prefixes and why it will added to this CSS file:

autoprefixer.info({ from: './scr/app.css' })
//=> Browsers:
//     Chrome: 58
//
//   These browsers account for 1.68% of all users globally
//
//   Selectors:
//     :fullscreen: webkit
//   …

• Fix Autoprefixer for old JS runtimes.

<img src="https://cloud.githubusercontent.com/assets/19343/25772754/e47887e8-3271-11e7-9830-c4bdb72cf71e.png" alt="University of Copenhagen coat of arms" width="220" height="303" align="right" />

Autoprefixer 7.0 uses PostCSS 6.0, Browserslist 2.0 and caniuse-lite.

Browserslist 2.0

Browserslist 2.0 and caniuse-lite by @ben-eb are the main changes in Autoprefixer 7.0. We wrote an article about these changes:

> Autoprefixer 7.0 and Browserslist 2.0

Breaking Changes

Node.js stopped 0.12 support in January 01. So PostCSS dropped Node.js 0.12 from all tests. Please update your Node.js version to 4.0 or 7.0.

IE has very basic support of Grid Layout. So Autoprefixer added -ms- prefixes and change property syntax. Unfortunately, IE supports a really small subset of Grid Layout. So prefixes were not really useful. This is why we disabled Grid Layout prefixes by default. But you still can enable it:

autoprefixer({ grid: true })

Babel

Autoprefixer was one of the biggest CoffeeScript projects. We thought to rewrite it, but reasons were small, and work was big. But @Semigradsky used great decaffeinate tool for automatically CoffeeScript → ES6 converting, and now all Autoprefixer sources are written in JS.

PostCSS 6.0

New PostCSS uses stream parser and uses less memory. Also, it uses less space in node_modules.

Other Changes

• Use ^ for Browserslist dependencies, instead of ~.
• Fix -ms-grid-column-align.
• Move tests to Jest.

• Fix order for non-digit values.

• Fix font-kerning (by @cvle).

• Fix text-decoration-skip in iOS (by @cvle).
• Fix clip-path (by @cvle).

• Improve browsers option perfomance.
• Update CoffeeScript compiler.

• Fix compatibility with “Intrinsic & Extrinsic Sizing” spec update.

• Do not prefix grid/flexbox in @supports on grid: false/flexbox: false.

• Update Browserslist with last n version fix.

<img src="https://cloud.githubusercontent.com/assets/19343/22182742/85d6af00-e0df-11e6-8d7b-3d7a3e672c9d.png" alt="Seal of Bangkok" width="200" height="200" align="right" />

Electron Support

Electron is a framework to build desktop applications with JS and CSS. It is used in Atom text editor and Hyper terminal. Electron is based on Chromium, but have different versions. For instance, Electron 1.4 is based on Chromium 53.

@Kilian made a npm package and Electron-to-Chrome versions mapping. Browserslist 1.6 uses this npm package to covert Electron version to Chrome:

browserslist('Electron >= 1.3') //=> ["chrome 53", "chrome 52"]

Autoprefixer 6.7 uses new Browserslist version, so you could write Electron versions in your browserslist section of package.json.

Also new Browserslist fixes inconsistency of Can I Use data to prevent errors like:

BrowserslistError: Unknown version 0 of and_chr

flex-flow

Autoprefixer converts flexbox syntax to support 2012 and 2009 flexbox specification. Unfortunately, not all properties could be converted to 2009 spec.

Oldest specification doesn’t support flex-flow too, so previous Autoprefixer releases ignore this property.

.foo {
    flex-flow: row
}

But flex-flow is just a shortcut of [flex-direction] [flex-wrap] and flex-direction could be converted to two properties in 2009 specification.

Autoprefixer 1.7 converts row, column, row-reverse and column-reverse values of flex-flow too.

.foo {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row;
        -ms-flex-flow: row;
            flex-flow: row;
}

Note, that wrap, wrap-reverse and nowrap values still not supported.

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

<img src="https://cloud.githubusercontent.com/assets/19343/21446927/a979d71c-c892-11e6-818f-ffb0a3fc2115.jpg" alt="Emperor Xuanzong of Tang" width="200" height="254" align="right" />

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.

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

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

• Clean prefixes data (by @schiehll).

• Fix selectors with :-- prefix support.

<img src="https://cloud.githubusercontent.com/assets/19343/18866736/ec7242d4-84a9-11e6-9761-749be98f2769.png" width="200" height="249" align="right" alt="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.

• Fix node cloning after some PostCSS plugins.

<img src="https://cloud.githubusercontent.com/assets/19343/17362506/069d4516-597e-11e6-90c2-3c95ec8e202b.png" width="200" height="224" align="right" alt="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.

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

• Add Safari TP prefix support for Grid Layout.

• Fix duplicate prefixes for -ms-interpolation-mode.

• Show users coverage for selected browsers in info().

• Fix transition warning.

• Fix jspm support (by @MeoMix).

• Fix compatibility with Flexibility polyfill.

<img src="https://cloud.githubusercontent.com/assets/19343/12336198/3268dc18-bb14-11e5-8b3e-dbb36d7bfba7.jpg" width="220" height="217" align="right" alt="Coat of arms of Leeds">

Autoprefixer 6.3 brings Grid Layout supports and custom browsers usage statistics.

Grid Layout

Grid Layout should be released in 2016. But IE already supports the old version of specification with -ms- prefixes.

The old specification is limited and has different properties, that current one. Autoprefixer will try to convert simple usage cases.

.container {
    display: grid;
    grid-template-columns: 200px 1% 1fr;
    grid-template-rows: auto 15px repeat(3, 1fr);
}
.logo {
    grid-column: 1;
    grid-row: 1 / 2;
}

Output:

.container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 200px 1% 1fr;
        grid-template-columns: 200px 1% 1fr;
    -ms-grid-rows: auto 15px (1fr)[3];
        grid-template-rows: auto 15px repeat(3, 1fr);
}
.logo {
    -ms-grid-column-span: 2;
    -ms-grid-column: 1;
        grid-column: 1 / span 2;
}

But Grid support is very limited in IE. So we add a grid: false option to disable this Autoprefixer feature if you want to use JS polyfill.

Also you can disable @supports by supports: false. With flexbox option you can disable this feature completely or disable 2009 limited specification by "no-2009" value.

Custom Browsers Statistics

Autoprefixer 6.3 includes Browserslist 1.1 with custom browsers statistics support by @DanReyLop.

So now you can use Google Analytics data from your site to select browsers by popularity:

postcss([
    autoprefixer({ browers: '> 5% in my stats', stats: './browsers-stats.json' })
])

Browserslist docs contain good instractions how to get this statistics file.

Other

• Add text-spacing support.
• Fix compatibility with other PostCSS plugins.

• Fix error on broken transition with double comma.

• Fix issues in broken transitions.

• Fix AST error in transition warning (by @jvdanilo).

<img src="https://cloud.githubusercontent.com/assets/19343/11900579/e52246b8-a5b7-11e5-8018-51e288b2980a.png" width="200" height="237" align="right" alt="Coat of arms of Paris">

Autoprefixer 6.2 contains spec changes, text-emphasis-position, better @support and linear gradients support.

Spec Changes

W3C changed fill-available to fill in Intrinsic & Extrinsic spec. @yisibl found it and updated Autoprefixer behaviour.

Autoprefixer will warn you about outdated fill-available in your CSS, but it will not fix it for you. Because your CSS should be ready for the prefix-less future.

Transition

Autoprefixer just works: you can write any CSS and Autoprefixer does the rest (even with complicated cases). But now we have the case when Autoprefixer retreats.

Look at this output for transition-property: color, filter:

a {
    -webkit-transition-property: color, -webkit-filter; /* UC Browser */
    transition-property: color, -webkit-filter;         /* Safari */
    transition-property: color, filter;                 /* Future version of Safari */
    transition-property: color, filter, -webkit-filter; /* Blink and other browsers */
}

As you can see, we need to change amount of properties for a different browser. Unfortunately, we have cases, when Autoprefixer can break a CSS:

a {
    transition-property: color, filter;
    transition-duration: 600ms, 300ms;
}
.is-slow {
    transition-duration: 1200ms, 600ms;
}

Sorry, but I didn’t find a solution for this case. Autoprefixer will show the warning and force you to use multiple names only in safer transition instead of transition-*.

Supports At-Rule

In 6.2 we rewrote all code for @supports at-rule:

• Now Autoprefixer adds prefixes to parameters only for browsers with @supports support.
• With new brackets parser we solved broken parenthesis in some cases found by @kmuncie and @heady.

Time Capsule

<img src="https://cloud.githubusercontent.com/assets/19343/11904066/b2f1db6a-a5ce-11e5-8094-8dda09f1b622.png" width="250" height="108" align="right" alt="Screenshot from 2029 year in Terminator movie">

We put a “time capsule” into Autoprefixer so that we are ready for the prefix-less future. If Autoprefixer sees, that your specified browsers don’t require any prefixes, it will ask to delete itself.

Other

• https://github.com/postcss/autoprefixer/issues/578 Add text-emphasis-position support.
• https://github.com/postcss/autoprefixer/issues/589 Add rad, grad and turn units support to linear gradients.
• https://github.com/postcss/autoprefixer/issues/589 Add some deg directions support for old WebKit linear gradients.
• Normalize all warning messages.

• Fix gradient hack on some parameters (by @lexich).

• Fix cursor: grab and cusror: grabbing support.

<img src="https://cloud.githubusercontent.com/assets/19343/10979258/7fb5c128-840c-11e5-8004-0907335b6bc0.png" width="215" height="215" align="right" alt="Emblem of Algeria">

Autoprefixer 6.1 contains new transition logic, CSS-in-JS support, :read-only support and a few other fixes.

New Transition Support

Unfortunately, Safari ignores entire transition rule if it contains unknown properties. This issue became visible, when Safari removed prefixes for transition.

So Autoprefixer now generates more robust CSS and a { transition: filter 1s } will be compiled to:

a {
    -webkit-transition: -webkit-filter 1s;    /* UC and old Safari */
    transition: -webkit-filter 1s;            /* Safari */
    transition: filter 1s;                    /* Future version of Safari */
    transition: filter 1s, -webkit-filter 1s; /* Blink and other browsers */
}

CSS-in-JS

With postcss-js, any PostCSS plugin can be used for React Inline Styles, Radium, Free Style or any other CSS-in-JS flavor. Unfortunately, the previous version of Autoprefixer had a issue that is now resolved.

let prefixer = postcssJs.sync([ autoprefixer ]);

prefixer({
    display: 'flex'
});
//=> {
//        display: ['-webkit-box',
//                  '-webkit-flex',
//                  '-ms-flexbox',
//                  'flex']
//   }

Other Changes

• Add :read-only support.
• Add support for appearance with any values.
• Add loud /*! autoprefixer: off */ control comments support.
• Convert rotateZ to rotate for -ms-transform.
• Use postcss-value-parser to carefully work with gradients.
• Remove -ms-transform-style and -o-transform-style that never existed.

• Fix old gradient direction warning.

• Remove unnecessary -khtml- prefix too.

• Fix cross-fade() support (by @yisibl)

<img src="https://cloud.githubusercontent.com/assets/19343/9686975/62da9ca8-532f-11e5-8855-e444f2007c4f.jpeg" width="215" height="215" align="right" alt="Seal of California">

Autoprefixer 6.0 uses PostCSS 5.0 and Browserslist 1.0 and brings many new prefixes.

The big change in Autoprefixer 6.0 is that we removed the CLI and join autoprefixer and autoprefixer-core packages. Find and replace autoprefixer-core with autoprefixer in your package.json.

The official CLI for Autoprefixer is postcss-cli, because we should be cooperative with the PostCSS ecosystem, where CSS revolution is happening right now (see CSS Modules for example).

But you can still use old CLI too. It was moved to autoprefixer-cli.

Under the Hood

Autoprefixer 6.0 is based on PostCSS 5.0 and Browserslist 1.0.

Let’s start from bad breaking news:

• Deprecated autoprefixer(opt).process(css) was removed in favor of autoprefixer.process(css, opt), common for all PostCSS plugins.
• safe option was removed in favor of PostCSS Safe Parser
• Opera 12.1 was removed from default query. It was awesome browser, but new Blink’s Opera was released for all platforms a long time ago.

That bad things is out payment for all this awesome features:

• Autoprefixer now supports Custom Syntaxes from PostCSS. As result you can add prefixes directly to SCSS sources by postcss-scss. Or can use Autoprefixer in isomorphic/universal JS directly to CSS-in-JS object.
• Autoprefixer now uses PostCSS 5.0 API, so you can use it with new PostCSS runners without any warnings.
• Now we have Microsoft Edge support by @andrepolischuk.
• You can use not word in browsers query. Because Edge and IE are different browses, last 2 browsers will include IE 11, 10 and Edge. Use last 2 browsers, not IE 10 if you want only 2 versions of Microsoft browsers.
• @ben-eb adds browsers versions ranges like IE 6-9.

Prefixes

When I started Autoprefixer 2 years ago, I thought we would stop seeing new prefixes. Unfortunately, the Safari team has a different view. As a result, Autoprefixer 6.0 presents many new shining prefixes:

• @yisibl add very important image-set() prefixes. See also postcss-image-set.
• Also @yisibl fix mask support by adding mask-border properties.
• @iamvdo add many new awesome Safari features: filter(), element()<br> and backdrop-filter. He also wrote article with good examples about this new things.
• Add CSS Regions support.
• Add Scroll Snap Points support.
• Add writing-mode support.
• Add ::backdrop support for fullscreen apps.
• Add cross-fade() support.
• Add other break- properties to multicolumn support.

Other Changes

• Always show old gradient direction warning.
• Fix filter in transition support on Safari.
• Fix pixelated cleaning.
• PostCSS 5.0 fixes url() parsing.

<img src="https://cloud.githubusercontent.com/assets/19343/7837955/ede9e31c-0492-11e5-8e89-08502d7da04c.png" width="220" height="147" alt="Gadsden flag" align="right">

Autoprefixer 5.2 is 30% faster, adds prefixes for appearance and uses warnings API from PostCSS 4.1.

Prefixes

• Autoprefixer 5.2 will add -webkit- and -moz- prefixes for appearance: none, because it became part of W3C draft. Note, that only none value is supported.
• In 5.1.6 release we made a mistake by adding ::placeholder pseudo-elements prefixes for :placeholder-shown pseudo-classes selector. This release fixes it.
• There was confused situation with prefixes for image-rendering. Prefixed -moz-crisp-edges value works like W3C’s pixelated, not like crisp-edges. So Autoprefixer 5.2 will add prefixes only for pixelated value.<br>Because there is no even plans for crisp-edges browsers support, Autoprefixer will warn you about crisp-edges value in your CSS. It will help you to update styles.
• Also 5.2 release contains fix for text-decoration prefixes.

Warnings

PostCSS 4.1 brings new APIs for plugins. Most important new API for Autoprefixer is a warnings.

Outdated articles and copy-paste developing created many pain for us. There are many code examples with display: box value by 2009 spec, instead of display: flex in final spec. Or many legacy CSS and outdated examples uses old gradient direction syntax (bottom instead of final to top).

Autoprefixer 5.2 will print a warning, when it see outdated syntax in unprefixed properties:

autoprefixer: app.css:104:4: You should write display: flex by final spec instead of display: box

If you develop a builder plugin with Autoprefixer (like gulp-autoprefixer), please print warnings in most proper way for your builder API:

postcss([ autoprefixer ]).then(function (result) {
    result.warnings().forEach(function (warn) {
        console.warn(warn.toString());
    });
    callback(result.css);
});

API

Modular architecture shows great results in PostCSS. So @ben-eb decided to create a modular CSS minifier [cssnano](of course as PostCSS plugin). Autoprefixer 5.2 has special option for it: add: false will disable adding new prefixes, so Autoprefixer will only remove outdated prefixes.

PostCSS now has a great ecosystem. So maintaining Autoprefixer only solution takes too much time. Because Autoprefixer is just a PostCSS plugin, we can deprecate:

• autoprefixer CLI tool. Use postcss-cli instead.
• autoprefixer.process() shortcut. Use PostCSS API instead.

• Fix process exit status in CLI (by @mhart)
• Safer value split in flex hack.

<img src="https://cloud.githubusercontent.com/assets/19343/5969945/391ee70a-a83c-11e4-96ae-16c0dd6fa25a.png" width="190" width="190" alt="Han dynasty" align="right">

Autoprefixer 5.1 has support for many new properties and at-rules and remove prefixes in values with higher accuracy.

New At-Rules

Now Autoprefixer adds prefixes for @viewport<br> and min-resolution/max-resolution query in CSS Media Queries:

@viewport {
    width: device-width;
}
@media  (min-resolution: 192dpi), (min-resolution: 2dppx) {
    background: url(image@2x.jpg);
}

↓

@-ms-viewport {
    width: device-width;
}
@-o-viewport {
    width: device-width;
}
@viewport {
    width: device-width;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
    background: url(image@2x.jpg);
}

Also new Autoprefixer doesn’t remove your code style while adding prefixes to @keyframes and @viewport.

New Properties

@yisibl find many new properties for Autoprefixer and helped to implement them:

a {
    text-emphasis: dot;
    image-rendering: crisp-edges;
    text-align-last: justify;
    text-overflow: ellipsis;
    margin-block-start: 10px;
    padding-inline-end: 10px;
}

↓

a {
    -webkit-text-emphasis: dot;
            text-emphasis: dot;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: crisp-edges;
    -moz-text-align-last: justify;
         text-align-last: justify;
    -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    -webkit-margin-before: 10px;
            margin-block-start: 10px;
    -webkit-padding-end: 10px;
       -moz-padding-end: 10px;
            padding-inline-end: 10px;
}

Vendor Hacks in Values

Autoprefixer removes outdated prefixes. But it is smart and understand, when you use old prefix for vendor-specific hack like -webkit-transform: translateZ(0).

Unfortunately, previous Autoprefixer detected vendor hacks only in properties, but removed all old prefixes in values. Autoprefixer 5.1 became more attentive and doesn’t remove prefix if there is not unprefixed version around.

Browserslist 0.2

Autoprefixer 5.1 uses Browserslist 0.2. Can I Use joins some versions like ios_saf 7.0-7.1 and in Browserslist you can select this joinded versions only by latest version iOS 7.1.

@iamvdo found this lost versions and fix it. Now you can select ios_saf 7.0-7.1 by iOS 7.0 or even iOS 7.

Other Changes

• Return autoprefixer.defaults as alias to current browserslist.defaults.
• Fix -webkit-filter in transition.
• Fix compatibility with postcss-import (by @jasonkuhrt).
• Fix Flexbox prefixes for BlackBerry and UC Browser.
• Fix gradient prefixes for old Chrome.
• Add --no-remove option to CLI.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Coat_of_arms_of_the_Czech_Republic.svg/500px-Coat_of_arms_of_the_Czech_Republic.svg.png" width="180" height="215" align="right" alt="Coat of arms of the Czech Republic">

Autoprefixer 5.0 uses PostCSS 4.0 and Browserslist.

Browserslist

Browserslist is a library to parse browsers queries like last 2 versions. It gives to Autoprefixer:

• More accurate usage statistics calculation.
• New > 5% in US query to select browsers by usage statistics in some country.
• Global browserslist config. It is used in many other tools like Autopolyfiller or doiuse. Now you have one place to storage supported browsers across different tools.

New Properties

With @yisibl help Autoprefixer 5.0 now adds -o- prefix for object-fit and object-position properties and -webkit- prefix for CSS Shapes properties.

Other Changes

• Fix UC Browser in debug info.
• Remove autoprefixer.defaults and use defaults from Browserslist.

<img src="https://upload.wikimedia.org/wikipedia/commons/0/0c/Austria-Hungaria_transparency.png" width="250" height="157" alt="Coat of Arms of Austria-Hungary" align="right">

Autoprefixer 4.0 is based on PostCSS 3.0, so it become 2,5 times faster.

Sources Maps

PostCSS 3.0 sets map.inline and map.sourcesContent to true by default, since it is now the most popular way to use maps.

Previous source map is now used in more places. If you miss from option, PostCSS will take file name from file field in source map. If CSS contains syntax errors, PostCSS will show origin source of error even if you concatenate many files before Autoprefixer.

Also PostCSS 3.0 now supports Unicode BOM symbol in source maps and better works with sourceMappingURL annotation comment.

Cleaning

By default Autoprefixer removes outdated prefixes.

Now you can disable this behavior by remove: false option:

autoprefixer()
  .process('a { -webkit-border-radius: 2px; border-radius: 2px }');
// remove outdated -webkit-border-radius

autoprefixer({ remove: false })
  .process('a { -webkit-border-radius: 2px; border-radius: 2px }');
// keeps -webkit-border-radius

Other Changes

• Add box-decoration-break support.
• Do not add old -webkit- prefix for gradients with px units.
• Parse at-rules without spaces like @import"file".

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Emblem_of_India.svg/452px-Emblem_of_India.svg.png" width="180" height="305" align="right">

• Do not remove comments from prefixed values (by @rousso1).
• Allow Safari 6.1 to use final Flexbox spec (by @radium-v).
• Fix filter value in transition in Webkits.
• Show greetings if your browsers don’t require any prefixes.
• Add <= and < browsers requirement (by @papandreou).

<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Devise_r%C3%A9volutionnaire.jpg" width="200" height="" align="right">

Autoprefixer 3.0 changes browsers API, adds autoprefixer-core package and uses GNU style for syntax error messages.

API Changes

Method autoprefixer() had confused and too difficult options. @sindresorhus showed issue and @lydell suggested new API.

Now you will set browsers list in browsers key with other options:

autoprefixer({ browsers: ['> 5%', 'IE 7'], cascade: false }).process(css).css;

If you want to clean CSS from any prefixes you should set [] instead of deprecated none.

var cleaner = autoprefixer({ browsers: [] });

Old API was deprecated and prints warnings. It will be removed in 3.1 release.

Core Package

@MoOx and @jonathanong noticed, that autoprefixer package contained many unnecessary code for plugin like grunt-autoprefixer.

So Autoprefixer was split to autoprefixer and autoprefixer-core npm packages. CLI tool and all file system code and dependencies were moved from autoprefixer-core to autoprefixer.

Package autoprefixer provide same API as autoprefixer-core, but all plugin developers should use only autoprefixer-core.

GNU Style for Syntax Errors

Autoprefixer 3.0 uses new PostCSS 2.2. It uses GNU Coding Standards for syntax error messages:

a.css:2:1 Unexpected { in decls

CoffeeScript and other tools uses same format and some IDE can parse this format and open wrong line in editor.

ES6 Migration

To be more familiar to new developers PostCSS was rewritten from CoffeeScript to JS ES6. Now Autoprefixer starts to use more ES6.

Autoprefixer package now contains only ES6 code. Autoprefixer Core uses ES6 only in built tasks, but we want to rewrite it completely.

Maybe you want to help us in ES6 migration? Work is very easy, but it will be routine. This help will makes you one of the biggest contributor (because you will changes many files :) ). Write me and I will send you instructions.

PostCSS Organization

Autoprefixer and Autoprefixer Core repositories was moved to PostCSS organization to be with other official PostCSS plugins.