1. このページの目的
CSS: focus-visible 擬似クラスを試す。
Tabキーでのフォーカスとクリック（やタップ）でのフォーカスを区別させたいときに使うらしい。
Chrome 36 以上から試すことができる。
実験するのは、Chrome 36 になるまで待つ。
2. デモ
HTML
<button class="">通常のボタン</button>
<button class="fv">focus-visible を利用したボタン</button>
CSS
/* button の outline は消しておく */
button {
outline: solid 0 black;
}
/* フォーカス時に青枠が表示されるようにしておく */
button:focus {
outline: solid 1px blue;
}
/* focus-visible である場合 */
button.fv:focus-visible {
outline: 4px dashed red;
}
/* フォーカス状態ではあるが、focus-visible ではない場合 */
button.fv:focus:not(:focus-visible) {
outline: 5px dashed green;
}
3. メモ
- 通常では、(1) Tabキーでボタンにフォーカスする (2) ボタンをクリックする、のどちらであってもそのボタンはフォーカス状態になり、
:focusで指定した装飾が適用される。 - ブラウザによってデフォルトのスタイルシートが違うことに注意する。