Die unterschiedlichen (und modernen) Möglichkeiten, den Inhalt umzuschalten

Master Moderne Web -Inhalts -Switching -Fähigkeiten: Auf Wiedersehen display: none!

Wenn Sie die Dinge gut machen möchten, müssen Sie zuerst Ihre Werkzeuge schärfen.

—— Abraham Maslow

Es ist einfach, sich an die Verwendung bekannter Werkzeuge zu gewöhnen. Für die Inhaltsschaltung können Sie verwendet werden, um display: none oder opacity: 0 zu verwenden, ergänzt mit einem JavaScript -Code. Heutzutage ist die Web-Technologie moderner und es ist an der Zeit, einen umfassenden Einblick in verschiedene Inhaltsschaltmethoden zu erhalten: Welche nativen APIs werden unterstützt, was sind ihre Vor- und Nachteile und einige Details, die Sie möglicherweise nicht kennen (wie Pseudo-Elemente und andere undeutliche Inhalte).

Lassen Sie uns die Elemente <details></details> und <summary></summary>, Dialog -API, Popover -API und mehr diskutieren. Wir werden untersuchen, wann jede Methode entsprechend Ihren Anforderungen angewendet werden soll. Modal oder nicht modal? JavaScript oder reines HTML/CSS? Mach dir keine Sorgen, wir werden es einzeln erklären.

<details></details> und <summary></summary> Elemente

Anwendungsszenario: Zusammenfassung des Inhalts in einer leicht zugänglichen Weise, während die Inhaltsdetails unabhängig oder als Komponente im Akkordeonstil geschaltet werden können.

aktualisiert am 12. Dezember 2024: Ein neuer Artikel im Chrome -Blog zeigt einige weitere interessante Möglichkeiten, <details></details> zu verwenden, einschließlich einer Animationsgalerie und einer teilweise geöffneten <details></details> (es gibt eine Option zur Verwendung calc-size für die Animation).

In der Reihenfolge der Veröffentlichung markieren die Elemente <details></details> und <summary></summary> das erste Mal, dass wir den Inhalt wechseln können, ohne JavaScript oder die besonderen Kontrollkästchen -Tricks zu verwenden. Der Mangel an Browserunterstützung wird jedoch offensichtlich die Popularität neuer Funktionen behindern, insbesondere in dieser Funktion fehlt zunächst die Tastatur -Zugänglichkeit. Wenn Sie es seit der Veröffentlichung von Chrome 12 im Jahr 2011 nicht mehr verwendet haben, kann ich verstehen. Nicht verärgert sehen oder sich verärgert fühlen, oder?

Folgendes sind die Schlüsselpunkte:

• Es funktioniert einwandfrei ohne JavaScript (ohne Kompromisse).
• Vollstileinstellung ohne appearance: none usw.
• Sie können die Markierungen verbergen, ohne nicht standardmäßige Pseudo-Selektror zu verwenden.
• Sie können mehrere <details></details> Elemente anschließen, um eine Komponente im Akkordeonstil zu erstellen.
• und ... es kann ab 2024 vollständig Animation sein.

<details></details> Tags von Elementen

Was Sie brauchen, ist:

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

Im Hintergrund ist der Inhalt in ein Pseudoelement eingewickelt, und ab 2024 können wir ihn mit ::details-content auswählen. Darüber hinaus gibt es ein ::marker pseudoelement, das angibt, ob <details></details> ein- oder ausgeschaltet ist und wir es anpassen können.

In diesem Sinne sieht es im Hintergrund tatsächlich so aus: <details></details>

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

Um <details></details> standardmäßig einzuschalten, fügen Sie das Attribut <details></details> zu open hinzu, das dem entspricht, was im Hintergrund passiert, wenn <details></details> eingeschaltet ist.

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

<details></details> Stileinstellungen von Elementen

Um ehrlich zu sein: Möglicherweise möchten Sie nur diese nervige Marke entfernen. Sie können dies tun, indem Sie die <summary></summary> display Eigenschaft auf einen anderen Wert als list-item:

einstellen

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

Oder Sie können die Marke ändern. In der Tat verwendet das folgende Beispiel die Schriftart Awesome, um es durch ein anderes Symbol zu ersetzen. Denken Sie jedoch daran, dass ::marker viele Eigenschaften nicht unterstützt. Die flexibelste Lösung besteht darin, den Inhalt von <summary></summary> mit einem Element zu wickeln und in CSS auszuwählen.

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

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

Erstellen Sie Komponenten im Akkordeon-Stil mit mehreren <details></details> Elementen

Um eine Komponente im Akkordeon-Stil zu erstellen, verwenden Sie das Attribut name, um mehrere <details></details> Elemente zu benennen und übereinstimmende Werte (ähnlich wie die Umsetzung der Optionspunkte):

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>

Mit einem Wrapper können wir sie sogar in horizontale Registerkarten verwandeln:

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

… oder verwenden Sie die 2024 -Ankerpositionierungs -API, um eine vertikale Registerkarte zu erstellen (gleiche 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;
    }
  }
}

Wenn Sie wissen möchten, wie wir die Popover -API in CSS verwenden, können Sie sich John Rheas Artikel ansehen, in dem er ein interaktives Spiel mit nur den <details></details> Elementen erstellt hat!

add JavaScript -Funktionalität

Möchten Sie einige JavaScript -Funktionen hinzufügen?

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

erstellen zugänglich <details></details> Element

Elemente sind zugänglich, solange einige Regeln eingehalten werden. Zum Beispiel ist <details></details> im Grunde genommen ein <summary></summary>, was bedeutet, dass der Bildschirmleser seinen Inhalt kündigt. Wenn kein direktes untergeordnetes Element von <label></label> oder <summary></summary> kein <summary></summary> ist, erstellt der Benutzeragent ein Tag für Sie, das normalerweise sowohl visuell als auch in der assistiven Technologie als "Details" angezeigt wird. Ältere Browser können darauf bestehen, dass es das erste <details></details> -Stichelement ist, daher ist es besser, es als das erste untergeordnete Element zu setzen. hat außerdem

eine Taste -Rolle, also ist das, was in

ungültig ist, auch in <summary></summary> ungültig. Dies beinhaltet den Titel, sodass Sie <button></button> als Titel style, aber Sie können den Titel nicht in <summary></summary> einfügen. <summary></summary> <summary></summary> Aufgrund von Platzbeschränkungen können alle verbleibenden Inhalte nicht übersetzt werden. Bitte geben Sie andere Teile an und ich werde mein Bestes geben, um sie zu übersetzen.

Das obige ist der detaillierte Inhalt vonDie unterschiedlichen (und modernen) Möglichkeiten, den Inhalt umzuschalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!