Многие библиотеки JavaScript были разработаны для того, чтобы размещать на сайтах дополнительные интерактивные виджеты. Аналогичными средствами обладает и HTML5 . В этой статье мы рассмотрим один из таких элементов под названием ( а значит автоматически и элемент ), который дает возможность создавать интерактивные виджеты, похожие на аккордеон.
Использование и
может использоваться в любом месте в пределах тега . Вот простой пример его использования:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.
В приведенном выше примере использован элемент , содержащий абзац, что подчеркивает его сходство с другими элементами секционирования HTML . Он определяет семантический раздел, который может содержать дочерние элементы, такие как изображения с элементами , элементы форм, такие как и , и даже вложенные массивы других элементов .
Единственное отличие заключается в том, как браузеры отображают этот элемент. Поддерживающие его браузеры, такие как Google Chrome , Safari и последняя версия Opera выводят его с небольшим треугольником сбоку:
Назначение стилей для с помощью CSS
Стили для элементов и могут задаваться так же, как и для любых других блочных элементов; выберите их с помощью селектора элемента, класса или идентификатором и создайте блок свойств, чтобы задать стиль для этих элементов:
Также можно использовать селектор атрибута, чтобы указать стили для открытого состояния:
Также вы можете задать стили для элемента . Например, если вы наводите курсор мыши на кнопку или ссылку, то курсор обычно приобретает вид указателя ( ладонь с вытянутым указательным пальцем ).
Но для элемента , который также является кликабельным, курсор приобретает вид текстового курсора, что выглядит немного неестественно. Можно отобразить курсор в виде указателя:
Стили маркера
А можно ли задать стили для стандартного маркера в виде маленького треугольника? Webkit использует для этой цели псевдо-элемент ::-webkit-details-marker . Благодаря этому мы можем задать для треугольника стили по умолчанию, такие как цвет, цвет фона, а также размер:
summary::-webkit-details-marker
К сожалению, заменить треугольник непосредственно через ::-webkit-details-marker невозможно. Единственное работающее решение — это изменить его с помощью ::before или ::after :
Поддержка браузерами этих двух элементов значительно улучшилась в последние два года. В 2011 и 2012 годах единственным браузером, который мог отображать и , был Google Chrome . Safari и Opera только недавно начали поддерживать эти элементы.
Так как поддержка в Firefox и Internet Explorer до сих пор оставляет желать лучшего, появилось несколько вариантов универсализации, которые имитируют нужный функционал, например, jQuery Details . Хотя это решение и опирается на JQuery , но размер его файла намного меньше, чем аналог библиотеки JQuery UI .
После его реализации, стили треугольника задаются обычным способом:
Примеры применения
Вы уже встречались с этим элементом. Например, некоторые интернет-магазины « упаковывают » с помощью него списки желаний. Или используют его в сайдбаре, чтобы отфильтровать результаты:
и также прекрасно подходят для организации справочных разделов. Они часто встречаются на страницах, где результаты можно отфильтровать по различным критериям, например, по цене. Я создал демо-версию , которой вы можете свободно пользоваться.
Заключение
Новый элемент становится все более важен. Когда-нибудь разработка сайтов или веб-приложений с помощью простых виджетов будет меньше зависеть от библиотек JavaScript .
Элемент фокусируемый. То есть передвигаясь по странице с клавиатуры вы попадёте на этот элемент. А вот содержимое может попасть в фокус только если открыт, то есть фокус никогда не попадет на невидимые элементы внутри .
Как правило, программы чтения с экрана хорошо справляются со стандартным использованием и . Существуют некоторые вариации в объявлении в зависимости от программы и браузера. Подробнее.
Примеры использования
Далее я примерно повторю некоторые компоненты из документации bootstrap, но практически без JavaScript.
Изменяем маркер
Первое что вам может понадобится — изменить внешний вид маркера. Делается это очень просто:
Или вы можете скрыть стандартный маркер и реализовать собственный
/* Убираем стандартный маркер Chrome */ details summary::-webkit-details-marker < display: none >/* Убираем стандартный маркер Firefox */ details > summary < list-style: none; >/* Добавляем собственный маркер для закрытого состояния */ details summary:before < content: '\f0fe'; font-family: "Font Awesome 5 free"; margin-right: 7px; >/* Добавляем собственный маркер для открытого состояния */ details[open] summary:before
Collapse Component
Здесь всё просто. Базовый функционал такой же. Нужно лишь немного изменить внешний вид:
Accordion Component
Повторим предыдущий пример, немного изменим внешний вид и получим аккордеон:
Но, как видите, один элемент не закрывается когда открывается другой. Чтобы добиться этого нам понадобится пара строк JavaScript. поддерживает событие toggle . Используя это, можно очень легко отслеживать открытие одного элемента и по этому событию закрывать остальные:
Popover Component
Эта реализация очень похожа на Collapse Component, с той разницей что содержимое имеет абсолютное позиционирование и перекрывает контент.
Dropdown Component
В своей основе это тот же Popover Component. Отличается лишь внешний вид.
Тот же пример, только с отдельной кнопкой
Но у Dropdown Component есть ещё одно важное отличие: по клику за его пределами он должен скрываться. Чтобы реализовать это снова понадобится написать пару строк JavaScript.
// По клику на тело документа document.body.onclick = () => < // Найти все открытые document.body.querySelectorAll('details.dropdown[open]') // И закрыть каждый из них .forEach(e => e.open = false) >
Modal Component
И напоследок пример модального окна.
Вообще не лучший выбор для реализации этого компонента. Существует куда более подходящий элемент — , но у него весьма плохая поддержка браузерами.
Ссылки
UPD. Решил добавить ещё один пример использования — многоуровневая навигация. Ещё раз хочу обратить ваше внимание на то, что пример работает без какого либо JavaScript. И он намного более инклюзивный чем традиционная верстка на .
– Потому, – ответил иностранец и прищуренными глазами поглядел в небо, где, предчувствуя вечернюю прохладу, бесшумно чертили черные птицы, – что Аннушка уже купила подсолнечное масло, и не только купила, но даже разлила.
details < display: inline;/* текст на текущей строке */> details[open] < display: contents;/* спрятанный текст на текущей строке (в Google Chrome отсутствует реализация на момент написания статьи) */> details summary < list-style-type: "[. ]";/* такие слова, как «Ещё», «Читать дальше», «Нажать» лучше вносить в list-style-type, чтобы они не были видны в браузерах, не поддерживающих тег details (в Google Chrome отсутствует реализация на момент написания статьи) */ color: blue; cursor: pointer; > details[open] summary Текст скрытое/показанное содержимое
. Метка Длинное спрятанное содержимое переносится всей строкой отдельно от предыдущего и последующего текста. В браузерах разночтение. Текст после закрывающегося тега
.
Текст Метка скрытое/показанное содержимое Текст
Вложенный в тег
details:not([open]) summary small display: none; > details[open] summary small Нажать [Закрыть] скрытое/показанное содержимое
Ссылка внутри
Сделать плавное открытие и скрытие блока при нажатии
Не получается анимировать блок, когда тот сворачивается. В Mozilla Firefox при display: contents; элемент
раскрывается и его состояние тогда можно менять стилями.
скрытое/показанное содержимое
— Это водка? — слабо спросила Маргарита. Кот подпрыгнул на стуле от обиды. — Помилуйте, королева, — прохрипел он, — разве я позволил бы себе налить даме водки? Это чистый спирт!
Свежесть бывает только одна — первая, она же и последняя. А если осетрина второй свежести, то это означает, что она тухлая!
— Вы не Достоевский, — сказала гражданка, сбиваемая с толку Коровьевым. — Ну, почем знать, почем знать, — ответил тот. — Достоевский умер, — сказала гражданка, но как-то не очень уверенно. — Протестую, — горячо воскликнул Бегемот. — Достоевский бессмертен!
Заголовок 1
Содержимое 1
Заголовок 2
Содержимое 2
Блок раскрывается при щелчке по кнопке, а не по всей строке
details summary < width: -webkit-fit-content; width: -moz-fit-content; width: fit-content;transition: color .3s; /* плавная смена цвета */ cursor: pointer; /* изменение курсора при наведении */> details summary:hover, details[open] summary Нажать скрытое/показанное содержимое
Текст «открыть/закрыть» при развёртывании и свёртывании содержимого
скрытое/показанное содержимое
Поменять стрелочку на знаки плюс и минус
Нажать скрытое/показанное содержимое
Нажать скрытое/показанное содержимое
Код закрывающейся метки внизу блока
– Потому, – ответил иностранец и прищуренными глазами поглядел в небо, где, предчувствуя вечернюю прохладу, бесшумно чертили черные птицы, – что Аннушка уже купила подсолнечное масло, и не только купила, но даже разлила.
div < position: relative; > details, summary < display: inline; >details[open] < display: contents; >details[open]::after < /* пространство для записи "СВЕРНУТЬ" */ display: block; content: "\00a0"; > summary < color: gray; cursor: pointer; >details[open] summary < position: absolute;/* переместить запись "СВЕРНУТЬ" вниз
