CSS3のfocus-withinセレクタの使用

擬似要素と擬似クラス

ところで、まずは疑似クラスセレクターと疑似要素セレクターについておさらいしておきましょう。古いブラウザでは、以下の 2 つの書き方は厳密に区別されていませんでした。

a:後{}
a::after{}

新しい標準では、CSS3 疑似クラスにはシングルコロン (:) が使用され、CSS3 疑似要素にはダブルコロン (::) が使用されます。開発中はこれに注意する必要があります。もちろん、ほとんどのブラウザは両方の記述方法を認識できます。

一般的な疑似要素と疑似クラス

擬似クラス

:link、:visited、:hover、:active、:focus、:first-child、:last-child、:nth-child、:nth-last-child、:not()

疑似クラスは、通常、マウスのホバー、ボタンのクリック、リンクの訪問、入力ボックスのフォーカスなど、要素の特定の状態に使用されます。また、複数の要素の最初、最後、偶数、奇数などの特別な要素を選択する場合にも使用されます。その機能は、上記の条件を満たす要素にいくつかのスタイルを追加することです。

ホバー{
        テキスト装飾: 下線;
    }
a:アクティブ{
    色: 青;
}
リンク
    色: 赤;
}
a:訪問{
    色: 緑;
}

上記の例は、さまざまな状態のaタグのさまざまなスタイルを示しています。リンクをクリックする前は、 aタグは赤いフォント (リンク) で表示されます。マウスをaタグの上に移動すると、 aタグに下線が付きます (ホバー)。マウスが押されると、 aタグは青 (アクティブ) に変わります。クリックすると、 aタグは緑 (訪問済み) に変わります。ご覧のとおり、疑似クラスの目的は、さまざまな状態のタグにスタイルを追加することです。

擬似要素

::最初の文字、::最初の行、::前、::後

コンテンツモジュールで説明したように、「content」属性が設定されていない場合、疑似要素は役に立ちません。疑似要素を使用して挿入されたコンテンツは、ページのソースコードには表示されず、CSS にのみ表示されます。挿入された要素は、デフォルトではインライン要素（または HTML5 ではテキストセマンティッククラス）になります。したがって、挿入された要素に高さ、パディング、マージンなどを指定するには、通常、それをブロックレベル要素として明示的に定義する必要があります。また、挿入された要素には一般的な CSS 継承ルールが適用されることに注意してください。たとえば、Helvetica、Arial、Sans Serif のフォントファミリを body 要素に適用すると、疑似要素は他の要素と同様にそのフォントファミリを継承します。疑似要素は、親要素からスタイル (パディングマージンなど) を自然に継承しません。直感的には、:before および :after 疑似要素は、挿入されたコンテンツがターゲット要素の前または後に挿入されることを意味していると考えられます。そうではありません。挿入されたコンテンツは、関連付けられたターゲット要素の子になりますが、その要素のコンテンツの「前」または「後」に配置されます。

<ヘッド>
    <スタイル タイプ="text/css">
        p.box::before {
          コンテンツ： "＃";
          境界線: 実線 1px 黒;
          パディング: 2px;
          マージン: 0 10px 0 0;
        }
        p.box::after {
          コンテンツ： "＃";
          境界線: 実線 1px 黒;
          パディング: 2px;
          マージン: 0 10px 0 0;
        }
    </スタイル>
</head>
<本文>
<p class="box">その他のコンテンツ。</p>
</本文>

操作効果:

ご覧のとおり、 html部分には要素を 1 つしか記述していませんが、前部、中央、後部の 3 つの部分をレンダリングするために疑似要素を使用しています。ここで、疑似要素は一般的にhtml要素を補助するために使用されると考えられます。ただし、コンテンツページのソースコードは見ることができません。疑似要素を使用することで、多くの魔法のような機能を実現できます。ここでは詳しく説明せず、後ほど具体的なチュートリアルを公開します。

マジック擬似クラス: focus-within

話題に戻り、主役のfocus-withinに戻りましょう。疑似クラスfocus要素がフォーカスを取得したときにその要素にスタイルを追加することを指すことはわかっています。 focus-withinより広い範囲を持ち、要素にフォーカスがあるか、その要素の子孫要素にフォーカスがあることを意味します。ポイントを強調表示すると、そのポイントまたはその子孫がフォーカスされます。つまり、その要素またはその子孫がフォーカスを取得すると、 :focus-withinトリガーされる可能性があります。

このプロパティは、フォーカス可能な要素から始まり、トリガー:focus-withinイベントを受け取ることができるルート要素htmlにバブリングする、 Javascriptのイベントバブリングに少し似ています。次の簡単な例に似ています。

<html>
 <div class="box g-father">
        <div class="box g-children">
            <div class="box button" tabindex="1">ボタン</div>
        </div>
  </div>
  <div class="g-body">HTML</div>
  <スタイル>
    div {
      ボックスのサイズ: 境界線ボックス;
    }
    .button,.g-children {
        幅: 100%;
        高さ: 100%;
        パディング: 20px;
        境界線: 1px 実線;
    }
    .g-父{
        幅: 200ピクセル;
        高さ: 200px;
        パディング: 20px;
        境界線: 1px 実線;
    }
    .g-ボディ{
        上マージン: 20px;
        幅: 200ピクセル;
        境界線: 1px 実線;
    }
    .g-body:フォーカス内{
        背景色: #5daf34;
    }
    .g-father:focus-within {
        背景色: #3a8ee6;
    }
    .g-children:focus-within{
        背景色: #2c3e50;
    }
    .button:focus-within {
        背景色: #606266;
        色: 赤;
    }
        </スタイル>
</html>

実行結果:

