1つは、CSSをすばやく理解することです。フォーカスが見える疑似クラスです。
:focus-visible疑似クラスは非常に若い疑似クラスであり、現在Chromeブラウザ標準でのみサポートされていますが、それで十分です。ユーザーエクスペリエンスを詳しく調べる開発者の場合、この疑似クラスは非常に便利です。
:focus-visible疑似クラスアプリケーションのシナリオは次のとおりです。要素にフォーカスがあり、フォーカスアウトラインブラウザはそれを表示する必要があると考えます。
ぎこちないですか？これは、仕様がそれを定義する方法です。:focus-visible仕様はマッチングロジックに制約を課しませんが、UA（つまりブラウザ）に渡されます。実際のケースを使用して、この疑似クラスの目的を説明します。
最近のすべてのブラウザで<a>は、リンク要素がマウスでクリックされたときにフォーカスアウトラインはありませんが、キーボードにアクセスしたときに表示されます。これは非常に期待されるエクスペリエンスです。
ただし、Chromeブラウザには、次のように表示されない特別なシーンがいくつかあります。
- 背景
<button>ボタンを設定します。 - HTML5
<summary>要素; - HTML
tabindex属性が設定された 要素;
上記の3つのシーンでは、次の図に示すように、Chromeブラウザでマウスをクリックしたときにも目立つフォーカスアウトラインが表示されます。
これは実際には見たくないものです。アウトラインはクリックされたときに表示されるべきではありませんが（強調表示する必要はありません）、キーボードにアクセスしたときに表示される必要があります（ユーザーに現在フォーカスされている要素を知らせるため）。 FirefoxとIEの両方のブラウザが期待どおりに機能します。クリックアクセスにはアウトラインがなく、キーボードアクセスのみが使用可能であり、Safariブラウザボタンは期待どおりに機能します。
ただし、単純に設定することはできません。これによりoutline:none、キーボードアクセス中に表示されるフォーカスのアウトラインが非表示になり、深刻なアクセシビリティの問題が発生するためです。
視覚的なエクスペリエンスとキーボードのアクセシビリティを考慮に入れるために、以前のアプローチではJavaScriptを使用して判断していました。要素が:focusキーボードアクセスによってトリガーされる場合は、要素にカスタムoutlineアウトラインを追加します。そうoutlineしないと、削除するのにコストがかかります。
今あることを:focus-visible擬似クラスは、すべての問題を容易に解決することができる。Chromeブラウザの現在のバージョンでは、ブラウザは信じて:focus-visibleフォーカスことキーボードアクセスによってトリガ素子は焦点が示さ。つまり、:focus-visible要素のフォーカス動作がマウスとキーボードのどちらによってトリガーされたかを知ることができます。したがって、マウスがクリックされたときにoutlineアウトラインを削除し、キーボードにアクセスしたときにoutlineアウトラインを保持したい場合は、短いCSSルールのみが必要です。
：focus：not（：focus-visible）{
アウトライン：0;
}
Chromeブラウザでの輪郭の問題は解決されました。見ては信じられています。ここをクリックしてください:: focus-visibleおよびChromeブラウザの輪郭輪郭制御デモ
この時点で、以下に示すように、tabindex属性<div>がアウトラインなしに設定されている要素をクリックします。
ただし、キーボードを使用してアクセスする場合、たとえばTabキーを押してインデックスを作成する場合、次の図に示すように、アウトラインは引き続き存在します。
完璧、感動！
2.すぐにデフォルトでサポートされるはずです
現在Chromeブラウザ（バージョン67以降でサポート）でサポートされていますが、Web実験機能をサポートするにはブラウザを有効にする必要があります。
しかし、すぐにデフォルトでリリースされると思います。UIコンポーネントの作成時に投げられた、経験に関連する多くのJavaScriptコードはいつでも削除できます。
ちなみに、:focus-visible疑似クラス用の既製のポリフィルがあります。アドレスはhttps://github.com/WICG/focus-visibleです。
このような優れた機能をプロジェクトに適用するのが待ちきれない場合は、このポリフィルスクリプトを導入できます。
さらに、:focus-visible関連する詳細は、この記事で説明されているものよりもはるかに複雑です。現在の仕様はまだ不明であるため、まだ拡張しません。
3.今週の土曜日のCSSカンファレンスについて
深センで開催される今年のCSSカンファレンスである第5回CSSカンファレンス（https://css.w3ctech.com/）に引き続き参加できることは幸運です。共有するコンテンツは用意されていますので、まずはご迷惑をおかけしません。そうすれば、私の「CSS World」を購入した友達がその本を持ってきて、署名を手伝うことができます。