Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

Safe area inset environment variables

env() は CSS の関数で、ユーザーエージェントが定義した環境変数の値を CSS に挿入するために使用することができます。

環境変数モバイル

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
env
69
79
65
11.1
69
11.3
safe-area-inset-bottom

安全領域インセット変数 `safe-area-inset-bottom`
69
79
65
11
69
11
safe-area-inset-left

安全領域インセット変数 `safe-area-inset-left`
69
79
65
11
69
11
safe-area-inset-right

安全領域インセット変数 `safe-area-inset-right`
69
79
65
11
69
11
safe-area-inset-top

安全領域インセット変数 `safe-area-inset-top`
69
79
65
11
69
11
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (11.1)
対応条件
  • 以前は別名で対応していました: constant (11)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (11.3)
対応条件
  • 以前は別名で対応していました: constant (11)

基本構文

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

ライブデモ

safeallrange with env

safeallrange demo. with CSS env

プレビュー全画面表示

bottomse-fuarea

CSS bottomse-fuarea demo.

プレビュー全画面表示

alldirectionpadding

CSS alldirectionpadding demo.

プレビュー全画面表示

実務での使いどころ

  • ノッチ付きデバイスへの対応

    iPhoneのノッチやDynamic Islandでコンテンツが隠れないよう、安全領域に基づいたパディングを設定します。

注意点

  • env(safe-area-inset-*)はviewport metaタグにviewport-fit=coverを指定しないと常に0を返します。

アクセシビリティ

  • 安全領域の確保により、操作可能な要素がデバイスの物理的な障害物に隠れず、すべてのユーザーがタッチ操作できるようになります。

参考リンク