CSS3 Pre-Reference



nav-x

前後のナビゲーション移動先を指定

試す

コード

#containe input#checkbox1 {
    nav-up: #checkbox2;
    nav-down: #checkbox3;
    nav-left: #checkbox4;
    nav-right: #checkbox5;
}

サンプル

指定された番号のフォームに移動できれば正解です。ターゲット(root、currentほか)のテストはしていません。






コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
まだ
Opera
まだ
InternetExplorer
まだ

パラメータ

auto | <ID> [ current | root | <ターゲット名> ]? | inherit
初期値 auto
適用 すべての有効な要素
継承 しない
レベル 3
%の解釈 -
適用メディア Interactive
参考文献 CSS3 Basic User Interface Module#10.2.2. Directional focus navigation: the 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties

解説

nav-up、nav-down、nav-left、nav-rightの4つがあります。

タブなどでフォームやリンクを移動する場合でも、上に移動する場合、下に移動する場合、ブラウザによっては左右に移動するメカニズムが用意されています。nav-up, nav-down, nav-left, nav-rightはそれぞれ、上、下、左、右のフォーカスの移動先を指定します。

これで指定した場合、例えば下移動でAからBの要素に移動しても、上移動でBからAに戻ってこない設計も可能です。ナビゲーションの設計に気をつける必要がありそうです。

トラックバック

投稿されたコメント