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

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

Merged
merged 1 commit into from Jun 26, 2018
Merged

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

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
40 changes: 40 additions & 0 deletions css-env-1/Overview.bs
View file
Open in desktop
Expand Up @@ -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}
===================================================================

Expand Down