CSS :focus-withinの具体的な使い方を解説

この記事では主に CSS :focus-within の具体的な使い方に関する関連情報を紹介します。興味のある方は参考にしてください

CSS の世界は本当に魔法の世界です。多くのフロントエンド開発者は、:focus については聞いたことがあるかもしれませんが、:focus-within については聞いたことがないかもしれません。では、:focus-within とは一体何でしょうか?この記事では、:focus-within について説明します。

:focus-within とは何ですか

CSS では: focus-within は疑似クラスであり、現在は CSS セレクター (CSS レベル 4 セレクター) に含まれています。 :focus や :hover を知っているようなものです。 :focus-within はフォーカス状態を処理するのに非常に便利です。 :focus-within 擬似クラスの要素は、要素自体またはその子孫がフォーカスを受け取ったときに有効になります。

テキストがわかりにくい場合は、まず簡単な例を見てみましょう:

<p class="form-group">
    <label for="email">
        Your email:
    </label>
    <input type="email" name="email" id="email" placeholder="Enter your email address"/>
</p>

上記は、入力フォーム コントロールを備えた単純なフォームです。

.form-group *:focus {
    background: yellow;
    color: #000;
}
.form-group {
    padding: 10px;
    border: 3px solid transparent
}

.form-group:focus-within {
    border-color: #000;
}

上記の例では、 .form-group がフォーカスを取得すると、境界線の色が #000 に変更されます。ただし、これはキーボード フォーカスを受け取ることを意味するものではありません。これは、

が必ずしもキーボード フォーカスを取得するとは限らず、tabindex が設定されていないためです。または、p のリンクまたは入力要素がフォーカスを受け取った場合、.form-group 要素は境界線の色を変更します。

上記の例を見て、すごいと思いませんか?以前は同様の効果を実現するには、JavaScript スクリプトを使用する必要がありました。 .form-group の子孫要素のマウスまたはキーボード イベントを通じて、対応するスタイルをその親要素 (または祖先要素) に追加します。

:focus-within の使用シナリオ

:focus-within は、主に、その要素のいずれかがフォーカスを取得したときに擬似クラスがアクティブ化されるため、非常に強力です。要素に多くのサブコンポーネントが含まれる場合、この疑似クラスは注意して使用してください。 :focus-within を使用すると、いくつかの一般的なインタラクティブな動作が非常にシンプルになり、特に以前は JavaScript キーボード イベントが必要だったインタラクティブな動作が、代わりに :focus-within を使用できるようになります。

次に、:focus-within の一般的な例をいくつか見てみましょう。

表の行の強調表示

一般的な例は、表の行の強調表示の動作です。つまり、表の行の上にマウスを置くと色が強調表示されます。この対話型スタイルは、視覚障害のあるユーザーが複雑な表や長いフォームを読みやすくするのに役立ちます。強調表示のおかげで、これらのユーザーは現在読んでいるテーブルの行をより簡単に追跡できます。過去によく実装されていた方法は、 :hover を使用してテーブルの行のスタイルを変更することでした。この解決策は通常のユーザーにとっては簡単な作業ですが、ユーザーがマウスを操作するのが難しい場合は、:hover を使用するのは少し面倒です。完璧を求める場合は、JavaScript キーボード イベントを介してテーブルの行にスタイルを追加することもできます。

つまり、:focus-within を使用すると、JavaScript に別れを告げることができます。次のようにスタイルを設定できます:

上の例は、:focus-within を使用してテーブルの行全体を強調表示する方法を示しています。テーブルの特定の行にフォーカスを取得できる要素がある場合、これはキーボードを介してフォーカスを取得することを指します。たとえば、上の例では、テーブルに 要素があります。a 要素はキーボードを通じてフォーカスを取得できます。

現時点では、スタイルを追加するだけです:

tbody tr:focus-within,
tbody tr:hover {
    background: rgba(lightBlue, .4);
}

ドロップダウン メニュー

ドロップダウン メニューは、最も一般的な Web コンポーネントの 1 つです。私が最初に :focus-within 擬似クラスを見たとき、最初に頭に浮かんだ使用例はドロップダウン メニューでした。

上記の例では、ナビゲーション ドロップダウン メニューでユーザーのキーボード フォーカスを追跡するために JavaScript が使用されています。キーボードのフォーカスがリンク上にあることが JavaScript によって検出された場合は、.has-focus クラスを .nav__list_drop に追加します。 li に .has-focus クラスがある場合、その子要素が表示されます。つまり、ドロップダウン メニューが表示されます。

この効果を得るには、:focus-within を通じて JavaScript スクリプトの関数を直接置き換えることができます。 .nav__list__drop.has-focus の代わりに .nav__list__drop:focus-within を使用します。キーボードを操作してドロップダウン メニュー項目にフォーカスを移動すると、ドロップダウン メニューが表示されます。

.nav__list a:focus + .nav__list__drop,
.has-drop:hover .nav__list__drop,
.nav__list__drop:focus-within {
    opacity: 1;
    transform: translateY(0px);
    height: auto;
    z-index: 1;
}

オフスクリーン ナビゲーション

オフスクリーン ナビゲーションは、モバイル端末で一般的なエフェクトです。次に、:focus-within を通じてこの効果を実現することもできます。詳細なコードについては、次の例を参照してください。

ブラウザの互換性

:focus-within 非常に興味深いものですが、多くの学生がその互換性を心配しています。 Caniuse を通じて、ブラウザーがそれをサポートしていることがわかります。

概要

:focus に精通していれば驚くことではありませんが、:focus-within を知っているということは、常に新しい CSS に注意を払っていることを意味します。に関連した特性。もちろん、このプロパティは CSS の世界を再び更新しましたが、これは本当に奇妙です。興味があれば、自分でデモを書いてみてはいかがでしょうか。この物件はきっと気に入っていただけるでしょう。

以上がCSS :focus-withinの具体的な使い方を解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。