Редкие теги в HTML: details, dialog, menu
Привет, Привет, в рамках этого урока мы познакомимся в очень редкими тегами в HTML которые практически невозможно встретить, а именно: details, dialog, menu. Текстовая версия урок в полной версии статьи.
Details
<details> - создает интерактивный элемент при нажатии на который пользователю будет показана дополнительная информация. Обычно используется в паре с тегом <summary>. Этот элемент практически не используется так как является стандартным и тяжел для стилизации через CSS. Обычно если нужен элемент с подобным функционалом его создают из базовых тегов используя HTML + CSS + JavaScript.
<details>
<summary>Описание</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
</details>
Имеет атрибут open при наличии которого браузер сразу будет показывать скрытый контент
<details open>
<summary>Описание</summary>
<p>content</p>
</details>
Как вы могли заметить текст из тега <summary> стал заголовком <details>
Dialog
<dialog> - создает интерактивный элемент при нажатии на который пользователю будет показано всплывающее окно с контентом. Этот элемент практически не используется так как является стандартным и тяжел для стилизации через CSS.
Обычно если нужен элемент с подобным функционалом его создают из базовых тегов используя HTML + CSS + JavaScript.
В данном случае мы ничего не увидим так как по-умолчанию диалог скрыт
<dialog>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consequatur cupiditate eos, excepturi inventore iste libero perferendis quibusdam reiciendis soluta vel veritatis voluptate voluptates! Blanditiis laborum quos repellat vero voluptatem?
</dialog>
Для того, чтобы открыть диалог, нам нужно добавить ему атрибут open
<dialog id="favDialog" open> dialog content </dialog>
Menu
Тег <menu> является семантической заменой тега <ul>, на данный момент тег <menu> является экспериментальной технологией и его лучше не использовать, так как не все браузеры его могут поддерживать.
<menu type="context" id="popup-menu">
<menuitem>Action</menuitem>
<menuitem>Another action</menuitem>
<hr/>
<menuitem>Separated action</menuitem>
</menu>
<menu type="toolbar">
<li>
<button type="menu" menu="file-menu">File</button>
<menu type="context" id="file-menu">
<menuitem label="New..." onclick="newFile()"></menuitem>
<menuitem label="Save..." onclick="saveFile()"></menuitem>
</menu>
</li>
<li>
<button type="menu" menu="edit-menu">Edit</button>
<menu type="context" id="edit-menu">
<menuitem label="Cut..." onclick="cutEdit()"></menuitem>
<menuitem label="Copy..." onclick="copyEdit()"></menuitem>
<menuitem label="Paste..." onclick="pasteEdit()"></menuitem>
</menu>
</li>
</menu>
В спецификации HTML4 <menu> работал по другом, но с выходом стандарта HTML5 логика тега <menu> была изменена, но на данный момент его практически не поддерживают никакие браузеры.
Более подробная информация о данных тегах рассказана в видео