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

サイト構築 -CSS

Post on:2022年5月26日

はじめに

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

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

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

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

新しく追加されたビューポート単位とは

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を定義すると、自動的に適応されます。

body {
  height: 100dvh;
}

body {

height: 100dvh;

}

既存のテクニックではダメですか？

新しく追加されたビューポート単位を使用する代わりに、既存のJavaScriptでの回避方法や下記に示すCSSの回避方法を使用することができないのかと思うかも知れません。

body {
  height: 100vh;
}

@supports (-webkit-touch-callout: none) {
  body {
    height: -webkit-fill-available; /* ❌ これはしないでください！ */
  }
}

body {

height: 100vh;

}

@supports (-webkit-touch-callout: none) {

body {

height: -webkit-fill-available; /* ❌ これはしないでください！ */

}

上記の回避方法は期待するものを実現しますが、bodyの高さを「ビューポートの高さいっぱいにするだけ」です。これは-webkit-fill-availableがアイテムを囲む要素（ここではビューポート）内に引き伸ばすからです。-webkit-fill-availableを使用した方法ではビューポートではなく親要素が参照されるため、ネストされた要素では機能しません。
100dvhを使用すれば、期待するものを簡単に実現できます！

さらに、calc()内で-webkit-fill-availableを使用できないため、「囲んでいる要素の半分のサイズ」といったこともできません。height: calc(-webkit-fill-available * 0.5);は無効なCSSです。この記述がいつか使用できるようになったとしても、ビューポートに対してネストされた要素のサイズを定義したい場合は、再び問題が発生します。

だから、新しいビューポート単位が必要なのです 🤩

CSSのcalc()関数を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ

なぜSafariだけ仕様が違うのか

新しいビューポート単位（l*/s*/d*）は、すでに存在するvw, vh, vmin, vmax単位に追加されるものです。これらの古い単位には明確な定義がなく、どのように振る舞うかはUA（ブラウザ）次第となります。あるブラウザ（現在のSafari）はvhをlvhのように振る舞い、他のブラウザはvhをdvhのように振る舞います。

また、Dynamic Viewportの振る舞いはUAの選択次第です。あるブラウザはインターフェイスが変化している間、すぐにその値を更新するかもしれませんし、他のブラウザはUIが遷移した後でのみ値を更新するかもしれません。仕様では、、、どちらでも問題ありません。

UAは関連するインターフェースを拡張および収縮させるときに、動的ビューポートのパーセンテージ単位をアニメーション化する必要はなく、代わりにUIアニメーション中に関連するインターフェースが完全に拡張または収縮されたかのように単位を計算することができます。

スクリーン上のキーボードのようなものは考慮されていません。そのために、近日公開予定のVirtual Keyboard APIがあります。