Details html: : The Details disclosure element — HTML: HyperText Markup Language

Leave a Comment / Html / By /

Содержание

Элементы details и summary — Веб-стандарты

Вам часто приходилось использовать JavaScript для создания виджета, показывающего и скрывающего какое-то содержимое? Возможно, для этого вы даже скачивали целую JavaScript-библиотеку? Что ж, можете радоваться: HTML5 позволяет создавать подобное всего лишь парой строчек кода, без применения JavaScript. Зависит от браузера, конечно, но мы вернёмся к этому позже. Представляем вам элемент <details>.

Вот что о нём написано в спецификации:

Элемент <details> представляет собой раскрывающийся виджет, показывающий пользователю дополнительную информацию или элементы управления.

Спецификация WHATWG HTML5.

Мы можем использовать <details> для создания «виджетов-аккордеонов», которые пользователь может разворачивать и сворачивать. Внутри этого элемента можно разместить любое содержимое.

Поддержка браузерамиСкопировать ссылку

Прежде чем мы продолжим, вам нужно учесть, что сейчас только Chrome поддерживает элемент <details>. Скоро к нему присоединится и Opera, но немного костылей нам все-таки понадобится. Что ж, запускайте Chrome, и давайте смотреть.

Использование

<details>Скопировать ссылку

Имеются два элемента: <details> и необязательный <summary>. Элемент <details> — это обёртка для содержимого, которое мы хотим показать и скрыть, а <summary> содержит описание и заголовок этой группы. Формально <summary> нам не нужен. В его отсутствие браузер подставит текст по умолчанию, например «details» в Chrome. Давайте взглянем на код:

<details>
    <summary>Покажи-скрой меня</summary>
    <p>Бурное развитие внутреннего туризма привело Томаса Кука.</p>
</details>

Вы можете посмотреть это в действии на jsbin. Даже этот простой пример прекрасно демонстрирует эффект переключения. Без JavaScript!

Атрибут

openСкопировать ссылку

В вышеприведенном примере содержимое скрыто при загрузке страницы. Мы можем сделать его видимым по умолчанию, добавив одиночный атрибут

open для <details>, пример на jsbin:

<details open>
    <summary>Покажи-скрой меня</summary>
    <p>Бурное развитие внутреннего туризма привело Томаса Кука.</p>
</details>

Атрибута closed не существует. Поэтому, опуская open, вы по умолчанию подразумеваете closed.

Элемент

<summary>Скопировать ссылку

Мы бегло взглянули на <summary> в действии, теперь остановимся на нём подробнее. Внутри <summary> могут использоваться строчные элементы, такие как <span> или <strong>. Для чего это может быть нужно? Например, для дополнительного оформления или, как предлагает спецификация, использования <label> для элемента формы. По крайней мере, было бы удобно, если бы подобная конструкция работала корректно:

<details>
    <summary><label for="name">Имя:</label></summary>
    <input type="text" name="name" />
</details>

Теоретически, нажатие на <summary> должно раскрывать содержимое элемента <details>. Но в этом примере содержимое не будет развернуто, потому что вы, фактически, взаимодействуете с <label>, который переводит фокус на соответствующий <input> — даже если он скрыт с помощью <details>.

Честно говоря, этот момент еще требует прояснения. А что по вашему мнению должно происходить? Возможно, у разработчиков браузеров, читающих эту статью, есть какие-то идеи? 🙂

Вложенность

<details>Скопировать ссылку

Вы можете помещать <details> друг в друга, если хотите, как это сделано в следующем, вполне валидном примере:

<details>
    <summary>Вопрос 1</summary>
    <p>Население превышает широкий кристаллический фундамент.</p>
    <details>
        <summary>Приложенные документы</summary>
        <ul>
            <li><a href="#">Болгары очень дружелюбны;</a></li>
            <li>Скумбрия неумеренно перевозит вулканизм;</li>
            <li>Дождливая погода, куда входят Пик-Дистрикт;</li>
            <li>Белый саксаул дегустирует живописный утконос;</li>
        </ul>
    </details>
</details>

Примеры использованияСкопировать ссылку

Так в каких же случаях вы можете использовать <details>? Первое, что приходит в голову — FAQ. Разработчики часто используют для них «аккордеоны», поэтому <details> замечательно подходит.

