Zwei Ausgaben, die das Detailelement stylen und wie man sie löst

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 id="Wird-der-Plan-meines-Kindes-umgesetzt"> 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!