diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md index 73ac6ea6813de..a83bf2d46b704 100644 --- a/aio/content/guide/browser-support.md +++ b/aio/content/guide/browser-support.md @@ -49,6 +49,16 @@ using [Sauce Labs](https://saucelabs.com/) and + +{@a ie11} +## Configuring Angular CLI for compatibility with IE11 + +While Angular supports all browsers listed above, in order to improve the build times and output, Angular CLI applications don't support IE11 by default. + +Angular CLI uses [`browserlist`](https://github.com/browserslist/browserslist) to configure browser support for applications. + +You can enable the IE11 support by following the instructions in the `.browserslistrc` file at the root of your project. + ## Polyfills Angular is built on the latest standards of the web platform. diff --git a/aio/content/guide/build.md b/aio/content/guide/build.md index 7dec0019b1e02..86809fbefa578 100644 --- a/aio/content/guide/build.md +++ b/aio/content/guide/build.md @@ -291,63 +291,6 @@ To disable these warnings, you can add the CommonJS module name to `allowedCommo }, -{@a browser-compat} - -## Configuring browser compatibility - -The CLI uses [Autoprefixer](https://github.com/postcss/autoprefixer) to ensure compatibility with different browser and browser versions. -You may find it necessary to target specific browsers or exclude certain browser versions from your build. - -Internally, Autoprefixer relies on a library called [Browserslist](https://github.com/browserslist/browserslist) to figure out which browsers to support with prefixing. -Browserlist looks for configuration options in a `browserslist` property of the package configuration file, or in a configuration file named `.browserslistrc`. -Autoprefixer looks for the `browserslist` configuration when it prefixes your CSS. - -* You can tell Autoprefixer what browsers to target by adding a browserslist property to the package configuration file, `package.json`: -``` - "browserslist": [ - "> 1%", - "last 2 versions" - ] -``` - -* Alternatively, you can add a new file, `.browserslistrc`, to the project directory, that specifies browsers you want to support: -``` - ### Supported Browsers - > 1% - last 2 versions -``` - -See the [browserslist repo](https://github.com/browserslist/browserslist) for more examples of how to target specific browsers and versions. - -### Backward compatibility with Lighthouse - -If you want to produce a progressive web app and are using [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to grade the project, add the following `browserslist` entry to your `package.json` file, in order to eliminate the [old flexbox](https://developers.google.com/web/tools/lighthouse/audits/old-flexbox) prefixes: - -``` -"browserslist": [ - "last 2 versions", - "not ie <= 10", - "not ie_mob <= 10" -] -``` - -### Backward compatibility with CSS grid - -CSS grid layout support in Autoprefixer, which was previously on by default, is off by default in Angular 8 and higher. - -To use CSS grid with IE10/11, you must explicitly enable it using the `autoplace` option. -To do this, add the following to the top of the global styles file (or within a specific css selector scope): - -``` -/* autoprefixer grid: autoplace */ -``` -or -``` -/* autoprefixer grid: no-autoplace */ -``` - -For more information, see [Autoprefixer documentation](https://autoprefixer.github.io/). - {@a proxy} @@ -534,3 +477,9 @@ function setupForCorporateProxy(proxyConfig) { module.exports = setupForCorporateProxy(proxyConfig); ``` + +{@a browser-compat} + +## Configuring browser compatibility + +See [browser support guide](guide/browser-support).