Эта статья — перевод оригинальной статьи «A new way to style gaps in CSS»

Также я веду телеграм канал «Frontend по‑флотски», где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

Попрощайтесь с хаками в виде бордеров и псевдоэлементов и поздоровайтесь с CSS gap decorations.

Команда разработчиков Microsoft Edge рада сообщить, что CSS gap decorations - новый способ стилизации отступов между элементами flex, grid и многоколоночных макетах - теперь доступны для пробного использования разработчиками в Chrome и Edge 139!

Попробуйте его и поделитесь своими отзывами, чтобы помочь сформировать будущее этого API.

Проблема

Стилизация отступов в таких компонентах пользовательского интерфейса, как календари, карточки или сетки данных, может значительно улучшить читаемость и придать общий эстетический вид. Однако достижение этого эффекта в макетах с grid и flexbox традиционно требует неудобных обходных путей с использованием бордеров, псевдоэлементов или фоновых трюков. Такие обходные пути могут быть проблематичными по ряду причин.

• Неинтуитивно: Они вводят структурные зависимости для визуального оформления, что противоречит принципам семантического HTML.

• Недружественные к доступности: они часто требуют дополнительных элементов DOM, что может помешать работе вспомогательных технологий, таких как программы чтения с экрана.

• Сложность в поддержке: Они требуют сложной логики компоновки и затрудняют согласованную стилизацию компонентов.

• Плохо для производительности: Эти обходные пути могут добавлять ненужные элементы в DOM, что может привести к проблемам с производительностью.

Хотя веб-платформа уже поддерживает стилизацию отступов с помощью свойства column-rule, в настоящее время это ограничено только многоколоночными макетами. Веб-разработчики давно просят предоставить им последовательный способ стилизации пробелов в других соответствующих типах макетов, таких как grid и flexbox.

Решение: CSS gap decorations

CSS gap decorations расширяют свойство column-rule для работы с другими типами макетов, такими как grid и flexbox, и вводят новое свойство row-rule в дополнение к нему. Это обеспечивает согласованность и новые возможности настройки стиля оформления отступов для разных типов макетов.

CSS gap decorations дает следующие преимущества:

• Никакого влияния на макет: Декорации носят исключительно визуальный характер. Они не влияют на расположение и интервалы, поэтому их можно использовать, не боясь нарушить существующий дизайн.

• Функция repeat(): Подобно CSS Grid, вы можете использовать синтаксис repeat() для создания шаблонов декораций в разных частях контейнера, что позволяет создавать насыщенные последовательные дизайны с минимальным количеством CSS.

• Более чистая разметка: Нет необходимости в дополнительных элементах или псевдоэлементах - достаточно просто стилизовать отступы напрямую.

• Настраиваемость: Новые CSS-свойства, такие как rule-break, rule-outset и gap-rule-paint-order, позволяют расширить возможности настройки, выходящие за рамки традиционной стилизации правил: ширина, стиль и цвет.

С помощью CSS gap decorations стало как никогда просто создавать визуально выразительные и удобные для использования макеты страниц.

Gap decorations в действии

Чтобы поиграть с gap decorations сегодня, используйте браузер, который их поддерживает: Edge или Chrome, начиная с версии 139, и установите флаг Enable Experimental Web Platform Features, перейдя по адресу edge://flags или chrome://flags.

Песочница для разработчиков

Чтобы попробовать различные типы макетов с поддержкой CSS gap decorations и всеми новыми свойствами, воспользуйтесь нашей интерактивной площадкой для разработчиков.

Burger menu

Демонстрация гамбургер меню показывает, как использовать свойство column-rule-break: intersection для декораций разрывов колонок на каждом видимом пересечении с разрывами строк.

В демонстрации также используется свойство column-rule-offset: -15px для регулировки длины, отводя их от краев каждого пересечения.

Notebook

В демонстрационном примере блокнота правило row-rule-break: none гарантирует, что строки не будут прерываться на пересечениях - они будут идти непрерывно слева направо от контейнера. С другой стороны, свойство column-rule-break: spanning-item гарантирует, что столбцы не будут рисоваться за элементами spanning - они будут начинаться и останавливаться на элементах spanning, образующих видимое пересечение T.

Свойство row-rule использует функцию repeat() для точного контроля над тем, как элементы с разрывами применяются в разных частях макета. Это позволяет создать модель стиля, в которой правила строк скрыты в верхнем и нижнем колонтитулах, более толстые вокруг основного содержимого и более тонкие в других местах.

Daily CSS news

Демонстрация Daily CSS News использует макет в стиле журнала и определяет CSS gap decorations для нескольких контейнеров grid и flexbox.

Обратите внимание на игру "Судоку" справа, которая использует сетку 9x9 и шаблон повторения для рисования тонких и толстых линий между строками и столбцами:

.sudoku {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 6px;
  column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  column-rule-style: solid;
  column-rule-color: var(--secondary);
  row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  row-rule-style: solid;
  row-rule-color: var(--secondary);
}

Призыв к обратной связи

Мы рады, что вы попробовали CSS gap decorations. Мы считаем, что она решает распространенную проблему, и хотели бы услышать ваши отзывы о ней, чтобы мы могли доработать в соответствии с вашими потребностями.

CSS gap decorations все еще находится в стадии реализации в Chromium. Если вы будете тестировать ее, имейте в виду, что мы все еще активно работаем над ней, и вы можете столкнуться со случаями, когда она будет вести себя не так, как ожидалось. Некоторые из текущих ограничений связаны с анимацией и использованием большого количества треков сетки.

Если вы обнаружили ошибку или у вас есть какие-то соображения по поводу этой функции, поделитесь своим мнением, открыв новую ошибку в Chromium.