Створення інтерфейсу вкладок за допомогою CSS — нескінченна тема у світі сучасної веб-розробки. Чи можливі вони? Якщо так, чи можуть вони бути доступними? Про те, як їх створити та як інтегрувати в них доступні практики, я написав уперше дев’ять років тому.
Хоча тоді моє рішення могло б бути можливо Можна застосовувати й сьогодні, я знайшов сучасніший підхід, використовуючи вкладки CSS
По-перше, HTML
Почнемо зі створення структури HTML. нам знадобиться набір
.gridВсі
буде a .item Як ви можете собі уявити, кожен інтерфейс має вкладку.
First item
Second item
Third item
Це ще не схожі на справжні вкладки! Але це саме та структура, яку ми хочемо перед тим, як перейти до CSS, де ми запустимо роботу сітки та підсітки CSS.
Далі CSS
Давайте налаштуємо сітку для вашого елемента-обгортки за допомогою – ви вже здогадалися – CSS Grid. По суті, ми створюємо сітку з трьома стовпцями, по одному стовпцю для кожної вкладки (або .item), з невеликою відстанню між ними.
Ми також встановимо дві лінії .gridТой, який відповідає розміру вмісту, і той, який зберігає його пропорцію щодо доступного простору. Перший рядок міститиме наші вкладки, а другий рядок зарезервовано для відображення панелі активних вкладок.
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
grid-template-rows: auto 1fr;
column-gap: 1rem;
}Тепер ми розглядаємо трохи більше таких вкладок:
Далі нам потрібно налаштувати підсітку для наших елементів вкладки. Ми хочемо підсітку, тому що вона дозволяє нам використовувати існуючу .grid Рядки без вкладення абсолютно нової сітки з новими лініями. Таким чином все гарно вирівнюється.
Отже, ми налаштуємо кожну вкладку
.gridпо лінії subgrid,
details {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}Крім того, ми хочемо, щоб кожен елемент вкладки заповнював весь .gridТож ми налаштували це так
grid-column І grid-row Власність:
details {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
grid-column: 1 / -1;
grid-row: 1 / span 3;
}Спочатку це здається трохи дивним, оскільки три вкладки розташовані прямо одна на одній, але вони покривають усе .grid Це саме те, чого ми хочемо.
Далі ми розмістимо вміст панелі вкладок у другому рядку підсітки та розтягнемо його на всі три стовпці. ми використовуємо ::details-content (Хороша підтримка, але не в WebKit на момент написання) для цільового вмісту панелі, що добре, тому що це означає, що нам не потрібно встановлювати іншу оболонку в розмітці лише для цієї мети.
details::details-content {
grid-row: 2; /* position in the second row */
grid-column: 1 / -1; /* cover all three columns */
padding: 1rem;
border-bottom: 2px solid dodgerblue;
}Справа в інтерфейсі з вкладками полягає в тому, що ми хочемо показувати лише одну відкриту панель вкладок за раз. На щастя, ми можемо вибирати [open] Статус
::details-content будь-якої вкладки :not([open])За допомогою селекторів увімкнення:
details:not([open])::details-content {
display: none;
}У нас все ще є вкладки, що перекриваються, але єдина панель вкладок, яку ми відображаємо, наразі відкрита, що трохи покращує ситуацію:
поворот
у вкладці
Тепер перейдемо до найцікавішого! Наразі всі наші вкладки візуально складені. Ми хочемо розподілити їх рівномірно .gridВерхня лінія. Всі
Надання міток вкладок і кнопок, які перемикаються, щоб відкривати та закривати кожну.
давайте місце
знаходиться на першій вкладці [open] штат:
summary {
grid-row: 1; /* First subgrid row */
display: grid;
padding: 1rem; /* Some breathing room */
border-bottom: 2px solid dodgerblue;
cursor: pointer; /* Update the cursor when hovered */
}
/* Style the element when is [open] */
details[open] summary {
font-weight: bold;
} Наші вкладки все ще зібрані, але ось як ми застосовуємо деякі світлі стилі, поки вкладка відкрита:
Ми майже на місці! Останнє – встановити позицію
:nth-of-type Псевдо для вибору кожного окремо відповідно до їх порядку в HTML:
/* First item in first column */
details:nth-of-type(1) summary {
grid-column: 1 / span 1;
}
/* Second item in second column */
details:nth-of-type(2) summary {
grid-column: 2 / span 1;
}
/* Third item in third column */
details:nth-of-type(3) summary {
grid-column: 3 / span 1;
}Перевірте це! Вкладки рівномірно розподіляються у верхньому рядку підсітки:
На жаль, ми не можемо використовувати цикли в CSS (поки!), але ми можемо використовувати змінні, щоб зберегти наші стилі сухими:
summary {
grid-column: var(--n) / span 1;
}Тепер ми повинні встановити --n змінна для кожного
First item
Second item
Third item
Знову ж таки, оскільки на даний момент цикли не є предметом CSS, я використовую мову шаблонів, зокрема Liquid, щоб отримати певну дію циклу. Таким чином, немає необхідності явно писати HTML для кожної вкладки:
{% for item in itemList %}
{% endfor %}Звичайно, ви можете використовувати іншу мову шаблонів. Є багато чого, якщо ви хочете бути лаконічними!
останній штрих
Гаразд, я збрехав. є ще одна річ Ми повинні це зробити. Зараз ви можете натиснути лише на останній
Шматки кладуть один на одного таким чином, щоб останній був на вершині купи.
Ви, напевно, вже здогадалися: ми повинні поставити свій
z-index,
summary {
z-index: 1;
}Ось повна робоча демонстрація:
просте використання
Оновлення: — крикнув Натан Ноллер в З деякими чудовими балами щодо Mastodon. Адріан Росселлі також обговорив це з додатковим контекстом у коментарях.
Зараз 2025 рік, і ми можемо створювати вкладки лише за допомогою HTML і CSS без будь-яких хаків. Я не знаю, як ви, але цей розробник щасливий сьогодні, хоча нам ще потрібно трохи терпіння, щоб браузери повністю підтримували ці функції.
