コンテンツを切り替えるさまざまな（および最新の）方法

マスターモダンなWebコンテンツの切り替えスキル：さようならdisplay: noneを言う！

うまくやりたい場合は、まずツールを磨く必要があります。

- アブラハム・マスロー

おなじみのツールの使用に慣れるのは簡単です。コンテンツスイッチングの場合、JavaScriptコードを補充したdisplay: noneまたはopacity: 0の使用に慣れている場合があります。しかし、今日では、Webテクノロジーはより近代的であり、さまざまなコンテンツの切り替え方法を包括的に検討する時が来ました。どのネイティブAPIがサポートされているか、長所と短所は何ですか。

<details></details>および<summary></summary>要素、ダイアログAPI、ポップオーバーAPIなどについて説明しましょう。お客様のニーズに応じて各メソッドをいつ使用するかを調べます。モーダルまたは非モーダル？ JavaScriptまたは純粋なHTML/CSS？心配しないでください、私たちはそれを一つずつ説明します。

<details></details>および<summary></summary>要素

アプリケーションシナリオ：コンテンツの詳細を個別に、またはアコーディオンスタイルのコンポーネントとして切り替えることができる間、アクセスしやすい方法でコンテンツの概要。

2024年12月12日に更新された

Chromeブログの新しい記事には、アニメーションギャラリーや部分的に開かれたを含む、より興味深い方法をいくつか使用する方法がいくつかあります（アニメーションに<details></details>を使用するオプションがあります）。 <details></details> calc-sizeリリースの順序で、

および

要素は、JavaScriptまたは独特のチェックボックスのトリックを使用せずにコンテンツを最初に切り替えることができるときのマークをマークします。しかし、ブラウザのサポートの欠如は明らかに新機能の人気を妨げます。特に、この機能には最初はキーボードのアクセシビリティがありません。 2011年にChrome 12のリリース以来使用していない場合は、理解できます。見たり動揺したりしていませんよね？ <details></details> <summary></summary>以下が重要なポイントです：

JavaScript（妥協なし）なしでは正常に動作します。

• などのないフルスタイルの設定
• appearance: none非標準的な擬似選択を使用せずにマークを隠すことができます。
• 複数の要素を接続して、アコーディオンスタイルのコンポーネントを作成できます。
• および... 2024年から完全にアニメーションにすることができます。 <details></details>
要素のタグ
• タグ

必要なのは<details></details>です

バックグラウンドでは、コンテンツは擬似要素に包まれており、2024年から

を使用して選択できます。さらに、

<details><summary>内容摘要（始终可见）</summary>
  内容（单击摘要时切换可见性）
</details>

は

::details-contentがオンまたはオフかどうかを示す::marker これを念頭に置いて、<details></details>バックグラウンドでは、実際には次のように見えます：

<details><summary>内容摘要（始终可见）</summary>
  内容（单击摘要时切换可见性）
</details>

<details></details>デフォルトで<details></details>を作成するには、open属性を<details></details>に追加します。これは、

がオンになったときにバックグラウンドで起こることと同じです。

<details><summary><::marker></::marker>内容摘要（始终可见）</summary><::details-content>
      内容（单击摘要时切换可见性）
  </::details-content></details>

要素のスタイル設定<details></details>

<summary></summary>正直に言うと、その迷惑なマークを削除したいだけかもしれません。これを行うことができますdisplay 'slist-itemプロパティを

：

<details open=""> ... </details>

以外の値に設定することができます。

::markerまたは、マークを変更できます。実際、次の例では、FontはAwessicを使用して別のアイコンに置き換えますが、は多くのプロパティをサポートしていないことを忘れないでください。最も柔軟なソリューションは、<summary></summary>のコンテンツを要素でラップし、CSSで選択することです。

summary {
  display: block; /* 或任何其他非 list-item 的值 */
}

<details><summary>内容摘要</summary>
  内容
</details>

複数の要素を使用してアコーディオンスタイルのコンポーネントを作成します<details></details>

アコーディオンスタイルのコンポーネントを作成するには、

属性を使用して複数の要素を名前を付け、マッチング値を使用します（ラジオボタンの実装方法に似ています）：name <details></details>

ラッパーを使用して、それらを水平タブに変えることもできます：

details {

  /* 标记 */
  summary::marker {
    content: "\f150";
    font-family: "Font Awesome 6 Free";
  }

  /* <details>打开时的标记 */
  &[open] summary::marker {
    content: "\f151";
  }

  /* 因为 ::marker 不支持许多属性 */
  summary span {
    margin-left: 1ch;
    display: inline-block;
  }

}</details>

<details name="starWars" open=""><summary>前传</summary><ul>
<li>第一集：幽灵的威胁</li>
    <li>第二集：克隆人的进攻</li>
    <li>第三集：西斯的复仇</li>
  </ul></details><details name="starWars"><summary>原版</summary><ul>
<li>第四集：新希望</li>
    <li>第五集：帝国反击战</li>
    <li>第六集：绝地归来</li>
  </ul></details><details name="starWars"><summary>续集</summary><ul>
<li>第七集：原力觉醒</li>
    <li>第八集：最后的绝地武士</li>
    <li>第九集：天行者的崛起</li>
  </ul></details>

…または、2024アンカーポジショニングAPIを使用して、

<div>
  <details name="starWars" open=""> ... </details><details name="starWars"> ... </details><details name="starWars"> ... </details>
</div>

vertical

タブ（同じHTML）を作成してください：

CSSでポップオーバーAPIの使用方法を知りたい場合は、John Rheaの記事をご覧ください。彼は、要素を使用してインタラクティブなゲームを作成しました。

div {
  gap: 1ch;
  display: flex;
  position: relative;

  details {
    min-height: 106px; /* 防止内容偏移 */

    &[open] summary,
    &[open]::details-content {
      background: #eee;
    }

    &[open]::details-content {
      left: 0;
      position: absolute;
    }
  }
}

JavaScript機能を追加<details></details>

JavaScript機能を追加したいですか？

アクセス可能な

要素を作成します

div {

  display: inline-grid;
  anchor-name: --wrapper;

  details[open] {

    summary,
    &::details-content {
      background: #eee;
    }

    &::details-content {
      position: absolute;
      position-anchor: --wrapper;
      top: anchor(top);
      left: anchor(right);
    }
  }
}

いくつかのルールが守られている限り、

要素はアクセスできます。たとえば、<details></details>は基本的に

です。つまり、フォーカスを取得すると、スクリーンリーダーがコンテンツを発表することを意味します。

または<details></details>の直接的な子要素が

ではない場合、ユーザーエージェントは、通常、視覚的および支援技術の両方で「詳細」として表示されるタグを作成します。古いブラウザは、それが最初の<label></label>子要素であると主張するかもしれないので、最初の子要素として設定することをお勧めします。 <summary></summary> さらに、<summary></summary>にはボタンの役割があるため、<details></details>で無効なものもで無効です。これにはタイトルが含まれているため、タイトルとしてスタイルをスタイルできますが、実際にタイトルをに挿入することはできません。

スペースの制限により、残りのすべてのコンテンツを翻訳することはできません。他の部品を提供してください、そして私は翻訳するために最善を尽くします。 <summary></summary>

以上がコンテンツを切り替えるさまざまな（および最新の）方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。