Zuvor er das Erstellen von einfachen erweiterbaren Inhaltsbl?cken erfordern, erfordert JavaScript oder komplexe CSS -Problemumgehungen. Das ?ndern der HTML k?nnte auch umst?ndlich werden. Jetzt die<details></details> Und<summary></summary> Elemente (bilden ein "Offenlegungs -Widget") vereinfachen dies erheblich. Wir verwenden sie beispielsweise für FAQs ausführlich bei der Arbeit.

Bew?ltigung der Herausforderungen des gemeinsamen Stylings

W?hrend<details></details> Und<summary></summary> Inh?rent Bereitstellung von Erweiterungs-/Zusammenbruchfunktionen ben?tigen Sie m?glicherweise noch CSS für eine optimale Pr?sentation. Ohne Styling treten zwei wichtige Probleme auf:

Ausgabe 1:<summary></summary> Cursor

Der<summary></summary> Das Element ist zwar interaktiv, standardm??ig zu einem Textauswahlcursor anstelle des erwarteten Zeigers.

Ausgabe 2: verschachtelte Blockelemente in<summary></summary>

Elemente auf Blockebene (wie überschriften) innerhalb der Blockebene<summary></summary> l?sst sie unterhalb des Pfeils erscheinen, nicht inline.

Die CSS -L?sung

Um diese zu beheben, fügen Sie diese Stile zu Ihrem CSS -Reset hinzu:

 Details Zusammenfassung {
  Cursor: Zeiger;
}

Details Zusammenfassung> * {
  Anzeige: Inline;
}

Lassen Sie uns jedes Problem und seine L?sung im Detail untersuchen.

Anpassen der<summary></summary> Cursor

Ein Cursor sollte seine beabsichtigte Interaktion visuell widerspiegeln. Der Standardtext Cursor auf<summary></summary> Elemente, obwohl sie technisch korrekt sind (der Text ist ausgew?hlt), ist jedoch weniger intuitiv als ein Zeiger.

Die L?sung ist einfach:

 Details Zusammenfassung {
  Cursor: Zeiger;
}

Viele prominente Websites, darunter MDN -Web -Dokumente und GitHub, verwenden diesen Stil bereits für ihre Offenlegungspflege. Der Standard cursor: text spiegelt wahrscheinlich die Auswahlbarkeit des zusammenfassenden Textes wider, aber ein Zeiger ist im Allgemeinen für interaktive Elemente vorzuziehen. Beachten Sie, dass das ?ndern des Cursors nur das visuelle Erscheinungsbild beeinflusst. Die Auswahl bleibt unver?ndert.

Verschachtelt<summary></summary> Inhaltsinline

Für FAQs wickle ich oft Fragen in überschriften ein (z. B., z.<h3></h3> ) innerhalb<summary></summary> :

<details><summary><h3> Wird der 504 -Plan meines Kindes umgesetzt?</h3></summary><p> Ja. ?hnlich wie im Frühjahr erreichen Fallmanager die Schüler.</p></details>

Dies bietet mehrere Vorteile:

• Konsistentes Styling: Beh?lt die visuelle Konsistenz mit anderen überschriften bei.
• IE/EdgeHTML -Kompatibilit?t: Bietet Fallback für ?ltere Browser, die nicht unterstützen<details></details> .
• Barrierefreiheit: AIDS Assistive Technology Navigation (obwohl die Interpretation durch Bildschirmleser variieren kann, wie unten erl?utert).

überschriften gegen Kn?pfe

Der<summary></summary> Element verh?lt sich wie eine Taste (es hat implizit role=button ), aber im Gegensatz zu Schaltfl?chen erm?glicht es verschachtelte überschriften. Dies schafft einen Konflikt:

• überschriften helfen Navigation.
• Tasten streifen normalerweise die Semantik aus verschachtelten Elementen.

Die Kompatibilit?t des Bildschirmlesers ist hier inkonsistent. NVDA und Voice -Over erkennen überschriften im Inneren<summary></summary> , aber Jaws nicht. Daher beim Styling von überschriften innerhalb<summary></summary> ist m?glich, ihre semantische Interpretation ist nicht garantiert.

Inline -Styling

Um zu verhindern, dass der Pfeil über der überschrift erscheint, verwenden Sie das Inline -Styling für direkt innerhalb<summary></summary> :

 Details Zusammenfassung> * {
  Anzeige: Inline;
}

Verwenden Sie inline , nicht inline-block , um ein Verpackungsprobleme zu vermeiden. W?hrend der verlockenden Verwendung display: flex on<summary></summary> Dies versteckt den Pfeil.

Bonus: ohne Internet -Explorer -Stile

Da IE und ?ltere Edgeversionen nicht unterstützen<details></details> Vermeiden Sie es, benutzerdefinierte Stile mithilfe einer Feature -Abfrage auf sie anzuwenden:

 @Supports nicht (-ms-imen-align: auto) {
  Details Zusammenfassung {
    Cursor: Zeiger;
  }
  Details Zusammenfassung> * {
    Anzeige: Inline;
  }
  /* Andere<details> /<summary> Stile */
}</summary></details>

IE ignoriert diesen Block vollst?ndig. EdgeHtml ignoriert es auch aufgrund der -ms-ime-align Prüfung. Beachten Sie, dass sehr alte Chrome- und Safari -Versionen (mit vernachl?ssigbarem Marktanteil) auch Feature -Abfrageunterstützung fehlen. Ein @supports (details) -Block w?re ideal, hat aber noch weniger Browserunterstützung.

Abschluss

Mit der richtigen HTML -Struktur und diesen CSS -Stilen k?nnen Sie Ihre Offenlegungswidgets problemlos anpassen. Denken Sie daran, dass w?hrend des Stylings<summary></summary> Die Elemente sind unkompliziert, und die Kompatibilit?t für verschachtelte überschriften für Bildschirmleser erfordert eine überlegung.

Das obige ist der detaillierte Inhalt vonZwei Ausgaben, die das Detailelement stylen und wie man sie l?st. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!