CSSビューポート・モジュール レベル1

W3C 初回公開ワーキングドラフト、

この文書の詳細
このバージョン:
https://www.w3.org/TR/2024/WD-css-viewport-1-20240125/
最新版公開バージョン:
https://www.w3.org/TR/css-viewport-1/
編集者ドラフト:
https://drafts.csswg.org/css-viewport/
以前のバージョン:
履歴:
https://www.w3.org/standards/history/css-viewport-1/
フィードバック:
CSSWG イシューレポジトリ
CSSWG GitHub
仕様内インライン
編集者:
Florian Rivoal (招待専門家)
(Mozilla)
以前の編集者:
Matt Rakow (Microsoft)
(Opera Software)
(Adobe Systems)
(Opera Software)
この仕様への編集提案:
GitHub エディター

Copyright © 2024 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.

概要

この仕様は、著者がCSSで初期包含ブロックの基準となるビューポートのサイズ、ズーム係数、および向きを指定する方法を提供します。

CSS は、構造化文書（HTMLやXMLなど）の画面、紙などでのレンダリングを記述する言語です。

この文書の位置付け

このセクションは、この文書の発行時点での位置付けを説明します。 現在のW3C出版物の一覧と、この技術報告書の最新版は W3C技術報告一覧 https://www.w3.org/TR/ で確認できます。

この文書は CSSワーキンググループ により、初回公開ワーキングドラフトとして 勧告ルートを用いて発行されました。 初回公開ワーキングドラフトとしての公開は、W3Cおよびそのメンバーによる支持を意味するものではありません。

この文書はドラフトであり、随時更新・置換・廃止される可能性があります。 この文書を進行中の作業以外のものとして引用するのは適切ではありません。

ご意見は、GitHubでIssueを登録（推奨）してお寄せください。その際、タイトルに仕様コード “css-viewport” を含めて、 例えば “[css-viewport] …コメントの要約…” のようにしてください。 すべてのIssueとコメントはアーカイブされます。 または、（アーカイブ付き）公開メーリングリスト www-style@w3.org へフィードバックを送っていただくこともできます。

この文書は、2023年11月3日W3Cプロセス文書に従って管理されています。

この文書は、W3C特許ポリシーの下で運用されているグループによって作成されました。 W3Cは、グループの成果物に関連した公開特許開示リストを管理しています。 そのページでは、特許開示の方法も案内しています。 実際に特許を知っており、それが必須クレームを含むと考える個人は、 W3C特許ポリシー6節に従って情報開示を行う必要があります。

1. はじめに

このセクションは規範的ではありません。

CSS 2.1 [CSS21] では、 初期包含ブロックが 連続メディアの場合に ビューポートのサイズで定義されます。 ビューポートは一般的に表示領域以上になることはないため、スマートフォンやタブレットのような小さな画面を持つデバイスは、 デスクトップやノートPCなどの大きなデバイスよりも小さなビューポートを持つことになります。

しかし、多くのドキュメントは歴史的に大きなビューポートを前提に設計されてきたため、 小さなビューポートで表示した際に様々な不具合が発生します。 これには、意図しないレイアウトの折り返し、コンテンツの切り捨て、スクロール範囲の問題、 スクリプトエラーなどが含まれます。これらの問題を回避するため、モバイルブラウザは一般的に デスクトップブラウザのウィンドウサイズ（おおよそ980～1024px）を模倣した 固定の初期包含ブロック幅を使用します。この結果、レイアウトは画面に収まるよう縮小されます。

この方法は上述の問題を緩和しますが、縮小されることでCSSピクセルサイズは CSS 2.1で推奨される値より小さくなります。 ユーザーは快適に閲覧するためにコンテンツを拡大表示（ズーム）する必要がある場合があります。

このような対策は、小さなビューポートでも適切に動作するように設計されたサイトでは不要です。

この仕様書は実装者視点から記述されており、読みづらい部分があります。 異なる読者層のためにも理解しやすくするための編集作業が必要かもしれません。 また、各種JS APIがどのビューポートを指しているかも明確化すべきです。 これらの課題の詳細な議論はppkのこのブログ記事にあります。

この仕様や関連仕様に関する様々な課題は このレポート にリストされています。

2. ビューポート

