20 простых способов стилизовать элемент HTML details — CodesCode
Изучите простые способы оформления элемента HTML details, который очень полезен для отображения и скрытия частей контента на веб-странице.
В этой статье мы рассмотрим несколько простых способов стилизации элемента HTML <details>, который является очень полезным элементом для отображения и скрытия контента на веб-странице.
Удобно иметь простой элемент раскрытия в HTML, который не требует JavaScript, но стандартное оформление элемента <details> может оттолкнуть некоторых пользователей. К счастью, стиль этого элемента легко изменить.
Ниже представлена таблица содержания, которая является примером использования элемента <details>. Мы добавили ему простую границу и немного отступов.
- Знакомство с элементом details
- Цвет фона, границы и отступы
- Стилизация маркера
- Создание пользовательского маркера для элемента summary
- Удаление пользовательского маркера
- Использование изображения фона в качестве маркера
- Использование изображения фона в качестве маркера с ::after
- Сделать элемент summary похожим на вкладку
- Ограничение ширины элемента details
- Размещение стрелки маркера в конце summary
- Использование ::after в качестве маркера без изображения фона
- Разные дополнения
- Эффект при наведении на элемент details
- Анимация открытия и закрытия элемента details
- Изменение содержимого summary в открытом и закрытом состояниях
- Изменение курсора summary
- Изменение стилей доступности фокуса
- Использование нескольких элементов details, похожих на аккордеон-список
- Стилизация заголовка внутри элемента summary
- Заключение
Знакомство с элементом details
Вот основной код элемента <details>:
<details> <summary>Кликни меня!</summary> <p>Пикабу! Вот некоторый скрытый контент!</p></details>Практически любой HTML контент можно поместить внутри элемента <details>. Элемент <summary> предоставляет надпись, по которой пользователь может нажать, чтобы развернуть больше контента, и он должен быть первым дочерним элементом элемента <details>.
Вот живой пример этого кода:
Пикабу! Вот некоторый скрытый контент!
Давайте рассмотрим все способы использования CSS для улучшения внешнего вида нашего элемента <details>.
Цвет фона, границы и отступы
Очень простой способ улучшить внешний вид элемента <details> – добавить немного отступа вместе с границей или цветом фона.
Добавление границы
Как показано в таблице содержимого выше, простая граница может многое сделать для улучшения и определения элемента <details>, вместе с некоторым отступом и небольшим радиусом границы:
details { padding: 10px; border: 5px solid #f7f7f7; border-radius: 3px;}Это простой код, который мы использовали выше для оформления нашего ToC.
Добавление цвета фона
Давайте добавим цвет фона нашему элементу <details> вместо границы:
details { padding: 10px; background-color: #e4eaef; border-radius: 5px;}Результат показан в редакторе ниже.
Посмотрите редактор Styling the HTML details element: adding padding and a background color от CodesCode (@CodesCode) на CodePen.
Цвет фона придает элементу более четкое определение, а отступ помогает создать пространство внутри него.
Мы также можем присвоить элементу <summary> отличный другой цвет фона, чтобы отличить его от остального контента, и изменить его цвет текста:
summary { background-color: #2196F3; color: white; padding: 10px;}Посмотрите редактор Styling the HTML details element: adding a background color to the summary element от CodesCode (@CodesCode) на CodePen.
Обратите внимание, что изменение цвета текста элемента <summary> также изменяет цвет стрелки маркера. Это потому, что маркер фактически привязан к элементу <summary>, так же как маркеры (например, маркеры списков) привязаны к элементам списка. Мы рассмотрим ниже, как стилизовать их отдельно.
Стилизация маркера
Элемент <summary> установлен как display со значением list-item. Поэтому стандартная стрелка (▶), которая идет с ним, может быть изменена так же, как стандартные маркеры на элементах списка HTML. Мы можем изменить используемый символ и независимо изменить его цвет.
Изменение цвета маркера
Давайте установим стандартный маркер в другой цвет. Просто для развлечения, давайте также увеличим размер шрифта маркера. Мы можем сделать это с помощью псевдо-элемента ::marker:
summary::marker { color: #e162bf; font-size: 1.2em;}Результат показан ниже.
Посмотрите редактор Styling the HTML details element: changing the marker color от CodesCode (@CodesCode) на CodePen.
Это хорошее, простое решение, хотя ::marker к сожалению не поддерживается в Safari, поэтому, если это критично, посмотрите другие варианты ниже.
Изменение интервала между маркером
По умолчанию маркерная стрелка довольно близко расположена к тексту резюме. Его list-style-position установлен в inside. Если мы изменяем его на outside, мы можем добавить пространство между текстом резюме и маркером, добавив немного левого отступа. Нам также нужно добавить немного левого отступа, чтобы треугольник не выступал за пределы контейнера:
summary { list-style-position: outside; margin-left: 30px; padding: 10px 10px 10px 20px; border-radius: 5px;}Результат показан ниже.
Посмотрите редактор Styling the HTML details element: spacing marker arrow and summary text от CodesCode (@CodesCode) на CodePen.
Я преувеличил расстояние между маркером стрелки и текстом сводки только для того, чтобы сделать это очевидным. К сожалению, в Safari не работает использование list-style-position: outside; с элементом <summary>. К счастью, есть и другие варианты, как мы увидим ниже.
Изменение формы маркера
Маркер на нашем элементе <summary> не обязательно должен быть треугольником. Мы можем заменить его любым символом, который нам нравится:
summary { list-style-type: '⬇ ';} Обратите внимание, что мы использовали '⬇ ' (с пробелом рядом с стрелкой), что является альтернативой используемому нами пробелу выше.
Теперь у нас есть стрелка вниз вместо треугольника. Но… эта стрелка вниз не изменится, когда элемент <details> открыт. Это связано с тем, что элемент <details> имеет два состояния – закрыт и открыт – и мы установили только стиль маркера для состояния закрыт. Так давайте также установим маркер для состояния открыт:
details[open] > summary { list-style-type: '⬆ ';}На этот раз мы использовали стрелку вверх. Вот что мы получаем в результате.
See the Pen Styling the HTML details element: changing the summary marker with list-style-type by CodesCode (@CodesCode) on CodePen.
Черт возьми! Опять же, Safari подводит нас, так как он не поддерживает list-style-type на элементе <summary> тоже. Но не отчаивайтесь, так как мы рассмотрим более изысканные решения ниже.
Мы можем попробовать все виды других символов, таких как + и -, ✓ и Χ или ✗, ⋁ и ⋀, и даже поиграться с другими символами, например ★ или цветными фруктами, такими как 🍏 🍌 🍓 🍋 и 🍐, но помните, что эти символы могут не работать на всех системах, поэтому будьте немного осторожны, и еще раз, list-style-type точно не будет работать в Safari.
Создание пользовательского маркера для элемента summary
Как мы видели выше, даже если мы можем установить другой символ для маркера по умолчанию и дать ему стили, такие как цвет и размер шрифта, могут возникнуть проблемы с этим. Более лучшим вариантом может быть удаление маркера полностью и создание полностью пользовательской альтернативы.
Удаление пользовательского маркера
Как и с маркерами элементов списка, мы можем полностью удалить маркер:
summary { list-style: none;}/* sigh, Safari again */summary::-webkit-details-marker { display: none;}Стандартный list-style: none работает во всех браузерах, кроме … (можете догадаться?) … Safari. По крайней мере, в этом случае есть проприетарный вариант -webkit-.
Примечание: еще один способ удаления маркера из элемента <summary> – это установка элементу <summary> значения display не равным list-item – таким как block или flex. Это работает во всех браузерах, кроме… (нужно ли мне это даже говорить?)… Safari.
Теперь наш элемент не имеет маркера.
See the Pen Styling the HTML details element: a details element with no marker by CodesCode (@CodesCode) on CodePen.
Отсутствие маркера не дает никакого визуального намека на то, что этот элемент можно щелкнуть, поэтому лучше не оставлять его в таком виде.
Использование изображения фона в качестве маркера
Мы можем разместить изображение на фоне вот таким образом:
summary { list-style: none; padding: 10px 10px 10px 40px; background: url(arrow.svg) no-repeat 14px 50%; background-size: 18px; font-weight: bold;}Результат отображается ниже.
Смотрите оригинал на CodePen от CodesCode (@CodesCode).
Однако недостатком использования фонового изображения непосредственно на элементе <summary> является то, что мы не можем поворачивать его, когда элемент <details> открыт, потому что анимации нельзя применять непосредственно к фоновым изображениям в CSS. (Мы могли бы, конечно, использовать другое изображение для открытого состояния, но его все равно нельзя анимировать, что гораздо интереснее.) Поэтому, если мы собираемся использовать фоновое изображение, лучше поместить его на элемент, который можно поворачивать и/или анимировать.
Использование фонового изображения в качестве маркера с ::after
Давайте поместим фоновое изображение в псевдоэлемент ::after:
summary { display: flex;}summary::after { content: ''; width: 18px; height: 10px; background: url('arrow.svg'); background-size: cover; margin-left: .75em; transition: 0.2s;}details[open] > summary::after { transform: rotate(180deg);}Здесь есть живой пример этого кода на CodePen от CodesCode (@CodesCode).
Мы использовали display: flex на элементе <summary>, чтобы легко расположить стрелку по горизонтали.
Хорошая вещь в этой настройке заключается в том, что мы можем добавить анимацию к стрелке. (Анимация, кажется, не работает в Safari, но поведение достаточно хорошее, и мне немного поднадоел этот браузер!)
Стилизация элемента summary, чтобы он выглядел как вкладка
Мы устанавливали элемент <summary> с полной шириной, но это не обязательно. Мы можем сделать его похожим на вкладку с помощью этого простого изменения:
summary { display: inline-flex;}Посмотрите пример на CodePen от CodesCode (@CodesCode).
Ограничение ширины элемента details
Во всех наших примерах до сих пор элемент <details> растягивался на полную ширину своего контейнера, поскольку это блочный элемент. Однако мы можем задать ему другую ширину, если не хотим, чтобы он был таким широким, например, width: 50%;. Или мы могли бы установить для него инлайновый режим отображения, чтобы он был таким же широким, как его содержимое:
details { display: inline-block;}Кликните на вкладку ниже, чтобы увидеть более узкую ширину элемента <details>.
Посмотрите пример на CodePen от CodesCode (@CodesCode).
Попробуйте изменить значение display: inline-block на width: 50% в примере выше.
Размещение маркера стрелки в крайней правой части summary
Давайте сделаем что-то немного другое и поместим маркер стрелки справа от элемента <summary>. Поскольку мы использовали display: flex, перемещение стрелки в крайнюю правую часть становится очень простым с добавлением justify-content: space-between к элементу <summary>:
summary { display: flex; justify-content: space-between;}Посмотрите пример Стилизация элемента HTML details: фоновое изображение на summary::after в качестве маркера, выравненного по правому краю, сделанный CodesCode (@CodesCode) на CodePen.
Использование ::after в качестве маркера без фонового изображения
Существуют и другие способы использования ::after без настоящего изображения. Вот пример, который использует только ::after с границами:
summary::after { content: ''; width: 0; height: 0; border-top: 10px solid #15171b; border-inline: 7px solid transparent; transition: 0.2s;}Вот живой демо-пример.
Посмотрите пример Стилизация элемента HTML details: выравненный по правому краю маркер с использованием summary::after и границ, созданный CodesCode (@CodesCode) на CodePen.
Теперь у нас есть стрелка, которая вращается между закрытым и открытым состоянием. Мы также добавили красивую тень к элементу <details>.
Еще один способ использования ::after без изображения – поместить символы Unicode в свойство content:
summary::after { content: "\25BC"; transition: 0.2s;}Это устанавливает треугольную форму (▼) в качестве нашего маркера, как показано в этом демо-примере на CodePen.
Существует тысячи символов Unicode, и с ними достаточно интересно работать. Каждый символ имеет код вроде U+25BC или U+025BC. Чтобы использовать этот код внутри свойства content, возьмите символы после знака + и поместите их в кавычки свойства content, с добавлением слеша впереди: content: "\25BC". Если в начале есть один или несколько нулей, их можно опустить. (Например, U+02248 может стать "\02248" или "\2248".)
Различные дополнения
До сих пор сделанное выше более чем достаточно, но есть и другие вещи, с которыми мы можем повеселиться, так что давайте немного поиграем с ними здесь.
Эффект при наведении на элемент details
Мы можем задать различные эффекты при наведении на элемент <details>. Например, мы можем сделать что-то подобное:
details { transition: 0.2s background linear;}details:hover { background: #dad3b1;}Пока мы здесь, давайте также переходить к изменению цвета текста в элементе <summary> в состоянии open:
details > summary { transition: color 1s;}details[open] > summary { color: #d9103e;}Результат показан ниже.
Посмотрите пример Стилизация элемента HTML details: эффекты перехода фона и текста, созданный CodesCode (@CodesCode) на CodePen.
Мы также можем просто изменить фон элемента <summary>.
Анимация открытия и закрытия элемента details
Ха-ха, сделано! Кажется, нельзя анимировать открытие и закрытие элемента <details>. Согласно MDN:
К сожалению, на данный момент нет встроенного способа анимировать переход между открытым и закрытым состояниями.
Тем не менее, мы можем немного пошалить, анимируя содержимое элемента <details>. Например, мы можем задать эффект затухания содержимого при его появлении:
details article { opacity: 0;}details[open] article { animation: fadeIn .75s linear forwards;}@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }} Результат показан ниже.
Смотреть пример: “Оформление элемента HTML details: затухание содержимого элемента details” от CodesCode (@CodesCode) на CodePen.
Mожно также использовать небольшой трюк, а именно, анимировать появление содержимого путем его сдвига:
details { overflow: hidden;}details[open] article { animation: animateUp .5s linear forwards;}@keyframes animateUp { 0% { opacity: 0; transform: translatey(100%); } 100% { opacity: 1; transform: translatey(0); }}Результат показан ниже.
Смотреть пример: “Оформление элемента HTML details: сдвиг содержимого элемента details” от CodesCode (@CodesCode) на CodePen.
Можно сказать, что это немного футуристично и, возможно, излишне, но всё-таки стоит попробовать. К сожалению, эти анимации работают только при первом щелчке по элементу (если только не открыты инструменты разработчика браузера, по какой-то странной причине!). В основном нужно вмешательство JavaScript, чтобы сделать эффект работающим повторно.
Изменение содержания заголовка в открытом и закрытом состояниях
В приведенных выше примерах элемент <select> всегда имел один и тот же текст, независимо от того, открыт или закрыт элемент <details>. Но мы можем изменить это. Во-первых, давайте оставим имеющийся текст “Нажми меня”, но также добавим немного дополнительного текста для каждого состояния с помощью псевдоэлемента ::after:
summary::after { content: " для отображения скрытого содержимого";}details[open] summary::after { content: " для скрытия дополнительного содержимого";}Таким образом, получаем результат, показанный ниже.
Смотреть пример: “Оформление элемента HTML details: переключение текста выбора” от CodesCode (@CodesCode) на CodePen.
Изменение курсора для заголовка
Курсор по умолчанию для элемента <details> выглядит довольно странно. Он представляет собой обычную стрелку, а при наведении на текст <summary> превращается в текстовый курсор (или вертикальную черту).
Давайте для развлечения измените курсор на руку (или “указатель”):
summary { cursor: pointer;}Это устанавливает курсор мыши на руку при наведении на любую часть элемента <summary>, как показано ниже.
Смотреть пример: “Оформление элемента HTML details: изменение курсора заголовка на руку (указатель)” от CodesCode (@CodesCode) на CodePen.
Мы также можем установить курсор на элементе <details>, что приведет к отображению руки по всей области элемента <details>. Однако я предпочитаю оставить его только на месте, где мы должны щелкнуть.
Изменение стилей фокусировки при использовании клавиатуры
Если мы навигируем по странице с помощью клавиатуры, мы можем перейти к элементу <details> и затем открыть его, нажав клавишу Enter. Во время фокусировки элемент <summary> имеет контур по умолчанию. Изображение ниже показывает, как это выглядит в различных браузерах.
They’re much of a muchness: mostly a simple, dark (blue or black), solid outline that’s about 3px wide.
Есть много вариантов стилей, которые мы можем установить для сфокусированного элемента <details>, но давайте сделаем что-то простое здесь в качестве доказательства концепции, изменим контур на точечную красную линию:
summary:focus {outline: none;}summary:focus-visible {outline: 3px dotted #ff0060;}summary {padding: 10px;}По умолчанию контур фокуса не отображается, когда мы нажимаем на элемент <summary>. Но если мы изменяем стиль фокуса, этот стиль отображается, даже для пользователей без клавиатуры (то есть, когда мы нажимаем на элемент <details> с помощью мыши). Так что в приведенном выше коде мы установили outline в none и вместо этого использовали focus-visible для установки стилей, потому что это означает, что стили фокуса будут видны только для пользователей с клавиатурой (для которых это действительно полезно).
На изображении ниже показана наша новая стилизация.
Вот пример вживую.
See the Pen Styling the HTML details element: styling the focus outline by CodesCode (@CodesCode) on CodePen.
Мы можем повеселиться с этим, используя анимации, цвета фона и т.д., когда элемент <details> находится в фокусе. Я оставлю вам дорогу своих экспериментов.
Использование нескольких элементов details как список-аккордеон
Существуют предложения о согласовании нескольких элементов <details> таким образом, чтобы один закрывался при открытии другого. Спецификация HTML даже предлагает общий атрибут name для этой цели между несколькими элементами <details>.
В настоящее время нет способа сделать это только с помощью HTML и CSS, но есть несколько хитрых примеров, как сделать это с помощью JavaScript (например, здесь, здесь и здесь).
Лучшее, что мы можем сделать с CSS, это стилизовать открытый элемент отличным от других, используя некоторые из вышеупомянутых техник.
Вот простой пример:
details { background-color: #2196F3;}details[open] { background-color: #ce0e99;}See the Pen Styling the HTML details element: working with multiple details elements by CodesCode (@CodesCode) on CodePen.
Стилизация заголовка внутри summary
Некоторые разработчики, опасаясь структуры своего HTML, любят помещать элемент заголовка внутрь элемента <summary>. То, насколько это полезно или нет, подлежит обсуждению, но стандартное отображение не выглядит хорошо, с заголовком, который сидит на строке ниже стрелки. Это можно исправить, установив для заголовка display: inline или display: inline-block:
summary h2 { display: inline;}Вы можете увидеть пример этого на CodePen.
Вывод
Как мы старались показать выше, есть много простых способов стилизации элемента <details>. Установка границ, отступов и цветов фона легко, и они сами по себе значительно улучшают внешний вид. Некоторые методы стилизации стандартного маркера очень удобны, но учитывая, что фруктовая компания Форреста () имеет так много проблем с стилизацией маркера, может быть лучше отказаться от этой опции в пользу создания полностью настраиваемого элемента маркера. (Тем не менее, стилизация маркера не ломает элемент <details> в Safari.)
Были попытки анимировать открытие и закрытие элемента <details> только с помощью CSS, но они, в лучшем случае, обходные пути, поэтому не стоит даже пытаться идти по этой дорожке. Если вам действительно нужно анимированное открытие и закрытие, вам понадобится JavaScript.
Чтобы узнать больше о элементе <details>, ознакомьтесь с следующим:
- статья MDN о элементе details
- спецификация для элемента details на whatwg.org
Если у вас есть другие крутые способы стилизации элемента <details>, дайте мне знать в Twitter, и, возможно, мы их опубликуем здесь.
Leave a Reply