[css-env-1] Define safe area inset variables w3c#2629

Author: beccahughes

css-env-1/Overview.bs

@@ -77,6 +77,46 @@ tho user agents may define additional undocumented [=environment variables=]:
 
 * Issue: define list of predefined vars
 
+Safe area inset variables {#safe-area-insets}
+------------------------------------------------------------------
+
+<table>
+	<tr>
+		<th>Name</th>
+		<th>Value</th>
+		<th>Media</th>
+	</tr>
+	<tr>
+		<td>safe-area-inset-top</td>
+		<td><<length>></td>
+		<td>visual</td>
+	</tr>
+	<tr>
+		<td>safe-area-inset-right</td>
+		<td><<length>></td>
+		<td>visual</td>
+	</tr>
+	<tr>
+		<td>safe-area-inset-bottom</td>
+		<td><<length>></td>
+		<td>visual</td>
+	</tr>
+	<tr>
+		<td>safe-area-inset-left</td>
+		<td><<length>></td>
+		<td>visual</td>
+	</tr>
+</table>
+
+The safe area insets are four [=environment variables=] that define a rectangle by
+its top, right, bottom, and left insets from the edge of the viewport. For rectangular
+displays, these must all be zero, but for nonrectangular displays they must form a
+rectangle, chosen by the user agent, such that all content inside the rectangle is
+visible, and such that reducing any of the insets would cause some content inside of
+the rectangle to be invisible due to the nonrectangular nature of the display. This
+allows authors to limit the layout of essential content to the space inside of the
+safe area rectangle.
+
 Using Environment Variables: the ''env()'' notation {#env-function}
 ===================================================================