CSSの新しい単位で「lv*, sv*, dv*」がChrome108に実装されたとのこと
🎉🥳 Good news everyone! The Large, Small and Dynamic viewport units (lv*, sv*, dv*) are coming to Chrome 108!
— Bramus (@bramus) 2022年9月26日
I2S announcement: https://t.co/3JGCpfKQjr pic.twitter.com/u8AOuREiDz
現在のサポート状況
追加されたのは以下、
- Large Viewport (lvw, lvh, lvmin, lvmax)
- Small Viewport (svw, svh, svmin, svmax)
- Dynamic Viewport (dvw, dvh, dvmin, dvmax)
Large Viewportとは上の図のように動的に出現するアドレスバーなどで隠れてしまう可能性がある領域も含めた高さを指定することができる
Small Viewportは逆に、アドレスバーなどで隠れてしまうところを領域を除いた高さを指定することができる
Dynamic Viewportはアドレスバーの表示・非表示に合わせて自動的に高さを調整してくれる
試したところ
Large Viewportは確実にアドレスバーに隠れてしまうので、使うことはあまりなさそう
Dynamic Viewportは100dvhとしたところ、自動的な高さ調整によってガクッと下に下がるレイアウトシフトが起きるのが気になった
使う時には慎重に選びたい