Также не забывайте о навигации по странице. Это может быть закрепленный блок, передвигающаяся одновременно с прокруткой. Возможно, что-то вроде этого?

Вы можете использовать <details> для сворачивания и разворачивания блока комментариев в блоге, для профиля пользователя, для описания загружаемого файла, для сложных форм или в веб-приложениях, как показано в этом примере из спецификации:

Пример использования <details> из спецификации.

На самом деле, даже глядя сейчас на админку WordPress, я вижу множество возможностей использования <details>. Если у вас есть ещё какие-то идеи и предложения — расскажите о них в комментариях.

ОформлениеСкопировать ссылку

Как же нам оформить эту штуку? Для элемента, раскрывающего содержимое, в WebKit вы можете использовать псевдоэлемент ::-webkit-details-marker. Небольшой пример:

details summary::-webkit-details-marker {
    background: red;
    color: #fff;
    font-size: 500%;
}

Мы также можем позиционировать этот элемент по отношению к родителю. Здесь, например, он прижат к правому краю. В общем-то, и все.

А как же заменить раскрывающий элемент своей иконкой? Используя выборку по атрибуту, вы можете определить, когда <details> раскрыт, а когда закрыт, и применить соответствующее фоновое изображение. Мы делаем примерно то же самое в этом примере, за исключением того, что вместо фонового изображения мы используем псевдоэлемент ::after:

summary::-webkit-details-marker {
    display: none
}
summary::after {
    background: red;
    border-radius: 5px;
    content: "+";
    color: #fff;
    float: left;
    font-size: 1.5em;
    font-weight: bold;
    margin: -5px 10px 0 0;
    padding: 0;
    text-align: center;
    width: 20px;
}
details[open] summary::after {
    content: "-";
}

В этом примере символы + и - используются в качестве раскрывающей ссылки.

В зависимости от дизайна вы можете использовать ::before вместо ::after, но, в любом случае, оба псевдоэлемента позволяют использование изображения.

Выборка по атрибуту details[open] скрывает в себе некоторые интересные возможности. Как хорошие HTML5-доктора, мы создали доработанный пример, показанный на этом скриншоте:

Оформленный <details> в Chrome.

Было бы интересно (хотя это и не всегда уместно), если бы мы могли использовать CSS-трансформации для анимации разворачивания и сворачивания <details>, но пока это невозможно.

ДоступностьСкопировать ссылку

К сожалению, на момент написания статьи отсутствует возможность управления <details> с помощью клавиатуры. Стив Фолкнер пишет:

Проблема в том, что на данный момент отсутствует поддержки клавиатуры и нет никакой информации для обеспечения доступности.

Попробуйте сами. Если вы раскроете элемент <details> с помощью мыши, тогда вы сможете использовать клавиатуру для навигации по вложенным элементам, но вы также должны иметь возможность открывать и закрывать <details> с клавиатуры. Что ж, неидеально, но я уверен, что разработчики Chrome скоро с этим разберутся. Правда, ребята?

Обратная совместимостьСкопировать ссылку

Прежде чем кто-то начнет восклицать, что это не работает в IE6, хочу сказать: мы знаем. Тем не менее, благодаря некоторым умным людям, мы можем обеспечить изящную обратную совместимость. В этой очень полезной коллекции всевозможных кроссбраузерных костылей я нашел два решения, оба они требуют jQuery:

  • Обратная совместимость для <details> с помощью jQuery от Матиаса Байненса;
  • Еще одна альтернатива <details>, также основанная на jQuery от Мануэля Бье.

Многие из вас захотят использовать Modernizr для определения возможностей браузера, но на данный момент в Modernizr отсутствует проверка поддержки <details>. Матиас, автор приведенного выше решения для обратной совместимости, предлагает использовать этот Modernizr-сниппет.

Зачем вообще это использовать?Скопировать ссылку

Конечно, дарёному коню в зубы не смотрят, но все-таки — почему этот виджет существует в HTML5? Что ж, как и в случае с другими возможностями HTML5, он просто делает нашу жизнь легче. Реализация таких элементов, как календарь, слайдер, прогресс-бар, а теперь ещё и «аккордеон», становится гораздо проще и не требует использования JavaScript. Кто знает, что будет следующим? Нативные табы? Было бы здорово 🙂

