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

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」における問題を簡単に解決できます。

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

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

• iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
• height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック

新しいビューポート単位「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を定義すると、自動的に適応されます。

ブラウザのサポート状況

2023年2月現在、ブラウザのサポート状況は下記の通りです。

ブラウザのサポート状況

Safariで使用できるようになったときにお知らせした記事も参考にどうぞ。

CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる