mizdra's blog

ぽよぐらみんぐ

svh という策定中の CSS Unit について

CSS Values and Units Module Level 4 という提案にて、 svh という新たな CSS Unit の導入が検討されています。簡単に言うと、ブラウザのナビゲーションバーやオムニボックスの高さを除外した vh です。

今までは実際にユーザがブラウザで見ている範囲内に要素を収めるには JS で動的に可視領域の高さを計算する必要がありましたが、これが導入されると CSS だけで実現できます。従来の JS を使ったハックでは CSS が適用されてから JS の実行が行われて高さが変更されるため、Layout Shift が発生していましたが、svh を使うとこの Layout Shift を回避できます。Above the fold に動画や画像を画面いっぱいに表示したい時などに便利そうですね。

ブラウザベンダの実装状況

そもそもまだ仕様がドラフトの段階で、実装は全く進んでいません。一応 Issue は出ているので、興味があればトラッキングしてみましょう。早く使えるようになると良いですね *1


以前 Twitter を見ていたら目に入ったので、調べて書いてみました。

*1:もちろんまだドラフト段階なのでどうなるか分かりませんが

ポケットモンスター・ポケモン・Pokémon・は任天堂・クリーチャーズ・ゲームフリークの登録商標です.

当ブログは @mizdra 個人により運営されており, 株式会社ポケモン及びその関連会社とは一切関係ありません.