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

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 でオブジェクトが空かどうかをチェックする実装例

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

推薦する

XHTML 入門チュートリアル: XHTML ハイパーリンク

ハイパーリンクはインターネット全体を接続していると言っても過言ではありません。ハイパーリンクは、別の...

CSS の優先順位に関する詳細な紹介

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...

JavaプログラミングでJavaScriptの超実用的なテーブルプラグインを書く

目次効果ドキュメント最初のステップステップ2ステップ3ソースコード効果ドキュメント最初のステップta...

スプライトとフォントアイコンを実装するためのCSS

スプライト:以前は、各画像リソースは独立した画像でした。ブラウザが Web サイト内のさまざまな W...

MySQL クロステーブルクエリとクロステーブル更新

SQL の基礎知識がある友人は、「クロステーブル クエリ」について聞いたことがあるはずですが、クロス...

npmとcnpmを混在させる際の落とし穴の詳細な説明

目次原因理由NPM の紹介: CNPM の紹介:より良い方法方法の改善npm と cnpm を一緒に...

バックエンド管理システムを構築するためのvue-element-adminの実装手順

最近、カンファレンスの健康申告システムに取り組んでいたとき、バックエンドを構築する必要があり、vue...

Vue双方向バインディングの詳細な説明

目次1. 双方向バインディング2. 他のタグを選択した場合にも同じ結果になりますか? 答えはもちろん...

Centos8環境でSSHポート番号を変更する方法

目次序文始める序文サーバーのデフォルトの SSH ポート番号は通常 22 であるため、ほとんどのユー...

MySQLの一般的なバックアップコマンドとシェルバックアップスクリプトの共有

複数のデータベースをバックアップするには、次のコマンドを使用できます。 mysqldump -uro...

CSS スタイルの読み込みの優先順位に関する経験の共有

昨日のプロジェクト開発中に、スタイルの読み込み優先順位に関する問題が発生しました。クラスは定義され、...

Apache FlinkCEP でタイムアウトステータス監視を実装するための詳細な手順

CEP - 複合イベント処理。ご注文後、一定期間内にお支払いの確認が取れませんでした。タクシーの配...

CSSの優先度を理解する2つの方法

方法1: 値を追加する公式の説明を見るには MDN にアクセスしてください。優先度はどのように計算さ...

一般的なテーブルコンポーネントの Vue カプセル化の完全な手順記録

目次序文テーブル コンポーネントをカプセル化する必要があるのはなぜですか?ステップ1: 共通コンポー...

jsの継承の6つの方法を詳しく解説

プロトタイプチェーン継承プロトタイプ継承は、ECMAScript における主な継承方法です。基本的な...