MDN web docs env()の記事をまとめる

<h2>情報源</h2>
<ul>
<li>env()
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/env#using_env_to_ensure_buttons_are_not_obscured_by_device_ui" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/env#using_env_to_ensure_buttons_are_not_obscured_by_device_ui</a></li>
</ul>
<h2>まとめ</h2>
<ul>
<li><code>env()</code>を使用するとuser agentが定義した環境変数をCSSに挿入することができる。</li>
<li><code>env()</code>はプロパティの値のどのような場所でも使用できる。またdescriptorのどのような場所でも使用できる。</li>
<li><code>env()</code>はセレクタでは使用することはできない。</li>
<li>iOSブラウザではビューポートの安全なエリアにコンテンツを配置できるように、<code>safe-area-inset-*</code>という値が定義されている。</li>
<li>この値を使用することで矩形ではないディスプレイでもコンテンツが表示されることを保証することができる。</li>
<li><code>env()</code>が解決する問題にはデバイスの通知がアプリのUIをカバーしてしまう問題がある。</li>
<li>他にもアプリケーションウィンドウのエリアを最大限に利用するためのWindow Controls Overlay機能を使うときに役立つ。</li>
<li><code>titlebar-area-*</code>を使用するとタイトルバーがあるべき場所に要素を配置することができる。またwindow操作ボタンを明確に配置することができる。</li>
</ul>
<pre><code class="language-css">/* フォールバックなしで使用する */
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

/* フォールバックありでの使用 */
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);
</code></pre>
<blockquote>
To tell the browser to use the whole available space on the screen,
and so enabling us to use the env() variables, we need to add a new viewport meta value:
</blockquote>
ブラウザにスクリーンの全てを使用することを伝え、env()を使用するには新たなviewport meta valueを追加する必要がある。
<pre><code class="language-html">&lt;meta name=&quot;viewport&quot; content=&quot;viewport-fit=cover&quot; /&gt;
</code></pre>
以下のようにすることでbodyはOSの通知などに隠される心配がなく安全なエリア内に収まる。
<pre><code>body {
 padding:
 env(safe-area-inset-top, 20px)
 env(safe-area-inset-right, 20px)
 env(safe-area-inset-bottom, 20px)
 env(safe-area-inset-left, 20px);
}
</code></pre>

env()に関するまとめ