summary в HTML


Содержание

Тег HTML заголовок блока с дополнительной информацией

Тег содержит видимый текст блока с дополнительной информацией .

Клик по содержимому HTML тега открывает весь контент, содержащийся в родительском теге .

Если тег не указан, как заголовок блока details будет использовано зарезервированное слово, например, «Подробнее» в Google Chrome, «Подробности» в Mozilla Firefox.

Тег должен быть первым дочерним элементом для .

Этот тег был введен в HTML5.

Синтаксис

Отображение в браузере

YouTube — популярный видеохостинг.

Ежедневно видео, загруженные на YouTube, просматриваются более 4 млрд раз (по данным на 2012 год).

Пример использования в HTML коде

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

Тег
Да Нет Да Да Да

Атрибуты тега

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

Элементы details и summary в HTML и CSS

Здесь ознакомимся с элементами details и summary, которые отлично подходят для функций скрытие и разворачивание информацию на сайте. Возможно ранее вы использовали JavaScript, который нужен был обязательно для функциональности. Где основном применяли для скрытия содержимого, что по клику можно было открыть. Но при HTML5 все кардинально изменилось, что позволило создавать аналогичные вещи с такими же функциями, но уже без применения JavaScript.

Здесь сразу нужно подчеркнуть, что только работает и корректно выводит на обновленном браузере. Если говорить про элемент details, то он позволит вам показывать скрытую или дополнительную информацию, как раскрывающейся функция. Также его можно использовать в создание элементов, которые изначально разворачивались и сворачиваются, что ниже вам предоставлен один их материалов созданный на этих свойствах.

Так, когда вы могли бы использовать details. Часто задаваемые вопросы часто возникают. Мы часто используем аккордеоны для часто задаваемых вопросов, так что они отличный кандидат details. Также рассмотрите оглавление. Это может быть фиксированная область, которая прокручивается с содержимым.

Так будет смотрится при открытие окна:

Приступаем к установке:

С точки зрения бизнеса и маркетинга компании, которые, как правило, имеют тенденцию получать на 55 процентов больше трафика, чем предприятия, которые этого не делают. Фактически, «активные» блоги могут помочь генерировать на 67% больше потенциальных клиентов.

Шаблоны для сайта ВЫБРАТЬ

Когда кто-то говорит об охвате, это буквально то, на что это похоже — он работает с блогерами, чтобы задействовать их естественную «привлекательность» в качестве влиятельных лиц.

Дизайн для сайта ВЫБРАТЬ

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

div <
width:395px;
margin:0 auto;
top:63%;
transform:translateY(-50%);
color:#403d3d;
border:1px solid silver>

summary <
padding: 19.7px;
width: 395px;
font-size: 18px;
z-index: 1;
border-bottom: 1px solid #807676;
cursor: pointer;
>

p <
width:435px;
margin:-1px -18px 0;
padding:28px;
font-size:14px;
line-height:1.5;
border:1px solid silver;
text-align:justify;
z-index:2;
box-shadow:0 0 28px -11px #171616;
>

details[open] p <
animation:det .3s>

@keyframes det <
0% <
opacity:0>

button <
float:right;
background:#096190;
border:0;
padding:11px;
margin:-6px -6px 0 0;
color:#f5f0f0;
border-radius:4px;
cursor:pointer;
>

Здесь кратко узнали, как можно задействовать details и summary элементы под функционал. Где details будет являться новым элементом для создания интерактивного виджета раскрытия изначально в браузере. По сути у него один конкретный трюк CSS, который мы можем задействовать, но также есть много других CSS эффектов для его стилизации.

Давайте рассмотрим еще один вариант, который более всем знакомый, это функция аккордеон, где аналогично помещают описание или информацию, для того, чтоб можно было ею воспользоваться. А точнее открыть и с последствием закрыть.

Делается это для того, но безусловно имеет свой дизайн, что на Demo странице можете посмотреть. Но главным фактором считаю, это место, так как будет занимать немного, если сравнивать, что все что хранится разместить на странице.

Так будет выглядеть:

Второе описание №2

Третье краткое описание №3

Четвертое описание №4

details <
border: 1px solid #E1E1E1;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
color: #363636;
margin: 0 0 .4em;
padding: 1%;
>

details[open] <
background: #E1E1E1;
>

