CSSの新しい単位（lvh, svh, dvh)がすべてのブラウザでサポート、100vhがビューポートの高さいっぱいにならない問題を解決

サイト構築 -CSS

Post on:2022年11月30日

sponsorsr

Safari, FirefoxでサポートされていたCSSの新しいビューポート単位「lvh」「svh」「dvh」などが、ついにChromeでもサポートされました！

CSSの新機能で、Chromeが一番最後というのは珍しいですね。
最も活躍するのがiOSのSafariだからでしょうか。とはいえ、主要ブラウザすべてにサポートされるようになるのは、嬉しいニュースです。

画像: @bramus

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに
新しいビューポート単位「lvh」「svh」「dvh」とは
ブラウザのサポート状況

はじめに

W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更されました。Large、Small、Dynamicといったビューポートサイズの単位が追加されました。

この新しく追加された単位のおかげで「iOSのSafariで100vh」における問題を簡単に解決できます。

左: アドレスバーを非表示、右: 表示されてるとその分下に

詳しくは、下記をご覧ください。

新しいビューポート単位「lvh」「svh」「dvh」ととは

CSSWGでは既存のvw, vh, vmin, vmaxに加えて、さらに追加の新しいビューポート単位が定義されました。
参考: The Large, Small, and Dynamic Viewport Sizes -W3C

追加されたビューポート単位は、下記の通りです。

Large Viewport (lvw, lvh, lvmin, lvmax)
Small Viewport (svw, svh, svmin, svmax)
Dynamic Viewport (dvw, dvh, dvmin, dvmax)

Large Viewport

Large Viewportは、動的に拡大・縮小されるあらゆるUAインターフェース（アドレスバーなど）が格納されると想定したビューポートサイズを基準に定義されています。これにより、コンテンツが展開されたときにそのインターフェースの背後に隠れる可能性があることに注意しながら、ビューポートを満たすことが保証されるコンテンツのサイズを作成できます。

単位は接頭辞に「l」をつけ、lvw, lvh, lvmin, lvmaxとなります。
たとえば、100lvhはラージビューポートの高さの100％を表します。

100lvhはラージビューポートの高さの100％

Small Viewport

Small Viewportは、動的に拡大・縮小されるあらゆるUAインタフェース（アドレスバーなど）を拡大すると想定したビューポートサイズを基準に定義されています。これにより、コンテンツがビューポートに収まるようなサイズを設定できます。

単位は接頭辞に「s」をつけ、svw, svh, svmin, svmaxとなります。
たとえば、100svhはスモールビューポートの高さの100％を表します。

100svhはスモールビューポートの高さの100％

Dynamic Viewport

Dynamic Viewportは、動的に拡大・縮小されるあらゆるUAインターフェース（アドレスバーなど）を動的に考慮してサイズ設定されるビューポートです。これにより、UAインターフェイス要素が表示されているかどうかにかかわらず、コンテンツがビューポートに正確に収まるようにサイズは自動的に調整されます。値は100lvh（最大）および100svh（最小）の範囲内になります。

単位は接頭辞に「d」をつけ、dvw, dvh, dvmin, dvmaxとなります。

このDynamic Viewport Unitは、UAインターフェイスの変化に合わせて自動的に伸縮するUIが欲しいところです。100dvhを定義すると、自動的に適応されます。