HTML5 <details> и <summary>

Тег details — это новый элемент HTML применяется для свёртывания и развёртывания своего содержания. Другими словами элемент <details> для интерактивного раскрытия виджета. Тег details встроен в браузер и использует элемент <summary> . На мой взгляд <details> отличная альтернатива спойлера.

details по умолчанию

Создать спойлер details легко, нужно между тегами вставить текст. Браузер выводит треугольник с словом Подробнее .



<details>
  <p>Содержание спойлера <details></p>
</details>


Вид details по умолчанию

После нажатия на слово Подробнее откроется содержание спойлера, и тег будет иметь такой вид:

Вид раскрытого details

Изменить стиль details

Изменить заголовок в теге details (Подробнее) на своё можно элементом summary.



<details>
  <summary>Свои заголовок</summary>
    <p>Текст</p>
</details>


По умолчанию в браузере границу с цветом #5B9DD9 определяет стандартный стиль WebKit .



:focus {
    /* -webkit-focus-ring-color = '#5B9DD9' */
    outline: -webkit-focus-ring-color auto 5px;
}


Если граница тега <details> не подходит под цветовую схему сайта или оформление, можно изменить :focus таким методом:



:focus {
    outline: 0;
    /* или */
    outline: none;
    /* или */
    outline: thin dotted;
}


Возможно потребуется добавить:



details {
    display: block;
}


Чтобы изменить значок тега <details> (треугольник) на свой, для начала нужно спрятать стандартный значок WebKit. Далее к элементу summary  добавить селектор :before . Значение селектора :before будет content: в кавычках которого указывается значок для тега <details>. В примере ниже значок плюс когда спойлер закрыт, значок минус когда спойлер открыт. Больше значков можно найти на странице « Символы HTML ».



details summary::-webkit-details-marker {
  display: none;
}
  details summary:before {
  content: " + ";
}
  details[open] summary:before {
  content: " - ";
}


Тег <details> предоставляет два варианта: показать скрыть и скрыть показать текст , какой вариант выбрать зависит от ваших потребностей.

в примерах ниже заголовок спойлера пишется внутри элемента summary!

Показать скрыть текст



<details>
<summary>Показать/скрыть</summary>
  <p>Текст</p>
</details>


После открытия спойлера к элементу details браузер добавляет атрибут open .



details open


Стиль для содержания открытого спойлера определяется к тегу details с атрибутом open .



details[open] {}
details[open] summary {}


Скрыть показать текст

Если к элементу details в HTML самому добавить атрибут open , содержание будет показано, и только после нажатия на спойлер содержание скроется.



<details open>
<summary>Скрыть/показать</summary>
  <p>Текст</p>
</details>


Для управления с клавиатуры для обоих случаев к элементу details в HTML нужно добавить атрибут tabindex .

В CSS:



details[tabindex]{}


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

Тег HTML5 <details> слабенько поддерживается браузерами, на момент написания этого урока элемент <details> не поддерживается браузерами IE. Обозреватель Firefox станет поддерживать HTML5 <details> в близлежащее время.

Таблица поддержки браузерами
Internet Explorer Chrome Opera Safari Firefox Android iOS
12.0+ 15.0+ 6.0+ 4.0+ 6.0+

В интернете много скриптов поллифил которые должны создать поддержку HTML5 <details> для браузеров. Но, они меняют синтаксис поэтому работают не корректно !

Сообщить пользователю о том что, его браузер не поддерживает HTML5 <details>

JavaScript



<script>
  if (!('open' in document.createElement('details'))) {
 alert("Браузер не поддерживает HTML5 details");
  }
</script>


Демо

Заключение

В этой статье Я продемонстрировал, как использовать элементы HTML5 <details> и <summary>. Элементы очень полезны и решают много сложностей в оформлении веб-сайта или форума. Тег details идеально подходит для создания спойлера, аккордеона, табов. В настоящее время, это всё что нужно знать о элементе details.

Если у Вас есть любые свои идеи как использовать details дайте мне знать в комментариях.

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

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

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>