From 4c061271db0ace74f8d294585b6cc7cf2e896f78 Mon Sep 17 00:00:00 2001
From: Judy Bogart <jbogart@gmail.com>
Date: Mon, 12 Aug 2019 12:19:39 -0700
Subject: [PATCH] docs: add autoprefixer backward compatability instruction
 (#32109)

PR Close #32109
---
 aio/content/guide/build.md | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/aio/content/guide/build.md b/aio/content/guide/build.md
index 87e8d41b81..d1d6780077 100644
--- a/aio/content/guide/build.md
+++ b/aio/content/guide/build.md
@@ -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}