CSS オーバースクロール挙動モジュール レベル 1

W3C 初回公開作業草案,

このバージョン:
https://www.w3.org/TR/2019/WD-css-overscroll-1-20190606/
最新公開バージョン:
https://www.w3.org/TR/css-overscroll-1/
編集者草案:
https://drafts.csswg.org/css-overscroll-1/
編集者:
(Google)
この仕様への編集提案:
GitHub エディター
課題追跡:
GitHub Issues

概要

このモジュールは、overscroll-behaviorを定義し、スクロールコンテナのスクロール位置がスクロールポートの端に到達したときの挙動を制御します。 これにより、コンテンツ作成者は境界デフォルトアクション(スクロールチェーニングやオーバースクロールなど)が発動されないように示唆できます。

CSSは、構造化された文書(HTMLやXMLなど)の画面、紙などでのレンダリングを記述するための言語です。

この文書のステータス

このセクションは、公開時点でのこの文書のステータスを説明します。他の文書がこの文書に取って代わることがあります。現在のW3C出版物やこの技術レポートの最新改訂版は、W3C技術レポート索引 https://www.w3.org/TR/ で確認できます。

この文書は初回公開作業草案です。

初回公開作業草案として公開されても、W3C会員による承認を意味するものではありません。この文書は草案であり、随時更新、置換、または廃止される可能性があります。進行中の作業以外のものとしてこの文書を引用することは不適切です。

この仕様に関する議論にはGitHub Issuesの利用が推奨されます。 問題を提起する際は、タイトルに「css-overscroll」と記載してください。例えば、 「[css-overscroll] …コメントの概要…」のように。 すべての課題やコメントはアーカイブされており、過去のアーカイブもあります。

この文書はCSS作業グループによって作成されました。

この文書はW3C特許ポリシーのもとで活動するグループによって作成されています。W3Cは、グループの成果物に関連して行われた特許開示の公開リストを管理しています。そのページには特許の開示方法も記載されています。特許に関する実際の知識を持つ者は、その特許が必須クレームを含むと信じる場合、W3C特許ポリシー第6節に従って情報を開示する必要があります。

この文書は2019年3月1日版W3Cプロセス文書に準拠しています。

1. はじめに

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

コンテンツ作成者は、すべてのスクロールチェーニングがすべてのスクロールコンテナで発生することを必ずしも望むわけではありません。いくつかのスクロールコンテナ包含ブロックチェーンの一部かもしれませんが、文書内で異なる論理的目的を持ち、スクロールがスクロールチェーンに沿って継続するのを防ぎたい場合があります。これを実現するために、コンテンツ作成者はpassiveフラグを設定せずにイベントリスナーを設置し、スクロールチェーニングが発生する恐れがある場合はpreventDefaultを使用します。これは以下の理由で望ましくありません:

したがって、コンテンツ作成者がスクロールチェーニングやオーバースクロールを堅牢かつ高性能、将来互換性のある方法で制御することは不可能です。overscroll-behaviorプロパティはこの問題を解決します。

2. 動機付け例

固定位置の左ナビゲーションバーは、ナビゲーションバーでのスクロールジェスチャがほぼ確実に文書のスクロールを意図しないため、スクロールを文書に引き渡したくありません。なお、ネイティブのオーバースクロールアフォーダンスは依然として望ましいですが、スクロールチェーニングは防止する必要があります。
#sidebar {
  overscroll-behavior: contain;
}

この場合、作成者はサイドバーにcontainを使用して、スクロールが親の文書要素にチェーンされるのを防ぐことができます。

ページが独自のプル・トゥ・リフレッシュ効果を実装したい場合、ブラウザのネイティブオーバースクロールアクションを無効にする必要があります。
html {
  /* プル・トゥ・リフレッシュのみ無効化し、スワイプナビゲーションは許可 */
  overscroll-behavior-y: contain;
}

この場合、作成者はビューポート定義要素にcontainを使用して、オーバースクロールによるナビゲーションアクションの発動を防ぐことができます。

無限スクローラーは、ユーザーが境界に到達するとさらにコンテンツを読み込み、スクロールチェーニングに加えて、混乱を招くラバーバンド効果も無効にしたい場合があります。
#infinite_scroller {
  overscroll-behavior-y: none;
}

この場合、作成者は無限スクローラーにnoneを使用して、スクロールチェーニングとオーバースクロールアフォーダンスの両方を防ぐことができます。

3. スクロールチェーニングと境界デフォルトアクション

オペレーティングシステムには、スクロールチェーニングやオーバースクロールアフォーダンスなどのスクロールに関するルールがあります。本仕様はスクロールチェーニングやオーバースクロールアフォーダンスの実装有無や方法を規定しません。本仕様は、実装されている場合に限り、コンテンツ作成者がそれらを無効化できるようにします。

スクロールチェーニングとは、スクロールが一つのスクロールコンテナから祖先のスクロールコンテナへ、スクロールチェーンに沿って伝播されることです。通常、スクロールチェーニングはイベントターゲットから、包含ブロックチェーンを再帰的に辿って開始されます。このチェーン内のスクロールコンテナがスクロールイベントやジェスチャを受け取った場合、それに応答したり、チェーン上に伝播したりします。チェーニングは通常、スクロールポートが境界に到達したときに発生します。