В заключениеСкопировать ссылку

В этой статье мы продемонстрировали, как использовать элементы <details> и <summary>. Элемент <details> при помощи <summary> создаёт естественный для браузера интерактивный раскрывающийся виджет.

На текущий момент <details> работает только в Chrome, но, надеюсь, эта ситуация в скором времени изменится. Пока что мы можем использовать в CSS только ::-webkit-details-marker, но есть и множество других CSS-техник. Если у вас есть какой-либо опыт или идеи для использования элемента <details>, расскажите об этом в комментариях.

CSS3 | Стилизация элемента details

Последнее обновление: 14. 07.2021

Рассмотрим некоторые возможности по стилизации элемента details, который представляет раскрываемый блок.

Атрибут open

Прежде всего в раскрытом состоянии к элементу details добавляется атрибут open. Соответственно, используя атрибут, можно задать разные стили для элемента в скрытом и раскрытом состоянии. Например:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>METANIT.COM</title>
	<style>
	details > summary {
		padding: 5px;
		background-color: #eee;
		color: #333;
		border: 1px #ccc solid;
		cursor: pointer;
	}

	details > div {
		border: 1px #ccc solid;
		padding: 10px;
	}
	details[open] > summary {
		color:#eee; 
		background-color:#333;
	}
</style>
</head>
<body>
<details>
	<summary>Князь Андрей и Пьер в Богучарово</summary>
	<div>Вокруг дома был рассажен молодой сад.
  Ограды и ворота были прочные и новые; под навесом 
	стояли две пожарные трубы и бочка, выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. 
	На всем лежал отпечаток аккуратности и хозяйственности.</div>
</details>
</body>
</html>

С помощью селектора details[open] мы можем обратиться к элементу details в раскрытом состоянии. Соответственно селектор


details[open] > summary {
	color:#eee; 
	background-color:#333;
}

Позволяет задать стили для элемента summary в раскрытом состоянии. То есть в данном случае при раскрытии элемента details мы переключаем цвет стиля и фона заголовка.

Настройка маркера

По умолчанию элемент summary в качестве маркера скрытости/раскрытости использует символ треугольника. Но его также можно настроить.

Для настройки изображения маркера можно использовать свойство list-style, а также дополнительные свойства типа list-style-type или list-style-image, которые применяются для стилизации списков. Например, если необходимо убрать этот маркер, то можно применить стиль

list-style: none:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>METANIT.COM</title>
	<style>

	details > summary {
		padding: 5px;
		background-color: #eee;
		color: #333;
		border: 1px #ccc solid;
		cursor: pointer;
		list-style: none;
	}

	details > div {
		border: 1px #ccc solid;
		padding: 10px;
	}

details[open] > summary {
	color:#eee; 
   background-color:#333;
}
</style>
</head>
<body>
<details>
	<summary>Князь Андрей и Пьер в Богучарово</summary>
	<div>Вокруг дома был рассажен молодой сад. Ограды и ворота были прочные и новые; под навесом стояли две пожарные трубы и бочка, 
	выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами.
 
  На всем лежал отпечаток аккуратности и хозяйственности.</div>
</details>
</body>
</html>

Другой пример — примение стиля list-style-type: disc;:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>METANIT.COM</title>
	<style>

	details > summary {
		padding: 5px;
		background-color: #eee;
		color: #333;
		border: 1px #ccc solid;
		cursor: pointer;
		
		list-style-type: disc;	/* задаем маркер*/
	}

	details > div {
		border: 1px #ccc solid;
		padding: 10px;
	}

details[open] > summary {
	color:#eee; 
   background-color:#333;
}
</style>
</head>
<body>
<details>
	<summary>Князь Андрей и Пьер в Богучарово</summary>
	<div>Вокруг дома был рассажен молодой сад.
  Ограды и ворота были прочные и новые; под навесом стояли две пожарные трубы и бочка, 
	выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. На всем лежал отпечаток аккуратности и хозяйственности.</div>
</details>
</body>
</html>
Настройка с помощью свойства content

Но естественно свойством list-style мы не ограничены и по своему усмотрению можем более тонко управлять заголовком, например, с помощью свойства content:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>METANIT.COM</title>
	<style>

	details > summary {
		padding: 5px;
		background-color: #eee;
		color: #333;
		border: 1px #ccc solid;
		cursor: pointer;
		list-style: none;
	}

	details > div {
		border: 1px #ccc solid;
		padding: 10px;
	}

