✉️
cssのenv()でセーフエリア対応できる
env()とは
cssで使えるFunctionの一つ
値を返す点はcss variablesと似ているが、env()はユーザーエージェントが定義している変数を使用できる。
ユーザーエージェントが定義している変数と言いつつ、現状では専らSafe area対応のために使われる。
bottom safe areaを適用
padding-bottom: env(safe-area-inset-bottom)
envの値が定義されていなければfallback
padding-bottom: env(safe-area-inset-bottom, 20px)
利用例
Snackbarの描画位置にセーフエリアの無い矩形画面での数値 + セーフエリアの数値を足した結果を表示する
.snackbar {
...
margin-bottom: calc(24px + env(safe-area-inset-bottom));
}
Footerまたはページの最下部に設定しておく
footer {
...
padding-bottom: env(safe-area-inset-bottom);
}
Discussion