summary <
background: -webkit-linear-gradient(top, #FAFAFA 50%, #E1E1E1 50%);
border-radius: 5px;
cursor: pointer;
font-size: .8em;
font-weight: bold;
margin: -1%;
padding: 8px 0;
position: relative;
width: 102%;
>

summary:hover, details[open] summary <
background: #E1E1E1;
>

summary::-webkit-details-marker <
display: none>

summary:before <
border-radius: 5px;
content: ‘+’;
color: #363636;
display: block;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -2px 10px 0 10px;
padding: 0;
text-align: center;
width: 20px;
>

details[open] summary:before <
content: ‘-‘;
margin-top: -4px;
>

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

Илон Маск рекомендует:  Диалоги знакомство с элементами управления mfc

в HTML

Тег определяет видимый заголовок для Элемента. Заголовок может быть нажата для просмотра/скрыть подробности.

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

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

Элемент
12.0 Не поддерживается 48.0 6.0 15.0

Различия между HTML 4,01 и HTML5

Тег является новым в HTML5.

Советы и примечания

Примечание: Элемент должен быть первым дочерним элементом элемента .

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

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

Похожие страницы

Параметры CSS по умолчанию

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

Полезный тег «details» в HTML5 для создания спойлера

2020-03-28 / Вр:22:30 / просмотров: 14614

Всем привет!
Еще упустил довольно таки интересный тег «details».
С помощью этого тега вы сможете сделать свёртывание и развертывание содержания (спойлер) без использования дополнительных стилей CSS или скриптов Javascript.
Итак, чтобы создать простейший спойлер, вставьте вот такой HTML код:

Замете, что заголовок «Подробнее» выставляется по умолчанию, если не применить тег для заголовка « summary »:

Если нужно, чтобы какой-то из спойлеров был открыт, допишите к тегу « details » атрибут « open »:

Мой заголовок 1

Содержание спойлера 1

Мой заголовок 2

Содержание спойлера 2

Для красоты можно оформить и CSS стили.
Добавьте вот такой HTML код:

Мой заголовок 1

Содержание спойлера 1

Мой заголовок 2

Содержание спойлера 2

Мой заголовок 3

Содержание спойлера 3

Также, можно заменить значок тега details (треугольник) своим, используя CSS.
Спецсимволы вы можете посмотреть тут.
Итак, добавьте CSS стиль

Я думаю, на этой ноте можно закончить статью.
Удачи!

HTML Tag

The HTML tag specifies a summary/legend that can be used in conjunction with the tag. This summary/legend can be clicked on to expand/collapse the details as required.

Although the tag is not mandatory, it is useful when working with multiple elements, because each can provide an informative legend that distinguishes each element from the others.

Syntax

The tag is written as with the summary/legend inserted between the start and end tags.

The element must be the first child of a tag. The expandable/collapsible content directly follows the tag (but is also contained within the element).

Examples

Basic tag usage

Here, the is used along with the tag to create expandable content.

Default Legend

The is not mandatory when using the tag. If you leave the tag out, the browser should create its own legend (however, this is not ideal if you have multiple elements).

Multiple Elements

You can have multiple elements, all expanding and collapsing their own content. This is where the tag can really come in handy, otherwise you will see a whole bunch of headings that read Details with nothing else to distinguish each one.

Styling the Element

You can use CSS to add styles to the element. Not only that, you can use it to style the element while the element is in its various states (i.e. open and closed ). In other words, you can specify different styles to use on both the and the elements based on whether the user has expanded or collapsed the control.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The element accepts the following attributes.

Element-Specific Attributes


This table shows the attributes that are specific to the tag/element.

Attribute Description
None

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the element, as well as any other HTML5 element.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

The element was not part of HTML 4 and earlier specifications.

The tag was also not introduced as part of the HTML5 specification. It was introduced in the HTML 5.1 specification, as well as the WHATWG HTML Living Standard.

For more detail on the element, see HTML5 Tag. Also check out the links to the official specifications below.

Template

Here’s a template for the tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don’t need.

Note that the element does not actually have any local attributes (i.e. attributes that are specific to the element), but the following global attributes and event handlers are available to the element (and all other HTML elements).

For more information on attributes for this tag, see HTML5 Tag.

Tag Details

For more details about the tag, see HTML5 Tag.

Specifications

Here are the official specifications for the element.

What’s the Difference?

W3C creates «snapshot» specifications that don’t change once defined. So the HTML5 specification won’t change once it becomes an official recommendation. WHATWG on the other hand, develops a «living standard» that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

Плавные спойлеры (HTML5 & CSS3)

Существует несколько основных вариантов создания спойлеров, показывающих или скрывающих контент по требованию пользователя: посредством JavaScript, через псевдокласс с таргетированием идентификаторов и при помощи интерфейсных флажков. Благодаря специальному HTML5-элементу к этому списку добавился еще один, наиболее простой и правильный с точки зрения семантики способ реализовать спойлеры.

Принцип работы тега «details»

Элемент представляет собой одно из многочисленных семантических нововведений HTML5 и предназначается для хранения контента, отображаемого или скрываемого по желанию пользователя. В отличие от традиционных методов разработки спойлера через и псевдокласса :checked или посредством id элемента и псевдокласса :target , для корректной работы элемента не требуется добавление стороннего HTML и CSS кода, что делает его использование простым и удобным.

Содержимое тега становится видимым, когда у него появляется атрибут open , который автоматически добавляется или удаляется браузером при клике по — заголовку спойлера. В свою очередь, заголовок должен стоять первым среди дочерних элементов, но его наличие не является обязательным. В случае отсутствия заголовка браузер установит стандартное название «подробности» из Shadow DOM, однако такой тег не пройдет валидацию. Это аналогично ситуации, когда не имеет

Элемент может содержать после своего заголовка блочный или строчный контент, принадлежащий к категории основной поточной информации (flow content). Содержимое, указанное после , как могло бы показаться, не будет отображаться и скрываться средствами CSS, а именно — переключением значения display . Браузер переносит его в необходимое место за счёт манипуляций с Shadow DOM, что делает возможным применить к контенту эффекты перехода ( transition ). Иными словами, в примере выше при отсутствии у спойлера атрибута open , для элемента

правило display: none не применяется.

Не смотря на кажущуюся практичность и тривиальность, элемент не лишён недостатков: отсутствие полной кроссбраузерной поддержки (речь идет об ограничениях в Internet Explorer, Edge и игнорирование Opera Mini) и непрезентабельное стандартное со (простой маркер перед заголовком , отсутствие анимации), поэтому при создании спойлеров необходимо учесть эти аспекты.

Как создать спойлеры

Прежде чем приступить к разметке кода и написанию CSS, важно обозначить три принципа, которым должно соответствовать красивое оформление спойлера:

  1. Спойлеру необходимо выглядеть визуально интерактивным. Пользователь должен без особого труда понимать, что элемент является кликабельным;
  2. Для визуально привлекательного плавного отображения и скрытия контента к спойлеру следует добавить эффекты перехода;
  3. Открытый спойлер должен каким бы то ни было образом выделяться, чтобы сфокусировать внимание читателя на себе среди прочих неактивных, если на странице расположены несколько спойлеров подряд.

HTML-разметка

Предположим, необходимо создать такую популярную секцию для сайта, как небольшой раздел FAQ, где ответ появлялся бы после клика на сам вопрос. Для этого потребуется следующий незамысловатый HTML:

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

Изменение стандартного маркера

Основную сложность при добавлении CSS может вызвать изменение стиля для маркера, стоящего перед заголовком спойлера. В браузерах на движке WebKit для стилизации маркеров существует специальный псевдоэлемент ::-webkit-details-marker , в то время как Firefox отображает этот элемент как часть списка, то есть с правилом display: list-item , что, соответственно, позволяет удалить маркер простой сменой свойства display или же через псевдоэлемент ::-moz-list-bullet :

Использование display: block в данном случае приведет к нежелательному последствию: кликабельная область содержимого заголовка растянется на 100% ширины родительского элемента, а в идеале она должна соответствовать ширине собственного контента, поэтому в зависимости от необходимости рекомендуется прибегнуть к значениям display , например, inline , inline-block inline-flex , table или оставить заголовок как блочный и установить ширину содержимого как max-content или fit-content , но далеко не все браузеры поддерживают такие значения для width .

Добавление маркера и эффектов перехода

Когда стандартный маркер удалён, к спойлеру может быть добавлено собственное изображение через псеводоэлемент ::before . В готовом примере для этого используется SVG-иконка из коллекции Google Material Icons, которая выводится через background-image в base64, что позволяет избежать лишних подключений к внешним ресурсам.

Особую трудность при стилизации спойлеров представляют эффекты перехода, которые должны срабатывать как при открытии, так и при закрытии контента. Для их реализации следует использовать свойство transition , в основе которого будет лежать изменяющаяся минимальная и максимальная высота спойлера, т. е. самого элемента и прозрачность — для всего контента, стоящего после :

Решение проблем кроссбраузерности

Для обеспечения правильной работы спойлеров в Internet Explorer 10+ и Edge силами одного лишь CSS предлагается совместить и псевдокласс :focus таким образом, чтобы содержимое спойлера появлялось при появлении фокуса на заголовке. Чтобы применить указанный псевдокласс к заголовкам, в HTML-разметке они должны содержать упомянутый ранее атрибут tabindex . Кроме того, браузеры от Microsoft не знают тега и не добавляют к нему атрибут open при клике, поэтому часть CSS придется дублировать. Весь полученный код скрывается от прочих браузеров:

Этот фикс содержит небольшое функциональное ограничение: на странице нельзя будет открыть одновременно несколько спойлеров, т.к. фокус действует только на один элемент. Кроме того, в результате подобной реализации теряется плавный переход при открытии спойлера, но остается работать эффект прозрачности. При необходимости посредством CSS-хака миксин ie_fix() может быть добавлен и для старой Opera 12 (Presto) .

Пример CSS-спойлеров

В результате объединения всего SCSS и добавления соответствующей HTML-разметки получаются простые кроссбраузерные спойлеры без использования JS.

В заключение

Не смотря на преимущество с точки зрения семантики и практичности использования, тег не рекомендуется применять там, где требуется поддержка «древних» Internet Explorer и устаревших мобильных браузеров. В этом случае стоит прибегнуть к традиционным способам создания спойлеров на CSS, работающих практически везде, или использовать решения на JavaScript, в том числе HTML5-полифиллы. Остается надеется, что со временем старые браузеры окончательно уйдут в небытие и уступят место их обновленным версиям, и тогда новые семантические теги станут повсеместной практикой.

HTML summary Tag

Contents

HTML summary: Main Tips

  • The HTML summary element defines a summary, caption or legend for given details.
  • By using tags, you can hide the details and only display the summary. You can then click it to expand/collapse the details as required.
  • The summary tag was introduced in HTML5. However, it is not supported well across all browsers.
  • It supports all global attributes. There are no tag-specific ones.

Using the summary Tag

The HTML5 summary tags are used to surround the summary content for the element:

HTML summary should be the first child of the element. It describes a visible heading for the .

Tip: when a table has a complex structure, many columns or rows of data, HTML summary tags can be useful by providing the gist of it.

Всё в деталях

Доброго времени суток!

Введение

К своему стыду, я совсем недавно познакомился с элементом details, который по сути является виджетом для представления информации о чём-либо. По информации, которая есть у меня, его поддержка достаточна скудна, так как поддерживается он на данный момент лишь в Google Chrome, начиная с 12.0, а также в Android Browser, начиная с версии 4.0. Что же, давайте посмотрим, что это за зверь такой.

Простейшее представление

Простейшее представление информации с помощью данного элемента будет выглядеть так:

А в браузере это выглядит таким образом:

Двигаемся дальше

Раз у нас есть вопрос, то давайте на него дадим ответ и прикрепим логотип HTML5. Нет ничего проще, ведь делается это также, как и при обычной вёрстке — т.е. мы создаём div, а в него вносим заголовки и параграфы. Вот так:

Открываем наш пример, кликаем по стрелочке и… Вуаля!

И всё-таки

Но уж как-то это всё не профессионально. Мы не применили стили. А для красивого отображения сделать это достаточно легко. Давайте попробуем.

Ничего необычного. Задаём отступы, немного красим задний фон, меняем курсор — всё, как обычно. Хотя, если честно, с курсором приходилось работать очень редко.
Хорошо, пора посмотреть на результат. Вот он:

Напоследок

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

Теперь она выглядит вот так:

Заключение

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

HTML Tag

Sharing is caring!

Code Example

Raindrops on roses and whiskers on kittens

Cream colored ponies and crisp apple strudels

Wild geese that fly with the moon on their wings

Summarizing the Details

The details element creates a simple widget with important disclosure information such as legal notices, links to privacy policies, copyright information, an so forth. The summary element provides a short description of the contents of the details element and is displayed when the details disclosure element is toggled closed. Not all browsers support the details and summary elements, so use this element with care. Browsers that don’t support the element typically just display the full content of the details element rather than hiding it behind the summary label.

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 534027568da64e40 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL