Что предоставляют элементы `
` и `
`?

Question

Что предоставляют элементы `

` и `

`?

IT Interview Practice · Accepted Answer

`

` и `

` создают **нативный виджет раскрытия** — развёрнутый/свёрнутый раздел — с **нулевым JavaScript**. Браузер обрабатывает переключение, поддержку клавиатуры и доступность за вас. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** — это кликабельная метка (первый дочерний элемент). - Все, что после неё, — это сворачиваемый контент. - Нажатие на сводку переключает открыто/закрыто — нативно доступно с клавиатуры (Enter/Space) и корректно объявляется программами чтения с экрана. ## Открыто по умолчанию и определение состояния ```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 ``` ## Стилизация маркера ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Реальные примеры использования FAQ аккордеоны, разделы "показать больше", сворачиваемые боковые панели, текст спойлера, расширяемые строки таблицы. До этого элемента каждому аккордеону требовался JavaScript плюс проводка ARIA для доступности — теперь это всего два семантических тега. ## Почему это важно `

`/`

` предоставляют вам доступный, дружественный клавиатуре сворачиваемый контент без JS и без ручного ARIA — идеальный пример использования платформы. Используйте его для FAQ и паттернов "показать больше" перед созданием пользовательского аккордеона.

Что предоставляют элементы `<details>` и `<summary>`?

Открыто по умолчанию и определение состояния

Стилизация маркера

Реальные примеры использования

Почему это важно

Похожие вопросы