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.
|
||||
|
||||
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.
|
||||
|
||||
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>
|
||||
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.
|
||||
|
||||
### 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 configure-size-budgets}
|
||||
|
||||
## Configure size budgets
|
||||
## Configuring size budgets
|
||||
|
||||
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.
|
||||
|
@ -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.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
Backward compatibility
|
||||
### 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:
|
||||
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": [
|
||||
|
@ -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}
|
||||
|
||||
|
|
Loading…
Reference in New Issue