autoprefixer

• Return old non-LTS Node.js versions to avoid breaking changes.

• Remove Node.js 13.0-13.7 from supported engines, because of buggy ESM support.

• Replace chalk to kleur (by @lukeed).
• Update docs (by @mbomb007).

<img src="https://user-images.githubusercontent.com/19343/82136582-6073f480-97dd-11ea-83ed-1367462eaba7.png" alt="XCOM coat of arms" width="180" height="240" align="right">

Autoprefixer 9.8 brings IE support for :placeholder-shown.

Placeholder Shown

@tkrotoff found that input:placeholder-shown can be emulated with input:-ms-input-placeholder.

input:-ms-input-placeholder {
  box-shadow: 0 0 0 1px blue;
}

input:placeholder-shown {
  box-shadow: 0 0 0 1px blue;
}

Note, that we already had support for ::placeholder. Selector ::placeholder is for the text of the placeholder. :placeholder-shown is for the input, where placeholder text is shown. In ::placeholder you can’t change the border or size of the <input>.

• Revert -webkit-stretch fix.

• Fix -webkit-stretch support.

• Fix warning text (by @TheRusskiy).

• Fix compatibility with PostCSS Modules.

• Add -ms-user-select: element support.
• Add funding link for npm fund.

• Avoid unnecessary transitions in prefixed selectors (by @fanich37).
• Fix fit-content for Firefox.

<img src="https://user-images.githubusercontent.com/19343/67488300-8bb0be00-f6aa-11e9-8ca1-5b466387bc01.png" alt="Brotherhood of Steel coat of arms" width="180" height="216" align="right">

Autoprefixer 9.7 brings AUTOPREFIXER_GRID environment variable and huge performance improvments.

Grid Environment Variable

Autoprefixer can add CSS Grid polyfills for IE. You need to manually enable it to prove that you understand the limits of polyfill.

In previous versions you can enable Grid polyfill by grid: 'autoplace' option or by /* autoprefixer grid: autoplace */ control comment. But in some cases, developers were not able to use both methods. For instance, during work with Material UI’ CSS-in-JS in Create React App.

Now Autoprefixer supports environment variable to enable CSS Grid polyfill:

AUTOPREFIXER_GRID=autoplace npm build

Performance Improvements

@Knagis found that Browserslist takes 70% of the Autoprefixer time.

We did a lot of improvements in Browserslist and now Autoprefixer should work much faster.

Other

• Fix Cannot read property 'grid' of undefined error

• Fix selector prefixing (by @fanich37).

• Now the real fix for 'startsWith' of undefined error.

• Fix Cannot read property 'startsWith' of undefined error.

• Fix false Replace fill to stretch warning.

• Fix -webkit-line-clamp truncating multi-line text support.

<img src="https://user-images.githubusercontent.com/19343/58825115-5f869900-8646-11e9-8607-3fd5405b6fff.png" alt="Unseen University coat of arms by Damien Tonkin" width="170" height="272" align="right">

Autoprefixer 9.6 marked browsers option as deprecated and added text-orientation and @media (min-resolution: 2x) support.

We added the “Sponsor” button to your repository. You can support Autoprefixer and other open source projects important for your business by Tidelift.

Browsers

Autoprefixer adds prefixes only for target browsers, browsers which is support on your project.

Initially, Autoprefixer had the browsers option to set target browsers. But we found that many tools need target browsers too. postcss-preset-env and babel-preset-env use them to add only actual polyfills, postcss-normalize uses them to add only necessary CSS reset rules, plugins for ESLint and Stylelint will warn you if some of the target browsers doesn’t support your code.

This is why we created Browserslist config file. It is a single config for all tools.

A lot of users still uses the browsers option. We understand them; it is hard to change old practice. Unfortunately, using the browsers option creates many problems. For instance, you can miss that your build tool has own Autoprefixer inside. It will cut your prefixes because it will not know about your target browsers.

This is why, in 9.6, we decided to deprecate the browsers option. Autoprefixer will show a warning on this option. In the next 10.0 release, we will drop this option. This is how you can migrate:

1. Create browserslist key with an array in package.json.

2. Copy queries from the browsers option. If you have browsers: [“last 1 version”, “not dead”], then you need:

      "browserslist": [
        "last 1 version",
        "not dead"
      ]
   

HiDPI Media Query

We all need to support HiDPI/retina screen now. Autoprefixer supports specific media query for HiDPI screens:

