<details>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since ÑнваÑÑ 2020 г..
* Some parts of this feature may have varying levels of support.
HTML-ÑÐ»ÐµÐ¼ÐµÐ½Ñ <details> иÑполÑзÑеÑÑÑ Ð´Ð»Ñ ÑаÑкÑÑÑÐ¸Ñ ÑкÑÑÑой (дополниÑелÑной) инÑоÑмаÑии.
ÐÐ¸Ð´Ð¶ÐµÑ ÑаÑкÑÑÑÐ¸Ñ Ð¾Ð±ÑÑно пÑедÑÑавлен на ÑкÑане Ñ Ð¸ÑполÑзованием неболÑÑого ÑÑеÑголÑника, коÑоÑÑй повоÑаÑиваеÑÑÑ, ÑÑÐ¾Ð±Ñ Ð¿Ð¾ÐºÐ°Ð·Ð°ÑÑ ÑоÑÑоÑние оÑкÑÑÑÐ¸Ñ / закÑÑÑиÑ, Ñ Ð¼ÐµÑкой ÑÑдом Ñ ÑÑеÑголÑником. ÐÑли пеÑвÑй доÑеÑний ÑÐ»ÐµÐ¼ÐµÐ½Ñ ÑлеменÑа <details> ÑвлÑеÑÑÑ <summary>, ÑодеÑжимое ÑлеменÑа <summary> иÑполÑзÑеÑÑÑ Ð² каÑеÑÑве меÑки Ð´Ð»Ñ Ð²Ð¸Ð´Ð¶ÐµÑа ÑаÑкÑÑÑиÑ.
ÐнÑеÑакÑивнÑй пÑимеÑ
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>
details {
border: 1px solid #aaa;
border-radius: 4px;
padding: 0.5em 0.5em 0;
}
summary {
font-weight: bold;
margin: -0.5em -0.5em 0;
padding: 0.5em;
}
details[open] {
padding: 0.5em;
}
details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: 0.5em;
}
| Content categories | Flow content, sectioning root, interactive content, palpable content. |
|---|---|
| Permitted content | One <summary> element followed by flow content. |
| Tag omission | ÐеÑ, оÑкÑÑваÑÑий и закÑÑваÑÑий Ñеги обÑзаÑелÑнÑ. |
| Permitted parents | Any element that accepts flow content. |
| Permitted ARIA roles | None |
| DOM interface | HTMLDetailsElement |
ÐÑÑибÑÑÑ
ÐÐ»ÐµÐ¼ÐµÐ½Ñ Ð¿Ð¾Ð´Ð´ÐµÑÐ¶Ð¸Ð²Ð°ÐµÑ ÑолÑко глобалÑнÑе аÑÑибÑÑÑ.
open-
ÐаннÑй логиÑеÑкий аÑÑибÑÑ ÑказÑваеÑ, бÑÐ´ÐµÑ Ð»Ð¸ дополниÑелÑÐ½Ð°Ñ Ð¸Ð½ÑоÑмаÑÐ¸Ñ Ð¾ÑобÑажаÑÑÑÑ Ð¿Ð¾Ð»ÑзоваÑÐµÐ»Ñ Ð¿Ñи загÑÑзке ÑÑÑаниÑÑ. Ðо ÑмолÑÐ°Ð½Ð¸Ñ ÑÑÑановлено знаÑение false, поÑÑÐ¾Ð¼Ñ Ð´Ð¾Ð¿Ð¾Ð»Ð½Ð¸ÑелÑÐ½Ð°Ñ Ð¸Ð½ÑоÑмаÑÐ¸Ñ Ð±ÑÐ´ÐµÑ ÑкÑÑÑа.
ÐÑимеÑ
<details>
<summary>Some details</summary>
<p>More info about the details.</p>
</details>
<details open>
<summary>Even more details</summary>
<p>Here are even more details about the details.</p>
</details>
Result
ÐÑимеÑание: ÐÑли пÑиведÑннÑй вÑÑе пÑÐ¸Ð¼ÐµÑ Ð½Ðµ ÑабоÑаеÑ, Ñм. Browser compatibility , ÑÑÐ¾Ð±Ñ Ð¾Ð¿ÑеделиÑÑ Ð¿Ð¾Ð´Ð´ÐµÑÐ¶Ð¸Ð²Ð°ÐµÑ Ð»Ð¸ вообÑе Ð²Ð°Ñ Ð±ÑаÑÐ·ÐµÑ ÑÑÑ ÑÑнкÑиÑ.
ÐÑимеÑÑ ÑÑилизаÑии
СледÑÑ Ð±Ð¾Ð»ÐµÐµ новой ÑпеÑиÑикаÑии, Firefox оÑобÑÐ°Ð¶Ð°ÐµÑ ÑÐ»ÐµÐ¼ÐµÐ½Ñ summary как display: list-item и маÑÐºÐµÑ Ð¼Ð¾Ð¶Ð½Ð¾ ÑÑилизоваÑÑ Ñак же, как и ÑлеменÑÑ ÑпиÑка.
СледÑÑ Ð±Ð¾Ð»ÐµÐµ ÑÑаÑой ÑпеÑиÑикаÑии, в Chrome and Safari ÑÑÑеÑÑвÑÐµÑ Ð¿Ð¾Ð»ÑзоваÑелÑÑкий пÑевдо-ÑÐ»ÐµÐ¼ÐµÐ½Ñ ::-webkit-details-marker, Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ ÐºÐ¾ÑоÑого можно ÑÑилизоваÑÑ Ð¼Ð°ÑкеÑ.
ÐÐ»Ñ ÐºÑоÑÑбÑаÑзеÑной ÑÑилизаÑии маÑкеÑа, ÑÑÐ¾Ð±Ñ ÑкÑÑÑÑ Ð´ÐµÑолÑнÑй и добавиÑÑ ÐºÐ°ÑÑомнÑй, необÑ
одимо Ð´Ð»Ñ Firefox ÑÑÑановиÑÑ ÑлеменÑÑ summary {display: block;}, а Ð´Ð»Ñ Chrome и Safari's ÑÑÑановиÑÑ ::-webkit-details-marker {display: none;}. ÐоÑле ÑÑого деÑолÑнÑй маÑÐºÐµÑ Ð±ÑÐ´ÐµÑ ÑкÑÑÑ, поÑле Ñего можно ÑÑÑановиÑÑ Ñвой маÑÐºÐµÑ Ð»ÑбÑм доÑÑÑпнÑм ÑпоÑобом ÑÑилизаÑии. РпÑимеÑе ниже Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ Ð¿ÑевдоÑлеменÑов маÑÐºÐµÑ Ð²Ð¾Ð·Ð²ÑаÑаеÑÑÑ Ð¾Ð±ÑаÑно.
HTML
<details>
<summary>Some details</summary>
<p>More info about the details.</p>
</details>
CSS
summary {
display: block;
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
content: "\25B6";
padding-right: 0.5em;
}
details[open] > summary::before {
content: "\25BC";
}
Result
СпеÑиÑикаÑии
| Specification |
|---|
| HTML # the-details-element |