✉️

cssのenv()でセーフエリア対応できる

2021/08/07に公開約500字

env()とは

cssで使えるFunctionの一つ

https://developer.mozilla.org/ja/docs/Web/CSS/env()

値を返す点は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

ログインするとコメントできます