v10.2.0

Compare Source

Autoprefixer 10.2 now has built-in TypeScript definitions. You do not need @types/autoprefixer anymore.

Thanks to @​Semigradsky and DefinitelyTyped’s contributors.

@​Sheraff also improved docs.

v10.1.0

Compare Source

Autoprefixer 10.1 improved min-resolution support.

@​infusion added dpcm unit support and num2fraction with Fraction.js, which uses Farey Sequences as a rational approximation (more precise) and simplifies the fraction using continued fractions to ɛ <0.001 afterward.

/* input */
@​media (min-resolution: 113.38dpcm) {
  …
}

/* output */
@​media (-webkit-min-device-pixel-ratio: 3),
       (min--moz-device-pixel-ratio: 3),
       (-o-min-device-pixel-ratio: 3/1),
       (min-resolution: 113.38dpcm) {
  …
}

v10.0.4

Compare Source

• Fixed Cannot read property 'proxyOf' of undefined error (by Igor Kamyshev).

v10.0.3

Compare Source

• Fixed substract to subtract value for mask-composite (by Michelle Enos).

v10.0.2

Compare Source

• Removed -ms-user-select: all because IE and old Edge don’t support it.
• Fixed Grid Layout warning.

v10.0.1

Compare Source

• Fix PostCSS 8.1 compatability.
• Add our OpenCollective to package.json.
• Clean up code (by Sukka).

v10.0.0

Compare Source

Autoprefixer 10 is based on top of PostCSS 8 (check Known Issues section before updating).

Node.js 6.x, 8.x, 11.x support was removed.

Now you need to install Autoprefixer by npm install --save-dev autoprefixer postcss. We moved postcss from dependencies to peerDependencies according to new PostCSS plugin guidelines.

v3.0.0

Compare Source

Breaking:

• Require Node.js 8 and Grunt 1 468aec3

Enhancements:

