CSS - env()

• トップ
• CSSリファレンス
• env()

概要

説明

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

safe-area-inset-top

safe-area-inset-bottom

safe-area-inset-right

safe-area-inset-left

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

titlebar-area-x

titlebar-area-y

titlebar-area-width

titlebar-area-height

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

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

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

使用例

body {
  padding-top: env(safe-area-inset-top, 20px);
  padding-bottom: env(safe-area-inset-bottom, 20px);
  padding-right: env(safe-area-inset-right, 20px);
  padding-left: env(safe-area-inset-left, 20px);
}

リンク

• https://drafts.csswg.org/css-env/#env-function
• https://developer.mozilla.org/ja/docs/Web/CSS/env
• https://caniuse.com/css-env-function