CSS 2.1 において ビューポートは、 連続メディアのためのユーザーエージェントの機能であり、 連続メディアの初期包含ブロックの基準として使われます。 ページメディアでは、初期包含ブロックはページ領域を基準とします。 ページ領域は@pageルールで設定できます。

本仕様は、ユーザーエージェント（UA）が提供するビューポートのサイズを上書きする方法を示します。 そのため、初期ビューポートと実際のビューポートの違いについて説明する必要があります。

初期ビューポート
これはUAのウィンドウや表示領域によって与えられるビューポートが、 UAや著者のスタイルによって上書きされる前の状態を指します。 初期ビューポートのサイズはウィンドウや表示領域のサイズが変化すると連動して変化します。
実際のビューポート
これはビューポートの<meta>タグの処理後に得られるビューポートを指します。

実際のビューポートをレイアウトビューポートとし、「visual viewport」を定義する。

実際のビューポートがウィンドウや表示領域に収まらない場合、つまり 実際のビューポートが初期ビューポートより大きい場合や ズーム係数により実際のビューポートの一部のみが表示される場合、UAはスクロール・パン操作を提供すべきです。

文書の基本方向がltrの場合は、最初は実際のビューポートと ウィンドウまたは表示領域の左上を揃えることが推奨されます。rtlの場合は右上を揃えます。 文書の基本方向は、HTMLやXHTML文書では最初の<BODY>要素のdirectionプロパティの計算値とし、他の文書型ではルート要素の directionプロパティの計算値です。

3. ビューポート <meta> 要素

詳細な仕様を書くこと

3.1. プロパティ

ビューポートの<meta>要素で認識されるプロパティは以下の通りです：

3.2. パースアルゴリズム

以下は、iPhoneのSafariでテストした<meta>タグのcontent属性の パースアルゴリズムです。テスト環境はiPhone OS 4搭載iPod touch。 ブラウザUA文字列: "Mozilla/5.0 (iPod; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7" です。 疑似コード表記は[Algorithms]の記法に基づいています。

whitespaceクラスには以下（ascii）の文字が含まれます：

プロパティ/値ペアの区切りとしてSafari実装ではカンマを認識します。 一部実装ではカンマとセミコロン両方がサポートされてきました。 そのため既存コンテンツにはセミコロンが使われることがありますが、 著者はすべてのUAで意図通り動作するようカンマを用いるべきです。 実装者側では互換性のため両方の区切り文字をサポートしても構いません。

separatorクラスには以下（ascii）の文字が含まれます。推奨区切りはカンマ、セミコロンは任意：

Parse-Content(S)
i ← 1
while i ≤ length[S]
  do while i ≤ length[S] and S[i] in [whitespace, separator, '=']
    do i ← i + 1
  if i ≤ length[S]
    then i ← Parse-Property(S, i)

Parse-Property(S, i)
start ← i
while i ≤ length[S] and S[i] not in [whitespace, separator, '=']
  do i ← i + 1
if i > length[S] or S[i] in [separator]
  then return i
property-name ← S[start .. (i - 1)]
while i ≤ length[S] and S[i] not in [separator, '=']
  do i ← i + 1
if i > length[S] or S[i] in [separator]
  then return i
while i ≤ length[S] and S[i] in [whitespace, '=']
  do i ← i + 1
if i > length[S] or S[i] in [separator]
  then return i
start ← i
while i ≤ length[S] and S[i] not in [whitespace, separator, '=']
  do i ← i + 1
property-value ← S[start .. (i - 1)]
Set-Property(property-name, property-value)
return i

Set-Property はリストされたプロパティ名と 大文字小文字を区別せずに一致します。 property-valueの解釈は次の通りです：

  1. property-valueの先頭がstrtodで数値に変換できる場合、 その値を使用します。残りの文字列は無視します。
  2. 上記で数値に変換できない場合は property-value文字列全体を以下の文字列と大文字小文字区別せず 比較します： yes、no、 device-width、 device-height
  3. いずれとも一致しなかった場合、その値は未知とみなします。

3.3. extend-to-zoom

viewport metaタグによるextend-to-zoomの動作仕様の記述

3.4. interactive-widget

visual viewportの定義をCSSOM-Viewからこの仕様へ移動

