Natives HTML: Accordion Revisited

Vor sechs Jahren habe ich die heimischen

und Elemente, um barrierefreie Akkordeons zu erstellen. Seitdem hat sich die Webplattform weiterentwickelt und aufregende neue Funktionen wie exklusives Öffnungsverhalten und flüssige Animationen für diese Elemente eingeführt.

Natives HTML: Akkordeon

Andrew Bone ・ 4. Januar 2019

#html #css #a11y #Design

In diesem Artikel gehen wir noch einmal auf

und nutzen Sie die modernen CSS-Eigenschaften optimal, um Ihren Akkordeons den letzten Schliff zu verleihen. Ich werde auch eine Demo-Implementierung teilen, die diese Funktionen demonstriert.

Die Grundlagen:

und

Die

-Element bietet eine native Möglichkeit, umschaltbare Abschnitte in HTML zu erstellen, mit dem

Element, das als anklickbare Beschriftung fungiert. Dies macht es einfach, Offenlegungs-Widgets mit minimalem Aufwand zu erstellen.

Hier ist ein einfaches Beispiel:

<details>
  <summary>Read more</summary>
  Some text to be hidden. 
</details>

Durch Klicken auf die Zusammenfassung wird die Sichtbarkeit des zugehörigen Inhalts umgeschaltet. Kein JavaScript erforderlich!

Verbesserungen: Exklusives offenes Verhalten

Um das traditionelle Akkordeonverhalten nachzuahmen, bei dem jeweils nur ein Abschnitt geöffnet ist, können Sie das Namensattribut in Ihrem

verwenden. Elemente. Wenn

Elemente haben denselben Namen, das Öffnen eines Elements schließt automatisch die anderen in der Gruppe.

<details name="exclusive">
  <summary>Section 1</summary>
  <p>Content for section 1.</p>
</details>
<details name="exclusive">
  <summary>Section 2</summary>
  <p>Content for section 2.</p>
</details>

Dieses Verhalten ist nativ und funktioniert nahtlos in modernen Browsern!

Glatte Animationen mit CSS hinzufügen

Um die Öffnungs- und Schließübergänge reibungsloser zu gestalten, können wir moderne CSS-Eigenschaften wie interpolate-size und transit-behavior verwenden.

Schlüsseleigenschaften

• interpolate-size: Ermöglicht die Animation zwischen intrinsischen Größen (wie automatisch) und festen Größen. Diese Eigenschaft wird derzeit nur in Chrome unterstützt.
• Übergangsverhalten: Bei der Einstellung „allow-discrete“ warten Eigenschaften, die normalerweise nicht animiert werden können, wie Sichtbarkeit und Anzeige, anstatt sofort aktualisiert zu werden.

Beispiel-Styling

Hier ist ein vollständiges Beispiel des in der Demo verwendeten CSS:

details {
  interpolate-size: allow-keywords;
  overflow: clip;
  margin-top: 0.125em;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
  border-radius: 3px;
}

details summary {
  display: block;
  cursor: pointer;
  position: relative;
  padding: 0.5em 0.5em 0.5em 0.7em;
  background: #ededed;
  color: #2b2b2b;
  border-radius: 3px 3px 0 0;
}

details:not([open]) summary:hover,
details:not([open]) summary:focus {
  background: #f6f6f6;
  color: #454545;
}

details[open] summary {
  outline: 1px solid #003eff;
  background: #007fff;
  color: #ffffff;
}

details[open]::details-content {
  height: auto;
}

details::details-content {
  height: 0;
  overflow-y: clip;
  transition: content-visibility 475ms allow-discrete, height 475ms;
}

details main {
  padding: 1em 2.2em;
}

Wie es funktioniert

1. Höhenanimation: Die Eigenschaft interpolate-size ermöglicht sanfte Übergänge zwischen height: 0 (geschlossen) und height: auto (offen). Dies wird derzeit jedoch nur in Chrome unterstützt.
2. Sichtbarkeitsübergang: Die Eigenschaft „transition-behavior“ stellt sicher, dass die Sichtbarkeitsänderung nahtlos erscheint.

Die Demo: Alles zusammenbringen

Hier ist die vollständige Implementierung:

Browser-Unterstützung

• interpolate-size: Derzeit nur in Chrome unterstützt.
• Übergangsverhalten: Wird in den meisten modernen Browsern unterstützt.

Bei Browsern ohne Unterstützung fallen die Animationen elegant zurück und das Akkordeon bleibt ohne die sanften Übergänge funktionsfähig.

Abschluss

Die

und Elemente, kombiniert mit modernem CSS, bieten eine leichte und zugängliche Lösung für die Erstellung interaktiver Akkordeons. Diese neuen Erweiterungen machen sie für moderne Webprojekte noch attraktiver. Probieren Sie die Demo aus und verleihen Sie Ihren Akkordeons einen frischen, polierten Look!

Vielen Dank fürs Lesen. Wenn Sie mit mir außerhalb von Dev in Kontakt treten möchten, finden Sie hier meine Twitter-, Bsky- und Linkedin-Nachrichten. Sagen Sie Hallo?

Das obige ist der detaillierte Inhalt vonNatives HTML: Accordion Revisited. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!