.image {
  background-image: url(image@1x.png);
}
@media (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

.image {
  background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2),
       (-o-min-device-pixel-ratio: 2/1),
       (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

Bug we found that CSS Values 4 spec added x alias for dppx.

Autoprefixer 9.6 supports @media (min-resolution: 2x) shortcut. Note, that Autoprefixer will not convert it to 2dppx. Autoprefixer adds only prefixes. Use postcss-preset-env to add polyfills.

Other

• text-orientation property support was added.
• @jmmarco added CONTRIBUTING.md

• Fix backdrop-filter for Edge (by @AleshaOleg).
• Fix min-resolution media query support in Firefox < 16.

<img src="https://user-images.githubusercontent.com/19343/54381375-f81f0580-4663-11e9-9113-7098a1463f76.png" alt="Coat of Arms of Hogwarts" width="200" height="279" align="right">

Autoprefixer 9.5 brings mask-composite support.

a {
  mask-composite: add;
}
b {
  mask: url(intersect.png) intersect, url(exclude.png);
}

a {
  -webkit-mask-composite: source-over;
          mask-composite: add;
}
b {
  -webkit-mask: url(intersect.png), url(exclude.png);
  -webkit-mask-composite: source-in, xor;
          mask: url(intersect.png) intersect, url(exclude.png);
}

Thanks to @semeleven for implementation and @iamvdo for suggestion.

• Add warning for named Grid rows.

• Fix grid-template and @media case (by @bogdan0083).

• Fix calc() support in Grid gap.

• Fix infinite loop on mismatched parents.

• Fix warning text (by @Aljullu).

• Fix text-decoration-skip-ink support.

• Use direction value for -ms-writing-mode (by @webschik).
• Fix warning text (by @zzzzBov).

• Add warning to force flex-start instead of start (by @aduh95).
• Fix docs (by @coliff).

• Fix Grid autoplacement warning.

• Fix unnecessary Flexbox prefixes in Grid elements.

<img src="https://user-images.githubusercontent.com/19343/49359288-7d1f8800-f721-11e8-8b7f-27fd56049d34.png" alt="Coat of Arms of Australia" width="235" height="182" align="right">

Autoprefixer 9.4.0 brings limited autoplacement support to the IE CSS Grid.

Grid Autoplacement

If the grid option is set to "autoplace", limited autoplacement support is now added to the Autoprefixer CSS Grid translations. You can also use the /* autoprefixer grid: autoplace */ control comment to enable autoplacement directly in your CSS.

In order to use the new autoplacement feature, you must define both rows and columns when declaring the grid template.

/* Input CSS */

/* autoprefixer grid: autoplace */

.autoplacement-example {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-gap: 20px;
}

/* Output CSS */

/* autoprefixer grid: autoplace */

.autoplacement-example {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto 20px auto;
  grid-template-rows: auto auto;
  grid-gap: 20px;
}

.autoplacement-example > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.autoplacement-example > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.autoplacement-example > *:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.autoplacement-example > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

Autoplacement support in Autoprefixer is currently very limited in what it can do. Please read the Grid Autoplacement support in IE section before using this new feature.

Thanks to @bogdan0083 for implementing the new feature, @Dan503 for documenting it, and @evandiamond for coming up with the initial idea.

Other Changes

• Remove some unnecessary warnings for Grid (by @fanich37).

• Fix Grid prefixes with repeat() value (by @bogdan0083).

<img src="https://user-images.githubusercontent.com/19343/47355871-8df3cd00-d690-11e8-8ca3-5574d0104ff3.png" alt="Coat of Arms of Oklahoma" width="200" height="202" align="right">

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.

• Fix broken AST.

<img src="https://user-images.githubusercontent.com/19343/46919884-e271bb00-cfb3-11e8-8473-6c30fcfc5207.png" alt="Coat of Arms of Omsk" width="240" height="204" align="right" />

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

• Remove @babel/register from dependencies.

• Use Babel 7.

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

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

• Retain grid-gap through @media (by @bogdan0083).
• Fix grid-template and @media (by @bogdan0083).
• Fix Grid areas searching error (by @@bogdan0083).
• Fix span X Grid prefix (by @@bogdan0083).
• Fix docs (by @halfzebra).

<img src="https://user-images.githubusercontent.com/19343/43619254-dd41b290-969a-11e8-8b75-3041f37fe09b.png" alt="Coat of Arms of Canada" width="200" height="200" align="right" />

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.

• Show warning on Grid area names conflict (by @bogdan0083).
• Fix documentation (by @svewag).

• Fix nested at-rules in Grid prefixes (by @ivandata)

<img src="https://user-images.githubusercontent.com/19343/42785885-e32d7cec-8908-11e8-8141-156876cc296b.png" alt="Coat of Arms of Canada" width="200" height="269" align="right" />

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

• Do not show Grid warnings if IE was not selected

• Fix stretch prefix in Chrome >= 46.

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

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

• Fix grid-template with media queries (by @yepninja)

<img src="https://user-images.githubusercontent.com/19343/40873346-2e319f4e-6667-11e8-9fe4-9fe598e9be4f.png" alt="Emblem of the Grand Lodge of Massachusetts" width="200" height="200" align="right" />

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

• Fix grid-template support wit auto row sizes (by @y-gagar1n).

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

<img src="https://user-images.githubusercontent.com/19343/39965215-ddeae28e-5662-11e8-85b4-7ae81a1742b0.png" alt="Coat of arms of Lisbon" width="200" height="221" align="right" />

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 <nobr>in -ms- grids</nobr>.

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);
}

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

<img src="https://user-images.githubusercontent.com/19343/39393137-a14441ba-4a8f-11e8-90f9-c31599b5380b.jpg" alt="Bludor family coat of arms" width="220" height="242" align="right" />

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 */
}

<img src="https://user-images.githubusercontent.com/19343/38788020-6f42dc6a-40ff-11e8-998d-07327b440c7d.png" alt="Seal of the City of Pittsburgh" width="210" height="210" align="right" />

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.

<img src="https://user-images.githubusercontent.com/19343/37743223-6fd271d2-2d3f-11e8-8bf7-2694c9cee7e3.png" alt="The Great Seal of the State of Kansas" width="200" height="200" align="right" />

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;
}

<img src="https://user-images.githubusercontent.com/19343/36920986-a2157a98-1e73-11e8-8f7c-f75a012def32.png" alt="Kingdom Come: Deliverance logo" width="190" height="260" align="right" />

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.