buttonフォーカスを取得すると、バブリングにより、そのすべての親要素に:focus-withinスタイルが適用されることがわかります。ここで注目すべきは、通常のdivフォーカスを取得できないということです。tabindex 属性を設定することによってのみフォーカスを取得できます。同時に、キーボードの Tab キーを押すことでもフォーカスを取得できます。tabindex 値が小さいほど、Tab キーを切り替えたときに最初にフォーカスされるようになります。 :focus-withinの特性により、js を使用せずに多くの実用的な機能を実装できます。

ユーザーの焦点領域を感知

focus-withinを使用すると、ユーザーの認識領域が拡大し、より優れた視覚的なフィードバックをユーザーに提供できます。

<html>
 <div class="g-container">
      <input type="text" placeholder="ユーザー名" class="g_input" >
      <input type="text" placeholder="code" class="g_input" >
  </div>
  <スタイル>
    .g-コンテナ{
        上マージン: 10vh;
    }
    .g-コンテナ{
        パディング: 10px;
        幅: 30vw;
        境界線: 1px 実線 #eee;
        遷移: すべて .3;
        テキスト配置: 中央;
    }
    .g-コンテナ:フォーカス内{
        変換: translateY(-4px);
        ボックスシャドウ: 0 0 10px #ddd;
        境界線の色: hsl(199, 98%, 48%);
    }
    .g_入力{
        境界線: なし;
        幅: 20vw;
        パディング: 15px;
        フォントサイズ: 18px;
        ボックスのサイズ: 境界線ボックス;
        境界線: 1px 実線 #ddd;
        オーバーフロー: 非表示;
        遷移: 0.3秒;
        ボックスシャドウ: 0 0 0px #ddd;
        ＆：集中 {
            ボックスシャドウ: 0 0 10px #ddd;
            境界線の色: hsl(199, 98%, 48%);
        }
    }
    </スタイル>
</html>

javascriptロジック制御なしで、 focus-withinを使用して上記の効果を実現できることがわかります。

オフスクリーンナビゲーションを実装する

まずは効果を見てみましょう:

これは優れたナビゲーション効果であり、実装全体でjavascriptコントロールが使用されていないため、パフォーマンスとエクスペリエンスが大幅に向上していることが分かります。具体的なソースコードは次のアドレスにあります: アドレス

B StationやNuggetsなどのウェブサイトのログインアニメーション切り替えを実装する

ユーザーが Bilibili や Nuggets でパスワードを入力するとき、上の画像では目を覆っていることに気づいたかもしれません。ここでもfocus-withinを使用してこれを実現できます。

<html>
 <div class="g-wrap"></div>
        <div class="g-container">
            <h2>ログイン</h2>
            <div class="g-ユーザー名">
                <input maxlength="64" placeholder="電話番号またはメールアドレスを入力してください" class="input">
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png" class="g-username">
            </div>
            <div class="g-password">
                <input type="password" maxlength="64" placeholder="パスワードを入力してください" class="input">
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png" class="g-password">
            </div>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png" class="g-normal">
    </div>
<スタイル>
.g-ラップ{
  位置: 固定;
  上: 0;
  左: 0;
  下部: 0;
  右: 0;
  背景: rgba(0, 0, 0, 0.3);
}

.g-コンテナ{
  位置: 相対的;
  幅: 318ピクセル;
  マージン: 100px 自動;
  高さ: 370ピクセル;
  パディング: 20px;
  ボックスのサイズ: 境界線ボックス;
  背景: #fff;
  zインデックス: 10;
}
.g-コンテナ h2 {
  フォントサイズ: 20px;
  フォントの太さ: 太字;
  下部マージン: 30px;
}
.g-コンテナ入力{
  アウトライン: なし;
  パディング: 10px;
  幅: 100%;
  境界線: 1px 実線 #e9e9e9;
  境界線の半径: 2px;
  アウトライン: なし;
  ボックスのサイズ: 境界線ボックス;
  フォントサイズ: 16px;
}

画像 {
  位置: 絶対;
  上限: -20%;
  左: 50%;
  幅: 120ピクセル;
  高さ: 95px;
  変換: translate(-50%, 0);
}

.g-ユーザー名{
  下マージン: 10px;
}
.g-ユーザー名img {
  表示: なし;
  幅: 120ピクセル;
  高さ: 113px;
}

.g-ユーザー名:フォーカス内 ~ img {
  表示: なし;
}

.g-ユーザー名:入力内のフォーカス{
  境界線の色: #007fff;
}
.g-ユーザー名:フォーカス内画像 {
  表示: ブロック;
}

.g-パスワード{
  下マージン: 10px;
}
.g-パスワード画像{
  表示: なし;
  幅: 103px;
  高さ: 84px;
  上限: -15%;
}

.g-password:focus-within ~ img {
  表示: なし;
}

.g-password:入力内にフォーカス {
  境界線の色: #007fff;
}
.g-password:フォーカス内画像{
  表示: ブロック;
}
</スタイル>
</html>

jsを使わなくても画像を動的に切り替える効果が得られることがわかりますが、まだいくつかの制限があります。DOM dom配置は親が上向きのみで、要素をfocus要素の子要素に配置することはできません。そのため、 jsほど柔軟ではありませんが、コードの量は少なくなります。

フォーカス内の互換性

CSS3 の新機能には常に互換性の問題があったため、ここで互換性を確認したところ、赤い領域はそれほど悪くないことがわかりました。IE を除いて、他のブラウザは基本的にサポートしています。

すべてのソースコードは私のリポジトリにあります:

CSS3 の focus-within セレクターの使い方についてはこれで終わりです。CSS3 の focus-within セレクターについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: ネイティブ JavaScript でオブジェクトが空かどうかをチェックする実装例

>>: ページキャッシュを無効にするいくつかの方法を共有する