草案
このページは完成していません。

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSSenv()関数は、 カスタムプロパティ とは異なり、特定の文書でグローバルな環境変数の値を挿入するために使用することができます。 env() 関数は var() 関数と同様に、任意の場所の値を置き換えるために使用することができます。

env() 関数は要素のプロパティの値の一部や、 @-規則における任意の記述子の値の一部、その他の CSS の値が許可されている様々な場所で使用することができます。

構文

env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)

safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
safe-area-inset-* 変数は4つの差し込み値で、非矩形の形状の画面で切り取られるリスクなく安全にコンテンツを配置できるビューポートの辺の差し込み距離を top, right, bottom, left よる矩形で定義します。

形式文法

Syntax not found in DB!

仕様書

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

ブラウザーの対応

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

凡例

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

関連情報

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

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