Les différentes façons (et modernes) de basculer le contenu

Master Modern Web Content Switching Skilling: Dites Goodbye display: none!

Si vous voulez bien faire les choses, vous devez d'abord affiner vos outils.

—— Abraham Maslow

Il est facile de s'habituer à utiliser des outils familiers. Pour la commutation de contenu, vous pouvez être habitué à utiliser display: none ou opacity: 0, complété par du code JavaScript. Mais de nos jours, la technologie Web est plus moderne, et il est temps d'obtenir un aperçu complet de diverses méthodes de commutation de contenu: quelles API natives sont prises en charge, quels sont leurs avantages et leurs inconvénients, et certains détails que vous ne connaissez peut-être pas (comme les pseudo-éléments et autres contenus indistincts).

Discutons des éléments <details></details> et <summary></summary>, de l'API de dialogue, de l'API popover, et plus encore. Nous explorerons quand utiliser chaque méthode en fonction de vos besoins. Modal ou non modal? Javascript ou pur html / css? Ne vous inquiétez pas, nous l'expliquerons un par un.

<details></details> et <summary></summary> Éléments

Scénario d'application: Résumé du contenu de manière facile à accès tout en permettant à des détails de contenu de changer indépendamment ou en tant que composant de style accordéon.

Mis à jour le 12 décembre 2024: Un nouvel article sur le blog Chrome montre plusieurs façons plus intéressantes d'utiliser <details></details>, y compris une galerie d'animation et un <details></details> partiellement ouvert calc-size (il existe une option à utiliser

pour l'animation).

<details></details> Dans l'ordre de version, les éléments <summary></summary> et

marquent la première fois que nous pouvons changer de contenu sans utiliser JavaScript ou les astuces de case à cocher particulières. Mais le manque de prise en charge du navigateur entravera évidemment la popularité des nouvelles fonctionnalités, en particulier cette fonctionnalité manque initialement d'accessibilité au clavier. Si vous ne l'avez pas utilisé depuis la sortie de Chrome 12 en 2011, je peux comprendre. Ne pas voir ou se sentir bouleversé, non?

Voici les points clés:

Cela fonctionne bien sans JavaScript (sans aucun compromis).
• appearance: none Paramètre de style complet sans
etc.
Vous pouvez masquer les marques sans utiliser de pseudo-électror non standard.
• <details></details> Vous pouvez connecter plusieurs éléments
pour créer un composant de style accordéon.
et ... il peut être entièrement animation à partir de 2024.

<details></details>

Tags d'éléments

Ce dont vous avez besoin est:

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

::details-content En arrière-plan, le contenu est enveloppé dans un pseudo-élément, et à partir de 2024, nous pouvons le sélectionner en utilisant ::marker. De plus, il y a un pseudo-élément <details></details> indiquant si

est activé ou désactivé, et nous pouvons le personnaliser.

<details></details> Dans cet esprit,

en arrière-plan, cela ressemble en fait à ceci:

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

Pour faire <details></details> sur par défaut, ajoutez l'attribut <details></details> à open, ce qui est le même que ce qui se passe en arrière-plan lorsque <details></details> est activé.

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

<details></details> Paramètres de style des éléments

pour être honnête: vous voudrez peut-être supprimer cette marque ennuyeuse. Vous pouvez le faire en définissant la propriété <summary></summary> S display à n'importe quelle valeur autre que list-item:

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

ou, vous pouvez modifier la marque. En fait, l'exemple suivant utilise Font Awesome pour le remplacer par une autre icône, mais n'oubliez pas que ::marker ne prend pas en charge de nombreuses propriétés. La solution la plus flexible consiste à envelopper le contenu de <summary></summary> avec un élément et à le sélectionner dans CSS.

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

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

Créer des composants de style accordéon utilisant plusieurs éléments <details></details>

Pour créer un composant de style accordéon, utilisez l'attribut name pour nommer plusieurs éléments <details></details> et utiliser des valeurs correspondantes (similaire à la façon d'implémenter les boutons radio):

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>

À l'aide d'un emballage, nous pouvons même les transformer en onglets horizontaux:

<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>

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

… ou, utilisez l'API de positionnement d'ancrage 2024 pour créer un onglet vertical (même html):

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;
    }
  }
}

Si vous voulez savoir comment nous utilisons l'API Popover dans CSS, vous pouvez consulter l'article de John Rhea, où il a fait un jeu interactif en utilisant uniquement les éléments <details></details>!

Ajouter la fonctionnalité JavaScript

Vous souhaitez ajouter des fonctionnalités 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);
    }
  }
}

Créer un élément accessible <details></details>

Les éléments sont accessibles tant que certaines règles sont suivies. Par exemple, <details></details> est essentiellement un <summary></summary>, ce qui signifie que lorsqu'il se concentre, le lecteur d'écran annonce son contenu. S'il n'y a pas d'élément enfant direct de <label></label> ou <summary></summary> n'est pas un <summary></summary>, l'agent utilisateur crée une balise pour vous qui est généralement affichée comme "détails" à la fois visuellement et en technologie d'assistance. Les navigateurs plus âgés peuvent insister sur le fait qu'il s'agit du premier élément enfant <details></details>, il est donc préférable de le définir comme premier élément enfant. De plus,

a un rôle de bouton, donc ce qui est invalide dans

est également invalide dans <summary></summary>. Cela inclut le titre, vous pouvez donc style <button></button> comme titre, mais vous ne pouvez pas réellement insérer le titre dans <summary></summary>. <summary></summary> <summary></summary> En raison des limitations de l'espace, tout le contenu restant ne peut pas être traduit. Veuillez fournir d'autres pièces et je ferai de mon mieux pour traduire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!