Exklusive native Akkordeons in HTML

?Index

1. Einführung
2. Akkordeon in HTML5
3. Exklusives Akkordeon in HTML5
4. Und das kann ich verwenden?
5. Referenzen
6. Schlussfolgerungen

---

1. Einführung

Ich persönlich bin der Meinung, dass HTML die wichtigste Auszeichnungssprache im gesamten Internet ist. Wenn Sie eine Webseite öffnen, versichere ich Ihnen, dass ihre Struktur in HTML geschrieben ist.

Viele mögen annehmen, dass HTML nicht so wichtig ist, aber es ist die Grundlage des gesamten modernen Webs und hat sich aus diesem Grund ständig weiterentwickelt, von neuen APIs, die wir verwenden können, bis hin zu einfacheren, aber wichtigen Funktionen, die wir kennen sollten.

2. Akkordeon in HTML5

Akkordeons in HTML werden unter Verwendung des Details-Tags und verschachtelter Zusammenfassungs-Tags geschrieben, um jedes Akkordeon darzustellen.
Vor dedizierten Akkordeons war es nicht möglich, dass das Verhalten jedes Akkordeons unabhängig war, wenn nur natives HTML verwendet wurde. Dies bedeutet, dass mehrere Akkordeons gleichzeitig geöffnet sein konnten. Schauen wir uns ein Beispiel an:

In diesem Beispiel können wir feststellen, dass die Akkordeons gleichzeitig geöffnet sein können, was das Standardverhalten ist.

3. Exklusives Akkordeon in HTML5

Seit September 2024 ist die Neuheit, dass wir exklusive Akkordeons nativ erstellen können, ohne JavaScript zu verwenden.

Ein einzigartiges Akkordeon ermöglicht, dass nur ein Zusammenfassungstag geöffnet ist, wodurch die Benutzeroberfläche verbessert wird, ohne dass dazu JS-Code geschrieben werden muss.

Um dies zu erreichen, fügen Sie einfach das Namensattribut mit demselben Wert zu jedem Zusammenfassungs-Tag hinzu.
Schauen wir uns ein Beispiel an:

In unserem Beispiel hat jede Zusammenfassung name="learn-css", wodurch das Akkordeon exklusiv sein kann.

4. Und das kann ich verwenden?

Wir können feststellen, dass diese Funktionalität in den folgenden Browserversionen verfügbar ist:

Und durch Rücksprache mit Can I Use haben wir das Gleiche überprüft und festgestellt, dass zum Zeitpunkt der Veröffentlichung dieses Beitrags 89,13 % der Browser abgedeckt waren.

5. Referenzen

• https://developer.chrome.com/docs/css-ui/exclusive-accordion?hl=es-419

6. Schlussfolgerungen

Es ist sehr wichtig, über die neuesten Entwicklungen bei den Tools, die wir am häufigsten verwenden, auf dem Laufenden zu sein. Diese neuen Funktionen können uns mehr als einmal ersparen, indem sie unsere Arbeit erleichtern.

Ich hinterlasse Ihnen einen zusammenfassenden Beitrag auf meinem Twitter-Konto:

---

Andere Beiträge meiner Autorschaft, die Sie interessieren könnten:

Kurzanleitung: Tipps zum Erstellen guter Commit-Nachrichten in Git?

Cristian Fernando ・20. Dezember 2024

#git #github #gitlab #Spanisch

Wie erstelle ich einen SSH-Schlüssel und verbinde ihn mit Github unter Windows? ?

Cristian Fernando ・13. Dezember 2024

#github #git #Spanisch #gitlab

Wie navigiere ich zwischen Commits in Git? ?

Cristian Fernando ・ 29. November 2024

#git #github #Spanisch #Anfänger

Das obige ist der detaillierte Inhalt vonExklusive native Akkordeons in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!