details[open] > summary {
	color:#eee; 
   background-color:#333;
}
summary:before {
   content: "+";
   font-size: 20px;
   font-weight: bold;
   margin: -5px 5px 0 0;
}

details[open] summary:before {
   content: "-";
}
</style>
</head>
<body>
<details>
	<summary>Князь Андрей и Пьер в Богучарово</summary>
	<div>Вокруг дома был рассажен молодой сад.
 
  Ограды и ворота были прочные и новые; под навесом стояли две пожарные трубы и бочка, 
	выкрашенная зеленою краской; дороги были прямые, мосты были крепкие с перилами. На всем лежал отпечаток аккуратности и хозяйственности.</div>
</details>
</body>
</html>

В данном случае с помощью селектора summary:before устанавливаем содержимое, которое будет располагаться перед основным содержимым элемента summary. Селектор details[open] summary:before позволяет сделать то же самое, только в раскрытом виде. В итоге в скрытом виде маркер будет отображать символ +, а в раскрытом — символ -.

НазадСодержаниеВперед

Детали HTML Тег

❮ Назад Полный справочник HTML Далее ❯


Пример

Укажите сведения, которые пользователь может открывать и закрывать по требованию: тематический парк Walt Disney World Resort с захватывающими аттракционами, международные павильоны, отмеченные наградами фейерверки и сезонные специальные события.


Попробуйте сами »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Тег

указывает дополнительные сведения, которые пользователь может открываются и закрываются по требованию.

Тег

часто используется для создания интерактивного виджета, который может открывать и закрывать. По умолчанию виджет закрыт. В открытом состоянии он расширяется и отображает содержимое внутри.

Любой контент может быть помещен внутрь

9тег 0023.

Совет: Тег

используется в в сочетании с <детали> по указать видимый заголовок для деталей.

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.

Элемент
<детали> 12,0 79,0 49,0 6,0 15,0

Атрибуты

Атрибут Значение Описание
открытый открыть Указывает, что сведения должны быть видны (открыты) пользователю.

Глобальные атрибуты

Тег

также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML.

Дополнительные примеры

Пример

Используйте CSS для оформления

и :




  Epcot Center
 

Epcot — тематический парк Walt Disney Всемирный курорт с захватывающими аттракционами, международными павильонами, отмеченные наградами фейерверки и специальные сезонные мероприятия.


9Связанные страницы следующие значения по умолчанию:

подробности {
  display: block;
}

❮ Предыдущий Полный справочник HTML Следующий ❯


НАБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |

3
3
3
3 | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Тег HTML dfn

❮ Назад Полный справочник HTML Далее ❯


Пример

Разметьте термин с помощью :

HTML – это стандартный язык разметки для создания веб-страниц.

Попробуйте сами »

Дополнительные примеры "Попробуйте сами" ниже.

Определение и использование

Тег означает «элемент определения», и он указывает термин, который будет определен в Контент.

Ближайший родительский тег также должен содержать определение/объяснение термина.

Термин внутри тега может быть любым из следующих:

1. Так же, как содержимое < dfn> элемент:

Пример

HTML — стандартный язык разметки для создания веб-страниц.

Попробуйте сами »

2. Или, с добавленным атрибутом title:

Пример

HTML — стандартный язык разметки для создания веб-страниц.

Попробуйте сами »

3. Или, с тегом внутри < dfn> элемент:

Пример

HTML — стандартный язык разметки для создания веб-страниц .

Попробуйте сами »

4. Или с добавленным атрибутом id. Затем всякий раз, когда термин используется, он может ссылаться на определение с тегом :

Пример

HTML – это стандартный язык разметки для создания веб-страниц.

Это какой-то текст...


Это какой-то текст...


Изучите HTML сейчас.

Попробуйте сами »

Поддержка браузера

Элемент
Да Да Да Да Да

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Учебник HTML: HTML цитата Элементы

Ссылка HTML DOM: DFN Object

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

Пример

dfn {
  стиль шрифта: курсив;
}

Попробуйте сами »

❮ Предыдущий Полный справочник HTML Следующий ❯


НАБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *