Autoprefixer config

[insin]

Autoprefixer's default behaviour is to add prefixes to support configured browsers and remove any prefixes present which aren't required for them; at the time of writing the default config (> 1%, last 2 versions, Firefox ESR) supports the following browsers:

> console.log(require('autoprefixer')().info())
Browsers:
  Chrome for Android: 51
  UC for Android: 9.9
  Android: 4.4
  Chrome: 51, 50, 49, 29
  Edge: 13, 12
  Firefox: 47, 46, 45
  IE: 11, 10
  IE Mobile: 11, 10
  iOS: 9.3, 9.0-9.2
  Opera Mini: all
  Opera: 38, 37
  Safari: 9.1, 9
  Samsung: 4

These browsers account for 87.39% of all users globally

Are there others autoprefixer should be configured to support out of the box, e.g. ios >= 8?

One other thing - css-loader uses cssnano, which also runs Autoprefixer in remove mode by default. If you don't disable that (with css?-autoprefixer) or don't create a shared browserlist config when tweaking support, css-loader will happily remove everything autoprefixer just added!

[gaearon]

Thanks!

I disabled the second pass: 214fc8e

As for the browser support, I agree we need better defaults.
Would you like to submit a PR with those that seem sensible for most projects?

[kripod]

How about using >1%, last 4 versions, Firefox ESR? That would add a fair amount of support for legacy iOS Safari versions, considering the release cycle of Apple products. IE8 would also remain supported by using the aforementioned query.

> console.log(require('autoprefixer')('>1%', 'last 4 versions', 'Firefox ESR').info())
Browsers:
  Chrome for Android: 51
  UC for Android: 9.9
  Android: 4.4, 4.4.3-4.4.4
  Chrome: 52, 51, 50, 49
  Edge: 13, 12
  Firefox: 47, 46, 45, 44
  IE: 11, 10, 9, 8
  IE Mobile: 11, 10
  iOS: 9.3, 9.0-9.2, 8.1-8.4, 8
  Opera Mini: all
  Opera: 38, 37, 36, 35
  Safari: 9.1, 9, 8, 7.1
  Samsung: 4

These browsers account for 90.67% of all users globally

EDIT: Support for IE < 10 could be removed without sacrificing much:

> console.log(require('autoprefixer')('>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 10').info())
Browsers:
  Chrome for Android: 51
  UC for Android: 9.9
  Android: 4.4, 4.4.3-4.4.4
  Chrome: 52, 51, 50, 49
  Edge: 13, 12
  Firefox: 47, 46, 45, 44
  IE: 11, 10
  IE Mobile: 11, 10
  iOS: 9.3, 9.0-9.2, 8.1-8.4, 8
  Opera Mini: all
  Opera: 38, 37, 36, 35
  Safari: 9.1, 9, 8, 7.1
  Samsung: 4

These browsers account for 89.74% of all users globally

[gaearon]

We want to support IE >= 9, just like React.
iOS >= 7 also sounds reasonable.

[kripod]

On the iPhone, OS segmentation is very low because of the highly encouraged free system upgrades. In my opinion, supporting iOS 7 doesn't make as much sense as supporting everything down to iOS 6, because that's the last system software which the iPhone 3GS supports.

IE9 was released on March 14, 2011, and the first iPhone 4 (which only supports iOS < 8) was released on June 24, 2010. The iPhone 4S - which supports all the available iOS software versions to date - was released on October 14, 2011: 7 months after the release of IE9. Smartphones changed a lot during the last 5 years, and many users have adopted newer devices since then.

In conclusion, I think that supporting IE >= 9 is very reasonable, but iOS 7 should only be supported whether iOS 6 gets support, too.

[gaearon]

Ok, iOS >= 8 it is then.

[kripod]

Can it be >1%, last 4 versions, Firefox ESR, not ie < 9, then? It's reasonable because that keeps iOS 8 compatibility until the OS has a user base greater than 1%.

[gaearon]

Sounds good.

[FDiskas]

🙅‍♂️ Can't customize the browser list any more :/

[lewis617]

iOS >= 8 is necessary.

[MihaiStanGDM]

We created a website using react and Material Design. Autoprefixer doesn't add the "-webkit" prefix for display flex properties and it breaks out the layout on Safari 8 (tested on browserstack on an iPhone 6).

Can you please reconfigure Autoprefixer to also add the "webkit" prefix for the CSS flex properties?

I should mention that on 23 Jan 2018 IOS version 11 was released.

[Timer]

You can configure any browser support you'd like in 2.x. You can help beta test this feature by following the instructions here: #3815.

[TryingToImprove]

I am having the same issue as @MihaiStanGDM

[SampsonCrowley]

@Timer I don't see where the instructions to configure browser support are in the post you linked to