Табы на чистом CSS с использованием Details, Grid и Subgrid

Создание интерфейсов с вкладками на чистом CSS остается актуальной и обсуждаемой темой в современной веб-разработке. Эта статья предлагает современный подход к реализации таких табов, используя элемент <details> в сочетании с CSS Grid и Subgrid для обеспечения доступности и гибкости. В основе HTML-структуры лежит родительский контейнер .grid, внутри которого размещены несколько элементов <details>, каждый из которых представляет собой отдельную вкладку. Каждый элемент <details> содержит <summary> для заголовка вкладки и div для ее содержимого.

Основной контейнер .grid настраивается с помощью CSS Grid, определяя, например, три колонки для табов и две строки: одна для заголовков, другая для панелей содержимого.

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
}

Затем каждый элемент <details> сам становится гридом, используя subgrid для наследования линий родительского грида, обеспечивая идеальное выравнивание и заполняя всю доступную область грида.

details {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: 1 / -1;
  grid-row: 1 / span 3;
}

Контент панели вкладки позиционируется во второй строке подгрида и охватывает все колонки с помощью псевдоэлемента ::details-content. Для скрытия содержимого неактивных вкладок применяется правило details:not([open])::details-content { display: none; }. Заголовки вкладок (<summary>) размещаются в первой строке подгрида и распределяются по соответствующим колонкам, используя :nth-of-type или CSS-переменные для динамического позиционирования.

summary {
  grid-column: var(--n) / span 1; /* Пример с CSS-переменной */
  grid-row: 1;
  z-index: 1; /* Важно для обеспечения кликабельности */
}

Важным завершающим штрихом является применение z-index: 1; к элементу <summary>, чтобы заголовки были кликабельны, поскольку элементы <details> накладываются друг на друга. Важным преимуществом такого подхода является встроенная доступность элемента <details>, которая обеспечивает навигацию с клавиатуры и поддержку скринридеров. Хотя некоторые функции, такие как ::details-content, могут требовать дальнейшего улучшения поддержки браузерами, этот метод демонстрирует, что чистые CSS-табы без JavaScript уже реальны и доступны.

Оригинал статьи: Pure CSS Tabs With Details, Grid, and Subgrid