docs: add autoprefixer backward compatability instruction (#32109)
PR Close #32109
This commit is contained in:
parent
52a6da043d
commit
4c061271db
|
@ -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}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue