朗報! CSSの新しい単位(lvh, svh, dvh)がChromeに実装、100vhがビューポートの高さいっぱいにならない問題を解決

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

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

画像: @bramus

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

はじめに

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%を表します。

Large Viewport

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

Small Viewport

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

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

Small Viewport

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

Dynamic Viewport

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

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

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

ブラウザのサポート状況

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

サイトのキャプチャ

ブラウザのサポート状況

これらの単位を使用したいSafari for iOSにはすでにサポートされており、11月にリリース予定のChrome 108でもサポートされる予定です。
Chrome 108のサポートについては、下記をご覧ください。

サイトのキャプチャ

CSS Values and Units Module Level 4: Small/Large/Dynamic/Logical viewport units

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

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

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

元ネタは下記ツイートより。

sponsors

top of page

©2022 coliss