CSS の hideFocus の使い方

CSSにおけるhideFocusとは、要素にフォーカスされたときにフォーカス状態の外観を表示するかどうかを指定する擬似クラスセレクタです。

hideFocusを使用している場合は、要素のoutlineまたはbox-shadowプロパティを設定することでフォーカスの外観を制御できます。

以下に例を示します。

.hide-focus {
outline: none;
}
.hide-focus:focus {
outline: none;
box-shadow: none;
}

上の例では、要素にフォーカスが当たった際に、輪郭とボックスシャドウの属性をnoneに設定することで、フォーカスの見た目を隠しています。要素に.hide-focusクラスを追加することで、このスタイルを適用できます。

注意，hideFocus 已在大多数新式浏览器中弃用，它们提供了更佳的方式来控制焦点的外观，所以撰写新式网站时，几乎不需要使用hideFocus。

CSS擬似クラスセレクターであるfocus-visibleを利用するなどのより現代的な手法を利用することを推奨します。focus-visibleは、ユーザーの入力デバイス（キーボードやマウスなど）に応じて動的にスタイルを適用できます。これにより、キーボードナビゲーション時にはフォーカスが可視化され、マウスナビゲーション時にはフォーカスの外観が隠蔽されます。