CSS3

プロパティ

spatial-navigation-function

  編集:2022.07.07 by T.A.

[Edge]⛌。→mdn

追加の空間的ナビゲーション コンテナの¶。

名前 spatial-navigation-function
normal | grid
初期値 normal
適用対象 空間的ナビゲーション コンテナー
継承 されない
百分率 受容しない
算出値 指定値
正準的順序 文法に従う
アニメーション型 離散的

§ 処理モデル にて指定された空間的ナビゲーションの既定のアルゴリズムは、レイアウト種別に依存して微調整が必要になり得る。このプロパティは、[どのナビゲーション アルゴリズムが、空間的ナビのふるまい用に適度になるか]指示することを、作者に許容する。

normal
ユーザー エージェントが定義する既定のフォーカス ナビゲーション アルゴリズムにより、フォーカスを移動する。

一般に、フォーカスは、最短距離を見出すことで計算される最も近い距離にある要素へ移動する。

grid
ナビゲーション方向に最も整列する要素へフォーカスを移動する。

ナビゲーション方向に整列している候補が 1 個以上ある場合、ナビゲーション方向の軸に沿って最も近い距離にある要素を選定する。複数の要素が同じ距離にある事例では、整列のずれが最小になる要素を選定する。

他の場合、ナビゲーション方向の軸に沿って最も近い距離にある要素を選定する。複数の要素が同じ距離にある事例では、ナビゲーション方向に直交する軸において整列のずれが最小になる要素を選定する。

注記: これらの値は、当のページ用の空間的ナビゲーションのふるまいが自然に見えるよう、利用者の選好と折衝される。

spatial-navigation-function の値に応じて、フォーカスがどう移動するかの違いを、次の例に示す。


"A" から候補を成すいずれかの要素へフォーカスを移動する

要素は、"A","B","C" を包含する空間的ナビコンテナで、"A" にフォーカスされているとする。

利用者が、下矢印キーを押したとする。フォーカスの移動先は、要素の spatial-navigation-function に指定された値に応じて[ normal ならば "B"。grid ならば "C" ]になる。


テスト
HTML:

ここに表示
¶[Edge]✖
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: