この記事は翻訳作業中です。

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-* の値を使用することで、矩形以外の画面を使用している閲覧者でも、コンテンツが見えることを保証するのに役立ちます。

構文

/* Using the four safe area inset values with no fallback values */
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

/* Using them with fallback values */
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
The safe-area-inset-* variables are four environment variables that define a rectangle by its top, right, bottom, and left insets from the edge of the viewport, which is safe to put content into without risking it being cut off by the shape of a non‑rectangular display. For rectangular viewports, like your average laptop monitor, their value is equal to zero. For non-rectangular displays — like a round watch face — the four values set by the user agent form a rectangle such that all content inside the rectangle is visible.

Note: Unlike other CSS properties, user agent-defined property names are case-sensitive.

形式文法

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

Examples

The below example makes use of the optional second parameter of env(), which allows you to provide a fallback value in case the environment variable is not available.

<p>
 If the <code>env()</code> function is supported in your browser, 
 the text of this paragraph should abut the top, right, and bottom
 border, and have 50px of padding between the border and text. The 
 CSS is the equivalent of <code>padding: 0 0 0 50px</code>, because, 
 unlike other CSS properties, user agent property names are case-
 sensitive.
</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);
}

Example values

padding: env(safe-area-inset-bottom, 50px); /* zero for all rectangular user agents */
padding: env(Safe-area-inset-bottom, 50px); /* 50px because UA properties are case sensitive */
padding: env(x, 50px 20px); /* as if padding: '50px 20px' were set because x is not a valid environment variable */
padding: env(x, 50px, 20px); /* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */

The syntax of the fallback, like that of custom properties, allows commas. But, if the property value doesn't support commas, the value is not valid.

Note: User agent properties are not reset by the all property.

仕様書

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

ブラウザーの対応

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

凡例

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

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, uknmr
最終更新者: mdnwebdocs-bot,