details
The details element represents a disclosure widget from which the user can obtain additional information or controls. 4.11.1. The details element
Links about details
Why <details> is Not an Accordion
tl;dr - <code><summary></code> is a button and buttons eat semantics
Tags:
Details / Summary Are Not [insert control here]
Once major browsers started supporting <details> & <summary> developers immediately started to play with them to see what sorts of patterns they could enhance or replace. This is a good thing. Experimentation pushes boundaries, improves understanding. However, we need to be careful of christening th…
Tags:
The details and summary elements | scottohara.me
The details and summary elements are two of HTML’s interactive elements and together are the elements that create a native disclosure widget.
Tags:
<details>
<summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
<dl>
<dt>Transfer rate:</dt> <dd>452KB/s</dd>
<dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
<dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
<dt>Duration:</dt> <dd>01:16:27</dd>
<dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
<dt>Dimensions:</dt> <dd>320×240</dd>
</dl>
</details>Explore other pages
- grid-template-rows
Specifies named grid areas.
- grid-template-columns
Specifies the track list for the grid’s columns.
- scroll-snap-type
Specifies whether a scroll container is a scroll snap container, how strictly it snaps, and which axes are considered.
- :nth-last-child()
Represents an element that has an+b-1 siblings after it in the document tree.