スクロールチェーンは、スクロールが一つのスクロールコンテナから別のスクロールコンテナへ伝播する順序を指します。ビューポートは、文書のscrollingElementとして、スクロールチェーニングに参加し、チェーン内での位置や適用されるチェーニングルールの両方に関与します。

スクロール境界は、スクロールコンテナのスクロール位置がスクロールポートの端に到達したことを示します。スクロールコンテナがその方向にオーバーフローしない場合、要素は常にスクロール境界にあるとみなされます。

境界デフォルトアクションは、ユーザーエージェント定義のデフォルトアクションであり、スクロールがスクロールポートの端に対して行われたときに実行されます。ローカル境界デフォルトアクションは、ページとやりとりせず、境界デフォルトアクションスクロールコンテナ上で実行される例(オーバースクロールUIアフォーダンスの表示など)です。対照的に、非ローカル境界デフォルトアクションは、ページとやりとりするものであり、スクロールチェーニングやナビゲーションアクションなどが該当します。

4. オーバースクロール挙動プロパティ

オーバースクロール挙動は、境界デフォルトアクションの許可を、スクロールコンテナのスクロールポートがスクロールボックスの境界に到達したときに制御します。

overscroll-behaviorプロパティは、オーバースクロール挙動スクロールコンテナ要素に指定します。これにより、作成者は、スクロールコンテナ要素がスクロールチェーニングやオーバースクロールアフォーダンスを防ぐことを指定できます。

スクロールコンテナでない要素は、このプロパティの値を受け入れても無視しなければなりません。このプロパティは、ユーザーエージェントがサポートするすべてのスクロール方法に適用されなければなりません。

注: このプロパティは、スクロールチェーニングとオーバースクロールを防ぐ点で、少なくともpreventDefaultと同等以上の保証を提供すべきです。そうでなければ、作成者は代わりにpreventDefaultを使用してしまいます。

名前: overscroll-behavior
値: [ contain | none | auto ]{1,2}
初期値: auto auto
適用対象: スクロールコンテナ要素
継承: no
パーセンテージ: n/a
算出値: 個々のプロパティ参照
正規順序: 文法順
アニメーション型: : 離散
メディア: visual

overscroll-behaviorプロパティは、overscroll-behavior-xoverscroll-behavior-yの指定値をこの順で設定するショートハンドプロパティです。一つだけ値が指定された場合、二つ目の値は同じ値になります。

値の意味は以下の通りです:

contain
この値は、要素が非ローカル境界デフォルトアクション(スクロールチェーニングやナビゲーションなど)を実行してはならないことを示します。ユーザーエージェントは、この要素またはその子孫からスクロールが発生した場合でも、スクロールチェーン上のいかなる祖先にもスクロールチェーニングをしてはなりません。ただし、この値はローカル境界デフォルトアクション(オーバースクロールアフォーダンスの表示など)の挙動は変更しません。
none
この値は、containと同じ動作を意味し、加えてこの要素はローカル境界デフォルトアクション(オーバースクロールアフォーダンスの表示など)も実行してはなりません。
auto
この値は、ユーザーエージェントが境界デフォルトアクション(スクロールチェーニング、オーバースクロール、ナビゲーションジェスチャなど)を通常通り実行するべきであることを示します。

注: ユーザーエージェントがスクロールチェーニングやオーバースクロールアフォーダンスを実装しない場合、これらの値は準拠実装に対して副作用を持ちません。

注: プログラムによるスクロールはクランプされ、境界デフォルトアクションを発動できません。

4.1. overscroll-behaviorの物理方向ロングハンド

名前: overscroll-behavior-x, overscroll-behavior-y
値: contain | none | auto
初期値: auto
適用対象: スクロールコンテナ要素
継承: no
パーセンテージ: N/A
算出値: 指定通り
正規順序: 文法順
アニメーション型: : 離散
メディア: visual

overscroll-behavior-xプロパティは水平方向のオーバースクロール挙動を指定し、overscroll-behavior-yプロパティは垂直方向のオーバースクロール挙動を指定します。水平・垂直両軸で同時にスクロールが行われる場合、各軸のオーバースクロール挙動は独立して考慮されます。

4.2. overscroll-behaviorのフロー相対ロングハンド

名前: overscroll-behavior-inline, overscroll-behavior-block
値: contain | none | auto
初期値: auto
適用対象: スクロールコンテナ要素
継承: no
パーセンテージ: N/A
算出値: 指定通り
正規順序: 文法順
アニメーション型: : 離散
メディア: visual

これらのプロパティはoverscroll-behavior-xおよびoverscroll-behavior-yプロパティに対応します。 マッピングは要素のwriting-modeに依存します。

5. セキュリティとプライバシーに関する考慮事項

