このフレームはアウトラインのcss-propertyにすぎないため、このフレームをリンクで無効にする最も最初で最も頻繁に推奨される方法は、単純なcss-ruleを指定することです。
a:フォーカス{ アウトライン:なし; }またはこれでさえ:
{ アウトライン:なし; }
しかし、ご想像のとおり、このフレームはアクティブな要素へのフォーカスを示しているため、単純に削除することはできません。 マウスで作業する場合、この関数はまったく役に立たないように見えるかもしれません。したがって、アクティブな要素がカーソルの下にあることは明らかです。 ただし、キーボードから移動する場合、このフレームにより、どの要素に現在フォーカスがあるかがわかります。 FirefoxおよびIE8で上記のルールを適用する場合、リンクはタブキーでクロールされますが、どのリンクが強調表示されているかを理解することはできません。
他のシステムは、他の動作パターンを実装しています。 私が注意したい最初のアプローチは、Windows XP以降の標準的な動作です-デフォルトでは、コントローラーに焦点が当てられていません。 ただし、初めてTabキーを押すと、フォーカスが表示されて消えなくなります。 同じ動作はInternet Explorer 6および7ブラウザーの特徴であり、Operaのアプローチは異なります。 彼女は、タブキーを使用してリンクを移動する必要はないと考え、フォームコントロールのみに焦点を合わせます。 また、リンクを使用すると、他のメカニズム(Shift +矢印またはControl +矢印)を使用してナビゲーションを行うことができます。 このアプローチでは、リンクのcssアウトラインプロパティは重要ではありません。
Operaの動作を実現することはほとんど不可能であり、必要ではないことは明らかです。これらのブラウザのユーザーにとっては珍しいことです。 ただし、Internet Explorer 6および7の動作をエミュレートすることはできます。 これを行うには、焦点を合わせるためだけでなく、押すときに直接フレームを削除します。 ご存知のように、:focus擬似クラスに加えて、もう1つ-:activeがあります。 mousedownイベントとmouseupイベント間のリンクの状態を担当します。 同じアウトライン(なし)を使用すると、マウスでクリックした時点でフレームは表示されません。 ただし、リンクがフォーカスされるため、リリース後すぐに表示されます。 これは、誘導された要素のフレームを削除することで解決できます。 コードは次のようになります。
a:アクティブ、a:ホバー{ アウトライン:なし; }
この方法は、OperaソフトウェアのWebエバンジェリストであるPatrick H. Lauke(Pepelsbey、こんにちは!)が推奨しています。 しかし、それでも2つの不快な瞬間が残ります。フォーカスはまだどこにも行かず、マウスを動かした後に表示されます。 したがって、リンクがjavascriptによって処理され、別のページにつながらない場合は、クリック後にフォーカスをリセットする必要があります。 2番目のポイント-キーボードから移動するとき、マウスをホバーすると、推測されるように、フォーカスが消えます。
フォーカスの動作に関するすべての情報は、1つの表に要約できます。
最後の列に緑色の丸が表示されていないことは良い結果です。
他にできること
この問題の可能な解決策は、点線のフォーカスフレームを完全に放棄し、背景色の変更などを行うことです。 このオプションは、マウスとの対話時にそれほど悪くはないかもしれません。 解決策のマイナス-クイックルックがない場合は、フォーカスされているリンクを特定するだけでは不十分です。
わずかな余談
そのような問題の解決策を探しているときは、風車に苦労しているという感覚を常に感じます。 ブラウザは長い間、独自の特性とユニークな小さなもののエコシステムになっています。 そして、ユーザーは、ブラウザーを選択して、これらのささいなことすべてを選択します。 おそらく最良の解決策は、ユーザーが選択したものを変更しようとするのをあきらめることでしょう。 そして、突然、これらの些細なことの一部がブラウザの大部分のユーザーにとって気に入らない場合、おそらくブラウザで変更する価値がありますか? 件名のxkcdからの画像 。