env()

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

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 プロパティでリセットされません。

仕様書

仕様書 状態 備考
CSS Environment Variables Module Level 1
env() の定義
編集者草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
env()
実験的
Chrome 完全対応 69Edge 未対応 なしFirefox 完全対応 65IE 未対応 なしOpera 完全対応 56Safari 完全対応 11.1
完全対応 11.1
未対応 11 — 11.1
代替名
代替名 非標準の名前 constant を使用しています。
WebView Android 完全対応 69Chrome Android 完全対応 69Firefox Android 完全対応 65Opera Android ? Safari iOS 完全対応 11.1
完全対応 11.1
未対応 11 — 11.1
代替名
代替名 非標準の名前 constant を使用しています。
Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報