honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: move and update browser compatibility docs to browser-support guide (#42334)

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

Fixes #26525

PR Close #42334
This commit is contained in:
Igor Minar 2021-05-25 15:35:08 -07:00 committed by Zach Arend
parent da1a868ec2
commit 40bbcaa12d
2 changed files with 16 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
aio/content/guide/browser-support.md
View File

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

63
aio/content/guide/build.md
View File

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