Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add autoprefixer backward compatability instruction #32109

Closed
wants to merge 1 commit into from
Closed

Add autoprefixer backward compatability instruction #32109

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
34 changes: 22 additions & 12 deletions aio/content/guide/build.md
View file
Open in desktop
Expand Up @@ -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

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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": [
Expand All @@ -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}

Expand Down