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

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!