CSS Values and Units Module Level 4 という提案にて、 svh という新たな CSS Unit の導入が検討されています。簡単に言うと、ブラウザのナビゲーションバーやオムニボックスの高さを除外した vh です。
🚨🚨🚨
— Bramus (@bramus) 2021年6月18日
There are some changes being proposed regarding viewport units, finally solving that "100vh in Safari on iOS" issue (cfr. https://t.co/fvoIXRLqJx)
Let's take a look … 🧵 pic.twitter.com/ektVwlhI7O
今までは実際にユーザがブラウザで見ている範囲内に要素を収めるには JS で動的に可視領域の高さを計算する必要がありましたが、これが導入されると CSS だけで実現できます。従来の JS を使ったハックでは CSS が適用されてから JS の実行が行われて高さが変更されるため、Layout Shift が発生していましたが、svh を使うとこの Layout Shift を回避できます。Above the fold に動画や画像を画面いっぱいに表示したい時などに便利そうですね。
ブラウザベンダの実装状況
そもそもまだ仕様がドラフトの段階で、実装は全く進んでいません。一応 Issue は出ているので、興味があればトラッキングしてみましょう。早く使えるようになると良いですね *1。
- Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1093055
- 初期提案では svh (small viewport height) は vhc (viewport height with chrome) という呼称になっていて、その名前で Issue が入れられています
- https://github.com/w3c/csswg-drafts/issues/4329#issue-495372962
- Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1610815
- Webkit: https://bugs.webkit.org/show_bug.cgi?id=219287
以前 Twitter を見ていたら目に入ったので、調べて書いてみました。
追記 (2022/3/15)
Safari 15.4 でサポートが入りました。
*1:もちろんまだドラフト段階なのでどうなるか分かりませんが
