env()

env() は CSS の関数で、ユーザーエージェントが定義した環境変数の値を、 var 関数やカスタムプロパティと同じ方法で CSS に挿入するために使用することができます。異なる点は、ユーザーが定義しているのではなくユーザーエージェントが定義しているものであること、カスタムプロパティは宣言されている要素のスコープであるのに対し、環境変数は文書でグローバルなスコープであることです。

ブラウザーに画面上の利用可能な範囲全体を使用するように指示し、 env() 変数を使用できるようにするには、新しいビューポートのメタ値を追加する必要があります。

<meta name="viewport" content="viewport-fit=cover" />

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);
}

加えて、宣言の外部で使用することができないカスタムプロパティとは異なり、 env() 関数はプロパティ値の任意の部分、記述子の任意の部分 (例 メディアクエリ規則) で使用することができます。仕様書が発展すると、セレクターなどの他の場所でも使用することができるかもしれません。

もともとは iOS ブラウザーで、開発者がコンテンツをビューポートの安全な領域に配置できるように提供されていたもので、仕様で定義されている safe-area-inset-* の値を使用することで、矩形以外の画面を使用している閲覧者でも、コンテンツが見えることを保証するのに役立ちます。

/* 代替値なしで4つの安全な矩形までの寸法値を使用 */
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);

safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left

safe-area-inset-* の値は4つの環境変数から成り、矩形ではない画面において、ビューポートの縁から、コンテンツを置いても切り取られる危険がない安全な矩形までの寸法を、上、右、下、左で定義します。一般的なノートパソコンのモニターなど、矩形のビューポートでは、これらの値はゼロに等しくなります。矩形ではない画面 — 例えば円い時計の画面 — では、矩形の中のすべてのコンテンツが表示できるような矩形から、ユーザーエージェントが設定します。

注: ほかの CSS プロパティとは異なり、ユーザーエージェントの定義するプロパティ名は大文字・小文字が区別されます。

env( <custom-ident> , <declaration-value>? )

以下の例では、 env() の第2引数を使用して、環境変数が利用できなかった場合の代替値を提供しています。

<p>
  お使いのブラウザーが <code>env()</code> 関数に対応している場合、
  この段落のテキストと左の境界の間に 50px のパディングが設定されますが、
  上、右、下には設定されません。
  これは、他の CSS プロパティとは異なり、ユーザーエージェントプロパティ名は
  大文字・小文字が区別されるため、 <code>padding: 0 0 0 50px</code>
  と同等の CSS になるからです。
</p>

p {
  width: 300px;
  border: 2px solid red;
  padding:
    env(safe-area-inset-top, 50px)
    env(safe-area-inset-right, 50px)
    env(safe-area-inset-bottom, 50px)
    env(SAFE-AREA-INSET-LEFT, 50px);
}

padding: env(safe-area-inset-bottom, 50px); /* 画面が矩形のユーザーエージェントではゼロ */
padding: env(Safe-area-inset-bottom, 50px); /* UA プロパティは大文字・小文字を区別するため 50px */
padding: env(x, 50px 20px); /* x が妥当な環境変数でなければ padding: '50px 20px' が設定される */
padding: env(x, 50px, 20px); /* x が妥当な環境変数でなく、 '50px, 20px' が妥当なパディング値でないため無視 */

代替値の構文は、カスタムプロパティの場合と同様、カンマが許容されます。ただし、プロパティ値がカンマに対応していない場合、値は妥当ではなくなります。

注: ユーザーエージェントプロパティは all プロパティでリセットされません。

• var(…)
• CSS カスタムプロパティと変数のカスケード
• カスタムプロパティ (--*)
• CSS カスタムプロパティ (変数) の使用
• viewport-fit (@viewport)