この機能には既知のセキュリティやプライバシーへの影響はありません。機能は、オーバースクロールアフォーダンスやオーバースクロールナビゲーション(例:プル・トゥ・リフレッシュ、スワイプナビゲーション)などの一部のネイティブUI機能を防ぐために使用される場合があります。ただし、これはプラットフォームで既に可能な範囲(例えば、スクロールを引き起こすイベントのデフォルトアクションを防ぐなど)を超えて追加の能力を露出するものではありません。

適合性

文書規約

適合性要件は、記述的な断定とRFC 2119の用語の組み合わせで表現されます。規範部分におけるキーワード「MUST」「MUST NOT」「REQUIRED」「SHALL」「SHALL NOT」「SHOULD」「SHOULD NOT」「RECOMMENDED」「MAY」「OPTIONAL」はRFC 2119で説明されている通りに解釈されるものとします。ただし、可読性のため、これらの単語は本仕様書のすべてで大文字表記されているわけではありません。

この仕様のすべての本文は規範的ですが、明示的に非規範的と表示されているセクション、例、注記は除きます。[RFC2119]

この仕様の例は「for example」で始まるか、またはclass="example"で区別されます。例:

これは情報提供的な例です。

情報提供的な注記は「Note」で始まり、class="note"で区別されます。例:

注: これは情報提供的な注記です。

勧告は規範的なセクションであり、特別な注意を促すようにスタイルされ、<strong class="advisement">で区別されます。例: UAはアクセシブルな代替手段を提供しなければならない。

適合クラス

この仕様への適合性は、以下の3つの適合クラスについて定義されます:

スタイルシート
CSSスタイルシート
レンダラー
スタイルシートの意味を解釈し、それを利用する文書をレンダリングするUA
オーサリングツール
スタイルシートを書き出すUA

このモジュールで定義された構文を使用するすべての文が、一般的なCSS文法および本モジュールで定義される各機能の個別文法に従って有効である場合、そのスタイルシートは本仕様に適合しています。

レンダラーは、スタイルシートを適切な仕様に従って解釈することに加え、本仕様で定義されたすべての機能を正しく解析し、文書を適切にレンダリングすることで本仕様に適合しています。ただし、デバイスの制約によりUAが文書を正しくレンダリングできない場合でも、UAが非適合となるわけではありません。(例:UAはモノクロモニターで色をレンダリングする必要はありません。)

オーサリングツールは、一般的なCSS文法および本モジュールの各機能の個別文法に従って構文的に正しいスタイルシートを書き出し、本モジュールで述べられているスタイルシートのすべての他の適合要件も満たす場合、本仕様に適合しています。

CSSの責任ある実装のための要件

以下のセクションでは、CSSを現在および将来にわたって相互運用性を高める形で責任を持って実装するための複数の適合要件を定義します。

部分的な実装

作成者が前方互換的なパースルールを利用してフォールバック値を割り当てられるよう、CSSレンダラーは、サポート可能なレベルがないすべてのatルール、プロパティ、プロパティ値、キーワード、その他の構文を無効として扱い(適切に無視する)、特に、ユーザーエージェントは、サポートされていない値のみを選択的に無視し、サポートされている値のみを複数値プロパティ宣言で尊重してはならない:いずれかの値が無効とみなされる場合(サポートされていない値はそうである)、CSSは宣言全体を無視することを要求しています。

不安定・独自機能の実装

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

CRレベル機能の実装

仕様がCandidate Recommendation段階に達したら、実装者は、仕様どおりに正しく実装できるCRレベル機能について、プレフィックスなしの実装を公開するべきであり、その機能のプレフィックス付きバージョンの露出は避けるべきです。

CSSの相互運用性を確立・維持するため、CSS作業グループは、実験的でないCSSレンダラーに対し、CSS機能のプレフィックスなし実装リリース前に実装報告書(必要ならそのテストケース)をW3Cに提出することを求めています。W3Cに提出されたテストケースはCSS作業グループによる審査・修正の対象となります。

テストケースおよび実装報告書の提出方法についてはCSS作業グループWebサイト(https://www.w3.org/Style/CSS/Test/)を参照してください。質問はpublic-css-testsuite@w3.orgメーリングリストへ。

索引

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

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

参考文献

規格参照文献

[CSS-OVERFLOW-3]
David Baron; Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. 2018年7月31日. WD. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 2019年1月31日. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 2018年5月24日. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. 1997年3月. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119

プロパティ索引

名前 初期値 適用対象 継承 %ages アニメーション型 正規順序 算出値 メディア
overscroll-behavior [ contain | none | auto ]{1,2} auto auto スクロールコンテナ要素 no n/a : 離散 文法順 個々のプロパティ参照 visual
overscroll-behavior-block contain | none | auto auto スクロールコンテナ要素 no N/A : 離散 文法順 指定通り visual
overscroll-behavior-inline contain | none | auto auto スクロールコンテナ要素 no N/A : 離散 文法順 指定通り visual
overscroll-behavior-x contain | none | auto auto スクロールコンテナ要素 no N/A : 離散 文法順 指定通り visual
overscroll-behavior-y contain | none | auto auto スクロールコンテナ要素 no N/A : 離散 文法順 指定通り visual