新しいビューポートの単位（sv*、lv*、dv*）
ミツエーリンクスでは全社的にInterop 2022の重点分野について調査をしています。
今回はその中から「新しいビューポートの単位」について紹介します。
ビューポートとは
ビューポートはWebページを表示するための領域で、ブラウザウィンドウからアドレスバーなどのUIを除いた部分になります。
ビューポートの単位とは
ビューポートの単位は相対的な長さの単位で、ビューポートの長さに従って指定します。
ブラウザで表示したビューポートの長さが対象となるため、@pageで宣言した印刷用のスタイルでは無効になります。
なぜ新しいビューポートの単位が必要になったのか
従来のビューポートの単位はUIがスクロールによって拡大縮小するような機能を持つ前に作成されました。
そのため後発の動的にサイズが変わるUIに対応しておらず、画面をスクロールする前の初期表示時に決定されたビューポートサイズを維持し続けます。
すると、動的UIのサイズが変更された時にサイズの差分がビューポートに収まりきれずにはみ出してしまうという現象が発生します。
従来のビューポートの単位vhを使用した例
これを解決するために作られたのが新しいビューポートの単位になります。
新しいビューポートの単位を使用すると、UIの拡大縮小に合わせたサイズ設定ができます。
新しいビューポートの単位lvhを使用した例
従来のビューポートの単位
新しいビューポートの単位は従来のビューポートをベースに作られていますので、まずは従来のビューポートの単位について少し触れておきたいと思います。
従来のビューポートの単位は以下になります。
| 単位 | 定義 |
|---|---|
| vw | ビューポートの幅のパーセンテージ単位 |
| vh | ビューポートの高さのパーセンテージ単位 |
| vmin | ビューポートの幅（vw）と高さ（vh）の小さい方のサイズ |
| vmax | ビューポートの幅（vw）と高さ（vh）の大きい方のサイズ |
対応ブラウザ
- vw、vh、vmin、vmax：ほぼ全てのブラウザが対応しています
新しいビューポートの単位
W3C Working DraftのCSS Values and Units Module Level 4で新しく追加になった単位は以下になります。
| 単位 | 定義 |
|---|---|
| vi | ルート要素（html要素）のインライン軸（横書きの場合は水平方向、縦書きの場合は垂直方向）におけるビューポートのサイズのパーセンテージ単位 |
| vb | ルート要素（html要素）のブロック軸（横書きの場合は垂直方向、縦書きの場合水平方向）におけるビューポートのサイズのパーセンテージ単位 |
- svw、svh、svi、svb、svmin、svmax：小さいビューポートのパーセンテージ単位
- lvw、lvh、lvi、lvb、lvmin、lvmax：大きいビューポートのパーセンテージ単位
- dvw、dvh、dvi、dvb、dvmin、dvmax：動的ビューポートのパーセンテージ単位
各単位の頭文字はsがsmall（小さい）、lがlarge（大きい）、dがdynamic（動的）を表しています。
小さいビューポートのパーセンテージ単位（svw、svh、svi、svb、svmin、svmax）
小さいビューポートを設定することで、動的に拡大縮小するUIが拡大している時のビューポートのサイズを基準として、コンテンツがビューポートに収まるようになります。
| 単位 | 定義 | 要約 |
|---|---|---|
| svw | 小さいビューポートの幅 | ブラウザウィンドウの幅から動的に拡大縮小するUIが拡大している時の幅を引いたサイズ |
| svh | 小さいビューポートの高さ | ブラウザウィンドウの高さから動的に拡大縮小するUIが拡大している時の高さを引いたサイズ |
| svi | インライン軸における小さいビューポートのサイズ | 横書きの場合はsvw、縦書きの場合はsvhと同等のサイズ |
| svb | ブロック軸における小さいビューポートのサイズ | 横書きの場合はsvh、縦書きの場合はsvwと同等のサイズ |
| svmin | 小さいビューポートの幅と高さの小さい方のサイズ | svwまたはsvhの小さい方のサイズ |
| svmax | 小さいビューポートの幅と高さの大きい方のサイズ | svwまたはsvhの大きい方のサイズ |
大きいビューポートのパーセンテージ単位（lvw、lvh、lvi、lvb、lvmin、lvmax）
大きいビューポートを設定することで、動的に拡大縮小するUIが縮小している時のビューポートのサイズを基準として、コンテンツがビューポートに収まるようになります。
UIが拡大している時はUIの背後にコンテンツが隠れます。
| 単位 | 定義 | 要約 |
|---|---|---|
| lvw | 大きいビューポートの幅 | ブラウザウィンドウの幅から動的に拡大縮小するUIが縮小している時の幅を引いたサイズ |
| lvh | 大きいビューポートの高さ | ブラウザウィンドウの高さから動的に拡大縮小するUIが縮小している時の高さを引いたサイズ |
| lvi | インライン軸における大きいビューポートのサイズ | 横書きの場合はlvw、縦書きの場合はlvhと同等のサイズ |
| lvb | ブロック軸における大きいビューポートのサイズ | 横書きの場合はlvh、縦書きの場合はlvwと同等のサイズ |
| lvmin | 大きいビューポートの幅と高さの小さい方のサイズ | lvwまたはlvhの小さい方のサイズ |
| lvmax | 大きいビューポートの幅と高さの大きい方のサイズ | lvwまたはlvhの大きい方のサイズ |
動的ビューポートのパーセンテージ単位（dvw、dvh、dvi、dvb、dvmin、dvmax）
動的ビューポートを設定することで、 動的に拡大縮小するUIのサイズに合わせてコンテンツがビューポートに収まるように自動で調整されます。
| 単位 | 定義 | 要約 |
|---|---|---|
| dvw | 動的ビューポートの幅 | ブラウザウィンドウの幅から動的に拡大縮小するUIの拡大、縮小を自動で判定して調整した幅 |
| dvh | 動的ビューポートの高さ | ブラウザウィンドウの高さから動的に拡大縮小するUIの拡大、縮小を自動で判定して調整した高さ |
| dvi | インライン軸における動的ビューポートのサイズ | 横書きの場合はdvw、縦書きの場合はdvhと同等のサイズ |
| dvb | ブロック軸における動的ビューポートのサイズ | 横書きの場合はdvh、縦書きの場合はdvwと同等のサイズ |
| dvmin | 動的ビューポートの幅と高さの小さい方のサイズ | dvwまたはdvhの小さい方のサイズ |
| dvmax | 動的ビューポートの幅と高さの大きい方のサイズ | dvwまたはdvhの大きい方のサイズ |
対応ブラウザ
- vi：Firefox、Safari
- vb：Firefox、Safari
- 小さいビューポート（svw、svh、svi、svb、svmin、svmax）：Firefox、Safari
- 大きいビューポート（lvw、lvh、lvi、lvb、lvmin、lvmax）：Firefox、Safari
- 動的ビューポート（dvw、dvh、dvi、dvb、dvmin、dvmax）：Firefox、Safari
- ※ 対応ブラウザはBlog作成時点のものになりますので、リンク先の対応ブラウザと異なる場合があります。
- ※ 対応ブラウザ以外で使用する場合は、従来のビューポートの単位と併用する必要があります。（対応ブラウザ以外の従来のビューポートの単位の振る舞いは動的ビューポートの単位と同じになります）
.viewport {
height: 100vh;
height: 100dvh;
}
まとめ
新しいビューポートの単位が加わったことで、動的UIの状態に合わせたビューポートを基準として意図どおりのコンテンツ設計ができるようになりました。
今回Interop 2022の取り組みに合わせて「新しいビューポートの単位」の調査を行いましたが、この単位に関してだけでも問題提起から解決に向けての各ブラウザの動きというのがわかりました。全てのブラウザで同じ見た目や振る舞いになることが当然だしそうなっていて欲しいと思っていましたが、それが自分の想像していた以上に簡単なことではないということにこの取り組みを通して気づき、日頃各ブラウザが足並みを揃えて対応くださっていることに感謝したいと思いました。