interactive-widgetプロパティは、インタラクティブなUIウィジェットがページのビューポートに対して与える影響を指定します。 このプロパティで、ウィジェットが指定ビューポートと重なるのか、それともウィジェットが表示されている間もビューポート全体が見えるように縮小するのか決定できます。 インタラクティブUIウィジェットは、ユーザーが入力できる一時的なユーザーエージェントまたはOSのUIです。

最も一般的なこの種のUIウィジェットは仮想キーボードです。

interactive-widgetの有効な値とそのビューポートリサイズ動作の一覧：

overlays-content
インタラクティブUIウィジェットはリサイズしてはならず、初期ビューポートや visual viewportには影響しません。ユーザーエージェントは VirtualKeyboard.overlaysContent がtrueの場合と同様の手順を踏みます。
resizes-content
インタラクティブUIウィジェットはリサイズして 初期ビューポートに影響を与えます。
visual viewportのサイズは初期ビューポートから導かれるため、 resizes-contentでは初期ビューポート・visual viewport両方がリサイズされます。
resizes-visual
インタラクティブUIウィジェットはリサイズで visual viewportにのみ影響を与え、 リサイズで初期ビューポートには影響しません。

interactive-widgetに値が指定されていない、または無効値の場合は、 resizes-visualの動作がデフォルトとして使われます。

インタラクティブウィジェットによるビューポートのリサイズとは、 ビューポート矩形とウィジェットのOSが報告する外接矩形との交差領域を差し引くことです。 この結果ビューポートが長方形でなくなる場合、挙動はユーザーエージェント任意とされます。

長方形にならない一例：フローティングまたは分割キーボードや、 ビューポートの一部のみを占有するキーボードなど。

3.4.1. virtualKeyboard.overlaysContent との連携

[VIRTUAL-KEYBOARD]は overlays-content挙動を適用するAPIを提供します。 これはVirtualKeyboard.overlaysContent 属性で操作可能です。この属性はinteractive-widgetで設定された値より優先され、以下の通り動作します：

VirtualKeyboard.overlaysContent がtrueの場合、UAはインタラクティブウィジェットのリサイズ判断時に interactive-widgetで指定した値を無視しなければなりません。

VirtualKeyboard.overlaysContent がfalseの場合、UAは interactive-widgetで指定された値、または指定がなければデフォルト挙動を 用いてインタラクティブウィジェットのリサイズ挙動を決定しなければなりません。

VirtualKeyboard.overlaysContent の値取得は、以前に設定された値のみ返さなければなりません。

つまり、明示的に設定されていなければ、 VirtualKeyboard.overlaysContentは <meta>タグでinteractive-widget=overlays-contentが設定されていてもfalseを返します。

付録A. 変更点

この付録は参考情報です。

2016年3月29日ワーキングドラフト以降

2011年9月15日初回公開ワーキングドラフト以降

適合性

文書上の規約

適合要件は記述的な主張とRFC 2119用語の組み合わせで表現されています。 重要な語句 “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, “OPTIONAL” の本仕様での解釈は RFC 2119 に記載された通りとなります。 ただし、可読性のため、これらの語句はすべて大文字で表記されているわけではありません。

本仕様のテキストは、非規範的と明記されたセクション、例、および注記を除き、すべて規範的です。[RFC2119]

本仕様の例は「例えば」で始めるか、class="example"でマークされ、このように表示されます：

これは参考的な例のひとつです。

参考情報的な注記は「注意」で始まり、規範的テキストと区別するためclass="note"で装飾され、このように表示されます：

注意：これは参考情報的な注記です。

勧告事項（advisements）は規範的セクションであり、特に注意を促すため<strong class="advisement">で装飾されます。例： ユーザーエージェントは代替手段を必ず提供しなければなりません。

適合クラス

本仕様への適合性は3つのクラスで定義されます：

スタイルシート
CSSスタイルシート。
レンダラー
ユーザーエージェント（UA）で、スタイルシートのセマンティクスを解釈し、それを利用する文書を描画します。
オーサリングツール
ユーザーエージェント（UA）で、スタイルシートを作成します。

スタイルシートが本仕様に適合しているとは、本モジュールで定義された構文を使う記述がすべて、CSS一般文法及び本モジュールで個別に定義された文法上の定義に従って有効である場合を指します。

