docs: move and update browser compatibility docs to browser-support g…

…uide (#42334)

I simplified the content significantly since most of it is not relevant any more.

Fixes #26525

PR Close #42334

aio/content/guide/browser-support.md

@@ -49,6 +49,16 @@ using [Sauce Labs](https://saucelabs.com/) and
 
 </div>
 
+
+{@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.

aio/content/guide/build.md

@@ -291,63 +291,6 @@ To disable these warnings, you can add the CommonJS module name to `allowedCommo
 },
 </code-example>
 
-{@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).