Mitä details- ja summary-elementit tarjoavat?

Question

Accepted Answer

`

` ja `

` luovat **natiivisen disclosure-widget-komponentin** — laajennettavan/supistettavan osion — **ilman JavaScriptiä**. Selain hoitaa kytkinnän, näppäimistötuen ja saavutettavuuden puolestasi. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** on napsautettava merkintä (ensimmäinen lapsi). - Kaikki sen jälkeen on supistettava sisältö. - Summary-napsautus vaihtaa avoimen/suljetun tilan — natiivisti näppäimistöstä käytettävä (Enter/Space) ja ruudunlukija ilmoittaa siitä oikein. ## Avoin oletuksena ja tilan havaitseminen ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## Merkkimen tyylittely ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Todelliset käyttötapaukset UKK-sovittimet, "näytä lisää" -osiot, supistettavat sivupalkit, spoiler-teksti, laajennettavat taulukon rivit. Ennen tätä elementtiä jokainen sovitin vaati JavaScriptiä sekä ARIA-johdotusta saavutettavuuden kannalta — nyt se on vain kaksi semanttista tunnistetta. ## Miksi se on tärkeää `

`/`

` antaa sinulle saavutettavaa, näppäimistöystävällistä supistettavaa sisältöä ilman JS:ää ja ilman manuaalista ARIA:a — täydellinen esimerkki alustan käytöstä. Käytä sitä UKK:ille ja "näytä lisää" -malleille ennen kuin rakennat mukautetun sovittimen.