• Add indent option (#​101) f8e1fd9

v3.0.0

Compare Source

v2.2.1

Compare Source

v2.2.0

Compare Source

v2.1.0

Compare Source

v2.0.0

Compare Source

v2.0.0

Compare Source

v4.0.0

Compare Source

v2.0.0

Compare Source

v2.0.0

Compare Source

v2.1.0

Compare Source

v2.0.7

Compare Source

v2.0.6

Compare Source

v2.0.5

Compare Source

v2.0.4

Compare Source

v2.0.3

Compare Source

v2.0.0

Compare Source

v9.3.1

Compare Source

• Fix Grid prefixes with repeat() value (by Bogdan Dolin).

v9.3.0

Compare Source

Autoprefixer 9.3 brings place-self support for Grid Layout

place-self

@​Dan503 and @​bogdan0083 found a way to impement support for another Grid property

.grid > .center {
  place-self: center;
}

.grid > .center {
  -ms-grid-row-align: center;
  -ms-grid-column-align: center;
  place-self: center;
}

Other Changes

@​Dan503 and @​bogdan0083 also detected and fixed issue with Grid row/column span inheritance.

v9.2.1

Compare Source

• Fix broken AST.

v9.2.0

Compare Source

Autoprefixer 9.2 brings many new improvements for -ms- prefixes for Grid Layout.

New Ways to Enable/Disable Grid Layout

In previous versions, you had needed to pass grid: true to enable prefixes for Grid Layout. But not all users have access to Autoprefixer options. CodePen, Create Reat App or Angular CLI doesn’t allow you to do it.

In Autoprefixer 9.2 @​fanich37 added special control comments:

/* autoprefixer grid: on */
.grid {
    display: grid;
    grid-gap: 33px;
    grid-template:
        "head head  head" 1fr
        "nav  main  main" minmax(100px, 1fr)
        "nav  foot  foot" 2fr /
        1fr   100px 1fr;
}

.non-ie .grid {
    /* autoprefixer grid: off */
    …
}

Autoprefixer doesn’t support Grid properties and values with auto. In 9.2 it will ignore whole @supports content if it contains these Grid properties:

@​supports (grid-auto-rows: 100px) {
    /* Autoprefixer will not show Grid warnings and will not add prefixes here */
}

Smarter grid-area

Autoprefixer supports grid-template even if it was not in IE Grid spec.

But in 9.2 @​bogdan0083 really improve it according to @​Dan503 idea. Now Autoprefixer supports even overriding grid-template.

/* autoprefixer grid: on */
.grid {
    display: grid;
    grid-template:
        "nav  main" minmax(100px, 1fr)
        "nav  foot" 2fr /
        100px 1fr;
}

.grid.no-menu {
    grid-template:
        "main" minmax(100px, 1fr)
        "foot" 2fr
}

Other Changes

• Improve Grid warnings (by @​Dan503 and @​bogdan0083)
• Improve docs (by @​JoshuaHall, @​Drarok, @​revelt, and @​janczer).

v9.1.5

Compare Source

• Remove @babel/register from dependencies.

v9.1.4

Compare Source

• Use Babel 7.

v9.1.3

Compare Source

• Sort properties in autoprefixer --info alphabetically.
• Fix old Firefox gradient prefix.

v9.1.2

Compare Source

• Fix autoprefixer --info in new Node.js.

v9.1.1

Compare Source

• Retain grid-gap through @media (by Bogdan Dolin).
• Fix grid-template and @media (by Bogdan Dolin).
• Fix Grid areas searching error (by Bogdan Dolin).
• Fix span X Grid prefix (by Bogdan Dolin).
• Fix docs (by Eduard Kyvenko).

v9.1.0

Compare Source

Autoprefixer 9.1 brings background-clip: text and fix span in IE Grid.

Background Clip

background-clip: text become to be the standard and got Edge support. So we added it to Autoprefixer:

.title {
  background: linear-gradient(yellow, red);
   -webkit-background-clip: text;
           background-clip: text;
}

Note, that Edge expect -webkit- prefix for this property.

Grid Layout Fix

@​bogdan0083 fixed an issue when media-query override some grid-template.

v9.0.2

Compare Source

• Show warning on Grid area names conflict (by Bogdan Dolin).
• Fix documentation (by Sven Wagner).

v9.0.1

Compare Source

• Fix nested at-rules in Grid prefixes (by Ivan Malov).

v9.0.0

Compare Source

Autoprefixer 9.0 brings Browserslist 4.0 and drops Node.js 4 support.

Breaking Changes

We removed Node.js 4 and Node.js 9 support since it doesn’t have security updates anymore.

We removed IE and “dead” browsers (without security updates) from Babel’s targets. Don't worry, Autoprefixer still generate IE-compatible code. These changes affect websites which run Autoprefixer on client-side like CodePen.

last 2 version
not dead
not Explorer 11
not ExplorerMobile 11
node 10
node 8
node 6

Autoprefixer Rails 9.0 dropped the RubyRacer and Sprockets 3 support.

Browserslist 4.0

Autoprefixer 9.0 uses Browserslist 4.0 to get your target browsers.

Now you use Browserslist to specify Node.js versions. Babel 7 will use Browserslist config as well.

Also, Browserslist 4.0 will warn you if you didn’t update Can I Use DB for last than 6 month.

PostCSS 7.0

Autoprefixer 9.0 uses PostCSS 7.0

v8.6.5

Compare Source

• Do not show Grid warnings if IE was not selected.

v8.6.4

Compare Source

• Fix stretch prefix in Chrome >= 46.

v8.6.3

Compare Source

• Add warnings for unsupported Grid features.
• Add warnings about wrong Grid properties.
• Add note about grid option for grid properties in autoprefixer --info.

v8.6.2

Compare Source

• Fix error during adding Grid prefixes in @media (by Evgeny Petukhov).

v8.6.1

Compare Source

• Fix grid-template with media queries (by Evgeny Petukhov).

v8.6.0

Compare Source

Autoprefixer 8.6 brings gap property support and two values support for grid-gap/gap.

Grid Gap

CSSWG renamed grid-gap property to gap.

@​yepninja added gap support with 2 values support.

Grid layout code bellow will work even in IE if you pass grid: true option to Autoprefixer:

.main {
    gap: 10px 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "head head head"
                         "nav main main"
                         "nav foot foot";
}

Other Changes

• Add ignoreUnknownVersions option for Browserslist

v8.5.2

Compare Source

• Fix grid-template support wit auto row sizes (by Yury Timofeev).

v8.5.1

Compare Source

• Remove unnecessary warning on -webkit-fill-available.

v8.5.0

Compare Source

Autoprefixer 8.5 brings grid-gap support and fix radial-gradient.

Grid Gap

@​yepninja continues his amazing work of adding CSS Grid Layout support to Autoprefixer.

Now he brought grid-gap. It is amazing work since IE 11 has gaps support in -ms- grids.

To add grid-gap support for IE 11 Autoprefixer adds addition grid cells. Unfortunately, it will work only if you have grid-template in the same rule with grid-gap. We had big discussion with a community about these limits.

.page {
    grid-gap: 33px;
    -ms-grid-rows: 1fr 33px minmax(100px, 1fr) 33px 2fr;
    -ms-grid-columns: 1fr 33px 100px 33px 1fr;
    grid-template:
        "head head  head" 1fr
        "nav  main  main" minmax(100px, 1fr)
        "nav  foot  foot" 2fr /
        1fr   100px 1fr;
}

Set postcss-gap-properties before Autoprefixer if you want to use new gap property.

Radial Gradients

Old gradients with prefixes used a different direction syntax. Autoprefixer converts direction to old syntax (or warn you to rewrite direction from old to new syntax).

But it has an issue with extent keywords like circle closest-corner. We fixed it after @​BaliBalo report.

.mask {
    -webkit-mask-image: -webkit-radial-gradient(100% 50%, circle closest-corner, black, white);
            mask-image: radial-gradient(circle closest-corner at 100% 50%, black, white);
}

v8.4.1

Compare Source

• Fix working in old PostCSS versions (by Diablohu).

v8.4.0

Compare Source

Autoprefixer 8.4 brings new control comment to ignore next line.

@​vostrik implemented the @​levin-du’s idea of having control comment to disable only next property/rule:

.logo {
    /* autoprefixer: ignore next */
    user-select: none; /* ← ignored */
    mask: url(mask.jpg); /* ← will be prefixed */
}

/* autoprefixer: ignore next */
::placholder /* ← ignored */ {
    text-decoration-style: dotted; /* ← will be prefixed */
}

v8.3.0

Compare Source

Autoprefixer 8.3 adds @media support for grid-template and fixes gradient direction warning.

Media and Grid Layout

@​evgeny-petukhov continues his great work for Grid Layout support in Autoprefixer.

Now he improved @media support. Now this CSS will work in IE:

body {
    grid-template:
        [header-left] "head head" 30px [header-right]
        [main-left]   "nav  main" 1fr  [main-right]
        [footer-left] "nav  foot" 30px [footer-right]
        / 120px repeat(4, 250px 10px);
}

header {
    grid-area: head;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}

@​media (min-width: 1000px) {
    body {
        grid-template:
            [header-left] "head" 30px [header-right]
            [main-left]   "main" 1fr  [main-right]
            [footer-left] "footer" 30px [footer-right]
            / 1fr;
    }
}

Don’t forget that Autoprefixer inserts Grid Layout prefixes only if you set grid: true option.

Gradient Warning

@​radium-v found that Autoprefixer show warning even if cover is outside of radial-gradient.

a {
    background: radial-gradient(#fff, transparent) 0 0 / cover no-repeat #f0f;
}

@​kotfire improve old direction detection and fix this issue.

v8.2.0

Compare Source

Autoprefixer 8.2 brings color-adjust support.

@​YozhikM, @​soul-wish, and @​yuriyalekseyev did a great work. They added new data to Can I Use and implemented a new feature to Autoprefixer.

body {
    -webkit-print-color-adjust: exact;
            color-adjust: exact;
}

v8.1.0

Compare Source

Autoprefixer 8.1 brings overscroll-behavior and better Grid support.

Overscroll Behavior

@​Malvoz suggested the great idea to polyfill overscroll-behavior for IE 11 and Edge by -ms-scroll-chaining.

.none {
    -ms-scroll-chaining: none;
        overscroll-behavior: none;
}
.contain {
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
}
.auto {
    -ms-scroll-chaining: chained;
        overscroll-behavior: auto;
}

Note, that overscroll-behavior-x and overscroll-behavior-y are not supported since -ms- property doesn’t have this freedom.

Better Grid Layout

@​evgeny-petukhov continues his amazing work and now Autoprefixer polyfills Grid Layout for IE in more cases.

He added grid-template shortcut support and improve support of grid-column-end and grid-row-end.

Grid properties were fixed in @supports. We recommend:

• To select modern Grid browsers and IE 11: @supports (display: grid).
• To select only Grid browsers without IE 11: @supports (grid-gap: 0).

Note, that you need grid: true option to Autoprefixer to add -ms- prefixes for Grid Layout.

v8.0.0

Compare Source

Autoprefixer 8.0 uses Browserslist 3.0, has autoprefixer CLI tool instead of autoprefixer-info.

Browserslist 3.0

The main feature of Autoprefixer 8.0 is Browserslist 3.0. In the new version, it brings new default browsers. It will affect you only if you don’t change browsers by .browserslistrc or browserslist key in package.json (we don’t recommend to use browsers option).

In one hand, Browserslist 3.0 usage statistics limit for default browsers was reduced from >1% to >0.5%. In another hand, we remove dead browsers from default browsers. The dead browser is a browser with < than 1% in the global market and who don’t have security updates. Right now IE 10 and BlackBerry browser are dead browsers.

Read other notable changes in Browserslist 3.0 changelog. We recommend subscribing for @​Browserslist twitter account.

CLI Tool

CLI tool to show target browsers and used prefixes was renamed to autoprefixer:

$ 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

With the new name, npx will install Autoprefixer automatically if it is missed in the current project.

Page Breaks for Firefox

Previous Autoprefixer versions replace break-* properties to page-break-* for Firefox.

But this feature didn’t add any vendor prefix. Autoprefixer goal is to take care only about prefixes, not polyfills. For better consistency, we removed this feature from Autoprefixer.

Don’t afraid, the PostCSS ecosystem has many plugins for CSS polyfills. We recommend to take look at postcss-preset-env to write future CSS today.

v7.2.6

Compare Source

• Fix -ms- prefix for grid cells with same grid-area (by Evgeny Petukhov).

v7.2.5

Compare Source

• Fix multiple prefixes in declaration value.

v7.2.4

Compare Source

• Fix IE 10 support.

v7.2.3

Compare Source

• Fix grid-template-areas in @media (by Evgeny Petukhov).

v7.2.2

Compare Source

• Fix _autoprefixerDisabled is undefined issue.

v7.2.1

Compare Source

• Fix IE and other old JS runtimes support.

v7.2.0

Compare Source

Autoprefixer 7.2 brings better Grid support for IE
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).

v7.1.6

Compare Source

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

v7.1.5

Compare Source

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

v7.1.4

Compare Source

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

v7.1.3

Compare Source

• Add warning for old radial-gradient direction syntax.

v7.1.2

Compare Source

• Fix text-decoration shortcut support.

v7.1.1

Compare Source

• Remove non--webkit- intrinsic prefixes in Grid Layout (by 一丝).

v7.1.0

Compare Source

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
//   …

v7.0.1

Compare Source

• Fix Autoprefixer for old JS runtimes.

v7.0.0

Compare Source

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.

v0.9.0

Compare Source

• Schedule: "at any time"
• Branch name: renovate/grunt-postcss-0.x
• Upgrade grunt-postcss to ^0.9.0

• Schedule: "at any time"
• Branch name: renovate/autoprefixer-9.x
• Upgrade autoprefixer to ^9.0.0

• Schedule: "at any time"
• Branch name: renovate/coffeelint-2.x
• Upgrade coffeelint to ^2.0.0

• Schedule: "at any time"
• Branch name: renovate/grunt-contrib-clean-2.x
• Upgrade grunt-contrib-clean to ^2.0.0

• Schedule: "at any time"
• Branch name: renovate/grunt-contrib-cssmin-3.x
• Upgrade grunt-contrib-cssmin to ^3.0.0

• Schedule: "at any time"
• Branch name: renovate/grunt-contrib-less-2.x
• Upgrade grunt-contrib-less to ^2.0.0

• Schedule: "at any time"
• Branch name: renovate/grunt-lesslint-4.x
• Upgrade grunt-lesslint to ^4.0.0

• Schedule: "at any time"
• Branch name: renovate/matchdep-2.x
• Upgrade matchdep to ^2.0.0

package.json

• autoprefixer ^9.3.1
• coffeelint ^2.0.0
• grunt ^1.0.3
• grunt-bump ^0.8.0
• grunt-coffeelint 0.0.16
• grunt-concurrent ^2.3.1
• grunt-contrib-clean ^2.0.0
• grunt-contrib-cssmin ^3.0.0
• grunt-contrib-less ^2.0.0
• grunt-contrib-watch ^1.1.0
• grunt-conventional-changelog ^6.1.0
• grunt-postcss ^0.9.0
• matchdep ^2.0.0

.travis.yml

• node 10