レンダラーが本仕様に適合しているとは、本仕様および関連仕様に従ってスタイルシートを解釈するだけでなく、 本仕様で定義されるすべての機能を正しくパースし、文書を適切に描画する場合です。 ただし、デバイスの制約によりUAが文書を正しく表示できなくても、それだけでUAが非適合とはみなされません（例：モノクロモニターで色を表示する必要はない）。

オーサリングツールが本仕様に適合しているとは、CSS 一般文法及び 本モジュールで個別に定義された文法に従って正しい構文のスタイルシートを出力し、 本モジュールでスタイルシートに関して記載された他の適合要件も満たしている場合です。

部分実装

著者が将来互換のパース規則を活用してフォールバック値を指定できるよう、CSSレンダラーは、サポートできないatルール・プロパティ・値・キーワードその他 の構文要素を無効として（適切に無視しなければなりません。 特に、ユーザーエージェントはサポートしていない値のあるプロパティ宣言で、サポートしている値だけを部分的に適用してはなりません。 いずれか一部の値が無効（サポート外）と見なされる場合、その宣言全体をCSSは無視します。

不安定・独自機能の実装について

将来の安定版CSS機能との競合を避けるために、CSSWGは ベストプラクティスに従い、不安定な機能や独自拡張の実装を行うことを推奨します。

非実験的実装

仕様がCandidate Recommendation段階に達したら、非実験的（実用的）実装が可能となります。 実装者は仕様通りに正しく動作することを示せるCRレベル機能について、 プレフィックスなしの実装リリースを推奨します。

CSSの実装間で相互運用性を確立・維持するため、CSSワーキンググループは非実験的なCSSレンダラーが 実装レポート（と必要ならそのテストケース）を公開前にW3Cに提出することを求めています。提出テストケースは CSSワーキンググループによるレビュー・修正を受けることがあります。

テストケースおよび実装レポート提出についての詳細は CSSワーキンググループWebサイト https://www.w3.org/Style/CSS/Test/ を参照ください。 質問はpublic-css-testsuite@w3.org宛で受け付けています。

索引

本仕様で定義されている用語

参照により定義されている用語

参考文献

規範的参考文献

[CSS-PAGE-3]
Elika Etemad. CSS Paged Media Module Level 3． 2023年9月14日．WD．URL: https://www.w3.org/TR/css-page-3/
[CSS-VIEWPORT]
CSS Viewport Module Level 1．編集者ドラフト．URL: https://drafts.csswg.org/css-viewport/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3．2019年12月10日．REC．URL: https://www.w3.org/TR/css-writing-modes-3/
[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification．2011年6月7日．REC．URL: https://www.w3.org/TR/CSS21/
[CSS3-CONDITIONAL]
David Baron; Elika Etemad; Chris Lilley. CSS Conditional Rules Module Level 3．2022年1月13日．CR．URL: https://www.w3.org/TR/css-conditional-3/
[CSSOM-VIEW-1]
Simon Pieters. CSSOM View Module．2016年3月17日．WD．URL: https://www.w3.org/TR/cssom-view-1/
[MEDIAQUERIES-5]
Dean Jackson; et al. Media Queries Level 5． 2021年12月18日．WD．URL: https://www.w3.org/TR/mediaqueries-5/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels．1997年3月．Best Current Practice．URL: https://datatracker.ietf.org/doc/html/rfc2119
[VIRTUAL-KEYBOARD]
Anupam Snigdha. VirtualKeyboard API．2022年5月5日．WD．URL: https://www.w3.org/TR/virtual-keyboard/

参考情報的参考文献

[Algorithms]
Thomas H. Cormen; et al. Introduction to Algorithms, Second Edition, MIT Press．

課題一覧

この仕様書は実装者目線で記載されているため読みにくくなっています。 異なる読者層向けにはさらなる編集作業が必要となる可能性があります。 また、さまざまなJS APIが参照するビューポートがどれであるかを明確にする必要もあります。 これら課題の詳細は ppkのこのブログ記事 でも議論されています。 ↵
この仕様や関連仕様に関する課題が このレポート に列記されています。 ↵
actual viewportをレイアウトビューポートとし、visual viewportを定義する。 ↵
仕様を具体的に記述すること ↵
viewport metaタグによるextend-to-zoom動作仕様記述 ↵
visual viewport定義をCSSOM-Viewからこの仕様へ移すこと ↵