iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: add autoprefixer backward compatability instruction (#32109) 

PR Close #32109
This commit is contained in:
Judy Bogart 2019-08-12 12:19:39 -07:00 committed by Kara Erickson
parent 52a6da043d
commit 4c061271db
1 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,13 +8,7 @@ This page discusses build-specific configuration options for Angular projects.
You can define different named build configurations for your project, such as *stage* and *production*, with different defaults. You can define different named build configurations for your project, such as *stage* and *production*, with different defaults.
Each named build configuration can have defaults for any of the options that apply to the various build targets, such as `build`, `serve`, and `test`. The [Angular CLI](cli) `build`, `serve`, and `test` commands can then replace files with appropriate versions for your intended target environment. Each named configuration can have defaults for any of the options that apply to the various [builder targets](guide/glossary#target), such as `build`, `serve`, and `test`. The [Angular CLI](cli) `build`, `serve`, and `test` commands can then replace files with appropriate versions for your intended target environment.
The following figure shows how a project has multiple build targets, which can be executed using the named configurations that you define.
<figure>
<img src="generated/images/guide/build/build-config-targets.gif" alt="build configurations and targets">
</figure>
### Configure environment-specific defaults ### Configure environment-specific defaults
@ -170,8 +164,9 @@ You can also configure the `serve` command to use the targeted build configurati
``` ```
{@a size-budgets} {@a size-budgets}
{@a configure-size-budgets}
## Configure size budgets ## Configuring size budgets
As applications grow in functionality, they also grow in size. As applications grow in functionality, they also grow in size.
The CLI allows you to set size thresholds in your configuration to ensure that parts of your application stay within size boundaries that you define. The CLI allows you to set size thresholds in your configuration to ensure that parts of your application stay within size boundaries that you define.
@ -296,10 +291,9 @@ Autoprefixer looks for the `browserslist` configuration when it prefixes your CS
See the [browserslist repo](https://github.com/browserslist/browserslist) for more examples of how to target specific browsers and versions. See the [browserslist repo](https://github.com/browserslist/browserslist) for more examples of how to target specific browsers and versions.
<div class="alert is-helpful"> ### Backward compatibility with Lighthouse
Backward compatibility
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: 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": [ "browserslist": [
@ -309,7 +303,23 @@ If you want to produce a progressive web app and are using [Lighthouse](https://
] ]
``` ```
</div> ### 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} {@a proxy}