CSS - env()

概要

形式env(property-name value*, declaration-value?)
サポートhttps://caniuse.com/css-env-function

説明

ユーザーエージェントの環境変数を参照します。第一引数には環境変数名を指定します。第二引数は省略可能で、第一引数を参照できなかった場合の代替値を指定します。環境変数名には下記などがあります。

safe-area-inset-*

スマートフォンブラウザで通知やツールメニューなどでコンテンツの一部が隠れてしまう場合、隠れることなく表示可能な矩形の最大サイズの、上下左右のオフセット値を参照します。例えばスマートウオッチのような円形の表示領域を持つブラウザであっても、この値を参照することにより、確実に矩形を表示できる範囲を指定することができます。(サポート状況)

.container {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

safe-area-max-inset-*

safe-area-inset-* が通知等によって動的に変動する値であるのに対し、safe-area-max-inset-* は動的理由によりコンテンツが隠れない場合の最大の表示範囲に関する静的な情報を返します。

.container {
  padding-top: env(safe-area-max-inset-top);
  padding-bottom: env(safe-area-max-inset-bottom);
  padding-right: env(safe-area-max-inset-right);
  padding-left: env(safe-area-max-inset-left);
}

viewport-segment-*

デバイスが折り畳み式やデュアルスクリーンにより複数の画面に分割されている場合の、それぞれの画面の幅・高さ・オフセットに関する情報を返します。変数名の後ろには参照したい画面を示す2つの整数を指定します。画面が2×2の4つに分割されている場合、(x, y) は (0, 0), (0, 1), (1, 0), (1, 1) のいずれかとなります。まだサポートしているブラウザは無いようです。

.segment-0-1 {
  width: env(viewport-segment-width 0 1);
  height: env(viewport-segment-height 0 1);
  padding-top: env(viewport-segment-top 0 1);
  padding-left: env(viewport-segment-left 0 1);
  padding-bottom: env(viewport-segment-bottom 0 1);
  padding-right: env(viewport-segment-right 0 1);
}

preferred-text-scale

OS の設定でテキストサイズを拡大・縮小している場合、その倍率を取得します。2025年7月の Chrome 138 でサポートされたとリリースメモには記載されていますが、指定方法が誤っているのか動作確認できていません。

body {
  font-size: calc(1rem * env(preferred-text-scale, 2));
}

titlebar-area-*

デスクトップ端末にインストールされた PWA において、タイトルバーエリアの X位置、Y位置、横幅、高さを参照することができます。(サポート状況)

これらの環境変数を参照するには下記の HTML を指定しておく必要があります。

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

リンク

Copyright (C) 2025 杜甫々
初版：2025年5月18日、最終更新：2025年7月6日
http://www.tohoho-web.com/css/func/env.htm