：Firefoxに対するフォーカス可視のサポートが来ます

Firefox 85バージョンは正式にサポートされています:focus-visible Pseudo Classセレクター！それはどういう意味ですか？一緒に見てみましょう。

MDNドキュメントが更新されているため、非常に期待されています:focus-visible擬似クラスセレクターは、Firefox 85でネイティブにサポートされています。

:focus-visibleアクセシビリティと視覚的な美学のバランスを巧みにバランスさせることです。フォーカスプロファイルはアクセシビリティに重要であることを知っています（特にキーボードをナビゲートする場合）が、デフォルトのBlueフォーカスプロファイルが常にブランド設計に適合するとは限りません。

過去には、ジレンマに直面していました。カスタムアウトラインを使用して、すべての要素がフォーカス（キーボードクリックであろうとマウスのクリックであろうと）を表示するか、アウトラインを完全にキャンセルしてアクセシビリティを犠牲にします。および:focus-visibleこの問題を完全に解決します。ブラウザのユーザー入力情報（またはヒューリスティック）を使用して、キーボードまたはマウスからの焦点が来るかどうかを判断します。

（ブラウザのヒューリスティクスは入力方法を完全に区別できますか？それは状況に依存します。タッチの相互作用が関係すると、状況は複雑になります。）

これは、デフォルトのフォーカスリングを削除できることを意味します（素晴らしい！）例を見てみましょう（アンディ・アダムスのおかげです）：

 <code>.next-image-button:focus { outline: none; } .next-image-button:focus-visible { outline: 3px solid blanchedalmond; /* 自定义焦点样式*/ }</code>

それは次のことに注意する必要があります:focus-visibleフォーカスリングを完全に削除するわけではありません:focusでは通常、2つは一緒に使用されます。

Chromeは2018年には早くも実装されました:focus-visible 。 Firefoxには、以前には独自のプレフィックスバージョンもありました:-moz-focusring 。サファリユーザー？この機能に行って投票してください！ Igaliaは資金を集め、Safariブラウザーに追加するために取り組んでいます！ブライアン・カーデルはこれを詳細に説明しました。

以上が：Firefoxに対するフォーカス可視のサポートが来ますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。