Attributen
Dit element bevat alleen de globale attributen.
Gebruiksopmerkingen
De inhoud van het <summary>-element kan bestaan uit koptekstinhoud, platte tekst, of HTML die binnen een alinea kan worden gebruikt.
Een <summary>-element mag alleen worden gebruikt als eerste kind van een <details>-element. Wanneer de gebruiker op de samenvatting klikt, wordt het bovenliggende <details>-element geopend of gesloten, en vervolgens wordt een toggle-gebeurtenis naar het <details>-element verzonden, die kan worden gebruikt om u te laten weten wanneer deze statuswijziging plaatsvindt.
De inhoud van de <details> levert de toegankelijke beschrijving voor de <summary>.
Standaard labeltekst
Als het eerste kind van een <details>-element geen <summary>-element is, gebruikt de user agent een standaardtekenreeks (meestal "Details") als label voor het uitvouwvak.
Standaardstijl
Volgens de HTML-specificatie bevat de standaardstijl voor <summary>-elementen display: list-item. Dit maakt het mogelijk om het pictogram dat als uitvouwwidget naast het label wordt weergegeven te wijzigen of te verwijderen ten opzichte van de standaardwaarde, die doorgaans een driehoek is.
U kunt de stijl ook wijzigen naar display: block om de uitvouwdriehoek te verwijderen.
Zie de sectie Browsercompatibiliteit voor details, aangezien nog niet alle browsers de volledige functionaliteit van dit element ondersteunen.
Voor op WebKit gebaseerde browsers, zoals Safari, is het mogelijk om de pictogramweergave te beheren via het niet-standaard CSS-pseudo-element ::-webkit-details-marker. Gebruik summary::-webkit-details-marker { display: none } om de uitvouwdriehoek te verwijderen.
Voorbeelden
Hieronder staan enkele voorbeelden die het gebruik van <summary> laten zien. U kunt meer voorbeelden vinden in de documentatie voor het <details>-element.
Basisvoorbeeld
Een basisvoorbeeld dat het gebruik van <summary> in een <details>-element laat zien:
<details open>
<summary>Overview</summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</ol>
</details>Resultaat
Samenvattingen als koppen
U kunt koptekstelementen in <summary> gebruiken, zoals hier:
<details open>
<summary><h4>Overview</h4></summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</ol>
</details>Resultaat
Dit heeft momenteel enkele opmaakproblemen die met CSS kunnen worden opgelost.
De rol die aan het <summary>-element wordt toegekend, verschilt per browser. Sommige kennen nog steeds standaard de rol button toe, waardoor alle rollen van de onderliggende elementen worden verwijderd. Deze inconsistentie kan problemen veroorzaken voor gebruikers van ondersteunende technologieën zoals schermlezers (<h4> in het voorgaande voorbeeld verliest zijn rol en wordt voor deze gebruikers niet als kop behandeld). U moet uw <summary>-implementatie op meerdere platforms testen om consistente toegankelijkheidsondersteuning te garanderen.
HTML in samenvattingen
Dit voorbeeld voegt wat semantiek toe aan het <summary>-element om aan te geven dat het label belangrijk is:
<details open>
<summary><strong>Overview</strong></summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</ol>
</details>Resultaat
Het pictogram van de samenvatting wijzigen
De markering van het <summary>-element, de uitvouwdriehoek, kan met CSS worden aangepast. De markering kan worden aangesproken met het pseudo-element ::marker, dat de shorthand-eigenschap list-style accepteert, evenals de bijbehorende longhand-eigenschappen, zoals list-style-type. Dit maakt het mogelijk om de driehoek te veranderen in een afbeelding (meestal met list-style-image) of een tekenreeks (inclusief emoji's). In dit voorbeeld vervangen we de inhoud van één uitvouwwidget en verwijderen we het pictogram van een andere door list-style: none in te stellen voordat we via gegenereerde inhoud een aangepast uitvouwpictogram toevoegen.
CSS
In de eerste uitvouwwidget stylen we de ::marker, waarbij we de content wijzigen op basis van het [open]-attribuut van het <details>-element. Voor de tweede widget verwijderen we de markering met list-style-eigenschappen, en voegen we vervolgens gestylede gegenereerde inhoud toe met het pseudo-element ::after. We nemen ook stijlen op voor ::-webkit-details-marker om Safari te targeten. De selector voor het browserspecifieke pseudo-element is opgenomen in een :is()-pseudoklasse, zodat het de selectorlijst niet ongeldig maakt.
details {
font-size: 1rem;
font-family: "Open Sans", "Calibri", sans-serif;
border: solid;
padding: 2px 6px;
margin-bottom: 1em;
}
details:first-of-type summary::marker,
:is(::-webkit-details-marker) {
content: "+ ";
font-family: monospace;
color: red;
font-weight: bold;
}
details[open]:first-of-type summary::marker {
content: "− ";
}
details:last-of-type summary {
list-style: none;
&::after {
content: "+";
color: white;
background-color: darkgreen;
border-radius: 1em;
font-weight: bold;
padding: 0 5px;
margin-inline-start: 5px;
}
[open] &::after {
content: "−";
}
}
details:last-of-type summary::-webkit-details-marker {
display: none;
}De CSS bevat de attribuutselector [open], die alleen overeenkomt wanneer het attribuut open aanwezig is (wanneer de <details> geopend zijn). De pseudoklassen :first-of-type en :last-of-type richten zich op het eerste en de siblingelementen van hetzelfde type. We hebben het voorgevoegde -webkit--pseudo-element opgenomen binnen een :is()-pseudoklasse, aangezien deze een vergevingsgezinde selectorlijst accepteert, zodat als het voorgevoegde pseudo-element ongeldig is in een browser, het hele selectorblok niet ongeldig wordt. We hebben ook CSS-nesting gebruikt. Zie de module CSS-selectors.
HTML
<h1>Quotes from Helen Keller</h1>
<details>
<summary>On women's rights</summary>
<p>
<q>We have prayed, we have coaxed, we have begged, for the vote, with the
hope that men, out of chivalry, would bestow equal rights upon women and
take them into partnership in the affairs of the state. We hoped that
their common sense would triumph over prejudices and stupidity. We thought
their boasted sense of justice would overcome the errors that so often
fetter the human spirit; but we have always gone away empty-handed. We
shall beg no more.</q>
</p>
</details>
<details>
<summary>On optimism</summary>
<p>
<q>Optimism is the faith that leads to achievement; nothing can be done
without hope.</q>
</p>
</details>Resultaat
Technische samenvatting
| Inhoudscategorieën | geen |
|---|---|
| Toegestane inhoud | Frasering-inhoud, optioneel vermengd met Koptekstinhoud |
| Weglaten van tags | Niet toegestaan; zowel de begintag als de eindtag zijn verplicht. |
| Toegestane bovenliggende elementen | Het <details>-element. |
| Impliciete ARIA-rol | Geen bijbehorende rol |
| Toegestane ARIA-rollen | Geen role toegestaan |
| DOM-interface | HTMLElement |