CSS Reference

env()

環境変数の値を使用する

env() 関数は、CSSで環境変数の値を使用したい場合に利用可能なCSS関数です。env() 関数は、CSS内でどのプロパティの値でも、あるいは任意の@規則における記述子としても使用できます。

env() 関数の基本的な構文は下記のようになります。

env() = env( <custom-ident> <integer [0,∞]>*, <declaration-value>? )

環境変数は、ユーザエージェントによって定義されるか、ユーザーによって定義されます。

env() 関数の引数はカンマ（,）で区切って複数の値を指定できますが、1つ目のカンマ以降は、すべてフォールバックと見なされます。

つまり、

body {
  padding: 1rem 1rem env(safe-area-inset-bottom, 20px);
}

のように指定した場合、safe-area-inset-bottom という環境変数がユーザエージェントによって定義されている場合はその値が、されていない場合は 20px がフォールバックとして使用されることになります。

ユーザエージェントによって定義される環境変数

CSS仕様では、下記の環境変数が定義されています。実際には、各ユーザエージェントごとにサポートする環境変数が異なる場合があるため注意が必要です（safe-area-inset-* については現時点で各モダンブラウザにおけるサポートが行われています）。

Safe area inset variables

「Safe area inset variables」（セーフエリアインセット変数）と呼ばれる環境変数として safe-area-inset- で始まる、下記、4つの環境変数が定義されています。

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

矩形（4つの角がすべて直角である四角形）ディスプレイの場合、これらすべての値は 0 となりますが、スマートフォンやタブレットのディスプレイのように、角が丸みを帯びていたり、あるいはカメラやセンサーを配置するために、ディスプレイの上部など、画面の一部に切り欠き（ノッチ）やパンチホールがある場合は、それら画面が描写されいない部分を避けるためのセーフエリアがユーザエージェントによって定義されます。

これら環境変数を使用し、例えば下記のように指定することで、セーフエリアを考慮しつつ、安全な余白を設定するようなことができます。

body {
  padding: 
           calc(1rem + env(safe-area-inset-top))
           calc(1rem + env(safe-area-inset-right))
           calc(1rem + env(safe-area-inset-bottom))
           calc(1rem + env(safe-area-inset-left));
}

Viewport segment variables

「Viewport segment variables」（ビューポートセグメント変数）と呼ばれる環境変数として viewport-segment- で始まる、下記、6つの環境変数が定義されています。

この環境変数は、ビューポートがハードウェアの特徴、例えば、折りたたみ式デバイスのヒンジ部分やマルチディスプレイなどによって分割されている場合、そのビューポート内の、論理的に独立した領域の位置や大きさを定義するための環境変数です。

viewport-segment-width と viewport-segment-height は、各セグメントの幅と高さを表し、viewport-segment-top、viewport-segment-left、viewport-segment-bottom、viewport-segment-right は、それぞれセグメントの上下左右の位置を表します。

例えば、ビューポートが左右2つのセグメントに分割された場合、左側のビューポートセグメントは (0, 0) というインデックスを持ち、右側のビューポートセグメントは (1, 0) というインデックスを持つこととなります。

もし、ビューポートが縦に2分割されている場合、上側のビューポートセグメントは (0, 0) というインデックスを持ち、下側のビューポートセグメントはビューポートセグメントは (0, 1) というインデックスを持つこととなります。

ただし、この環境変数は、仕様書内で定義されているのみで、具体的な実装例は現時点では見当たりません。

env()のサンプルソース

body {
  padding:  calc(1rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome