Украшения Gap: теперь доступны в Chromium.

Javier Contreras

Sam Davis Omekara

Опубликовано: 15 мая 2026 г.

Начиная с версии 149, в Chrome и Edge доступны CSS-декорации для заполнения промежутков между элементами сетки, flexbox и многоколоночными макетами без использования границ или псевдоэлементов. Эта функция была разработана в сотрудничестве команд Microsoft Edge и Google Chrome.

Проблема

Оформление промежутков между элементами макета всегда требовало обходных путей. Границы отдельных элементов, псевдоэлементы, фоновые эффекты. У этих подходов есть своя цена:

• Они зависят от структуры. Добавление визуального разделителя означает изменение разметки или написание селекторов для конкретных элементов.
• Они мешают обеспечению доступности. В дереве доступности появляются лишние элементы DOM, которых там быть не должно.
• Их сложно поддерживать. Адаптивные макеты нарушают предположения, на которых основывалось оформление ваших элементов.
• Они негативно влияют на производительность. Больше DOM-узлов, больше работы по компоновке.
• У них плохая эргономика интерфейса для создания контента. Часто требовались сложные геометрические расчеты, чтобы все работало правильно.

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

Решение

Теперь контейнеры Grid и flexbox поддерживают column-rule . Новое свойство row-rule отвечает за горизонтальные промежутки. Эти элементы оформления носят чисто визуальный характер и не влияют на существующие макеты. Если вы используете свойство column-rule в многоколоночных макетах, существующее поведение остается прежним.

Например, вот гибкий контейнер с тремя панелями, использующий список стилей для разделителей столбцов и строк:

.flex-split {
  column-rule-width: 2px;
  column-rule-style: dashed, solid;
  column-rule-color: #d4d0c8;
}

Как показано в этом примере, row-rule и column-rule допускают одно и то же сокращенное обозначение ширины, стиля и цвета. Используйте сокращенное обозначение rule , чтобы задать оба параметра одновременно.

Новые объекты недвижимости

Однако мы не просто добавили column-rule к другим режимам компоновки и аналог для row . Мы также ввели элементы управления для точной настройки ваших декораций: как они разрываются на пересечениях, насколько они отступают от краев промежутков, когда они появляются относительно элементов и как изменять стили в промежутках. Ширина, цвет и отступы разметки также анимируются.

Синтаксис функции repeat()

Элементы оформления промежутков поддерживают repeat() для значений ширины, стиля и цвета. Это позволяет изменять оформление промежутков в краткой форме, аналогично синтаксису repeat() используемому для определения дорожек в сетке:

.settings-panel {
  row-rule: 1px solid #243352;
  row-rule-width: repeat(2, 1px), 4px;
}

Это задаёт для первых двух промежутков между строками линию шириной 1 пиксель, а для третьего — 4 пикселя, при этом интервалы циклически повторяются, если их больше, чем значений. Вы также можете передавать несколько значений напрямую без использования repeat() . Например, чередование стилей линий строк для границ часов и получасов в календаре:

.calendar {
  row-rule-width: 2px, 1px;
  row-rule-style: solid, dashed;
  row-rule-color: #e8e4df, #f0ece7;
}

Контроль декоративных надрывов

Свойства column-rule-break и row-rule-break определяют поведение декораций в местах пересечения пробелов:

• normal (по умолчанию): поведение зависит от типа контейнера. Более подробная информация содержится в спецификации .
• none : Декоративные элементы тянутся непрерывно через перекрестки.
• intersection : Декоративные элементы прерываются в местах пересечения промежутков между строками и столбцами.

Например, если вы установите rule-break на intersection в контейнере сетки, правила будут разрываться в местах пересечения разрывов, а не продолжаться дальше:

.dashboard {
  column-rule-style: solid;
  column-rule-color: #fbbf24, #34d399;
  column-rule-width: 1px, 3px;
  column-rule-break: intersection;
  row-rule: 1px solid #1e1e36;
}

Если установить rule-break в none , правила будут непрерывно выполняться через пересечения:

.grid {
  column-rule: 1px solid #5a9e9e;
  row-rule: 1px solid #c27a6b;
  rule-break: none;
}

Вы можете попробовать это значение в интерактивной среде .

Увеличивайте или уменьшайте размеры декораций.

Свойства column-rule-inset и row-rule-inset определяют, насколько далеко декоративные элементы выходят за пределы промежутка. Вы можете задать отступы со всех сторон одновременно с помощью сокращенной записи или задать асимметричные отступы с помощью column-rule-inset-cap (для конечных точек, не имеющих пересекающихся промежутков) и column-rule-inset-junction (для конечных точек, пересекающихся с другими промежутками).

В качестве значений могут использоваться длины, проценты или ключевое слово overlap-join , которое соединяет декоративные элементы с углами. Например, установка rule-inset в 5px уменьшает все декоративные элементы внутрь на 5px:

.container {
  display: flex;
  flex-wrap: wrap;
  column-rule: 1px solid #2a2a45;
  column-rule-color: #60a5fa, #34d399, #a78bfa;
  rule-inset: 5px;
  row-rule: 1px solid #2a2a45;
}

Установка rule-inset-cap равными 0px и rule-inset-junction равными 10px позволяет получить элементы оформления, которые плотно прилегают к краям контейнера, но отступают в местах пересечения. В показанной ранее демонстрации панели управления используется именно такой подход, и отступы анимируются при наведении курсора:

.dashboard {
  rule-inset-cap: 0px;
  rule-inset-junction: 10px;
  transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
  rule-inset-junction: 0px;
}

Видимость

Свойства column-rule-visibility-items и row-rule-visibility-items определяют, когда правила отображаются в зависимости от смежности элементов:

• normal (по умолчанию): Зависит от типа контейнера.
• all : Правила появляются в каждом пробеле, даже в пустых.
• Правила появляются around , где есть один или несколько смежных элементов.
• between : Правила применяются только между двумя соседними элементами.

Сокращенная запись rule-visibility-items устанавливает оба параметра одновременно. Установка rule-visibility-items в between отобразит правила только между соседними элементами:

section {
  rule: 2px solid black;
  rule-visibility-items: between;
}

С другой стороны, установка rule-visibility-items в all приведет к отображению правил во всех промежутках, даже тех, которые не имеют смежных элементов:

section {
  rule: 2px solid black;
  rule-visibility-items: all;
}

Переключите значение в демонстрационном режиме, чтобы увидеть разницу!

Оживите декорации

Ширина, цвет и отступы правил могут быть анимированы. Вы можете изменять их при наведении курсора или любом другом изменении состояния. В приведенной ранее демонстрации панели управления при наведении курсора происходит изменение цвета и отступов правил:

.dashboard {
  column-rule-color: #fbbf24, #34d399;
  rule-inset-junction: 10px;
  transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}

.dashboard:hover {
  column-rule-color: #3b82f6, #3b82f6;
  rule-inset-junction: 0px;
}

Демонстрации

Все демонстрационные версии, представленные в этом посте, доступны на демонстрационном сайте Edge .

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

Изменения, произошедшие с момента проведения пробного тестирования разработчиками.

Если вы пробовали использовать декорации в промежутках между окнами во время пробной версии для разработчиков (Chrome 139), обратите внимание на следующие изменения:

• Эта функция доступна по умолчанию; никаких дополнительных флагов не требуется.
• Названия некоторых свойств были обновлены в соответствии с последней спецификацией (например, column-rule-outset и row-rule-outset стали column-rule-inset и row-rule-inset ).
• Были добавлены свойства column-rule-visibility-items и row-rule-visibility-items .
• Добавлена ​​поддержка анимации.

Используйте украшения для щелей уже сегодня!

Декоративные элементы в промежутках между окнами работают в Chrome и Edge, начиная с версии 149. Если ваши декоративные элементы носят чисто декоративный характер, эта функция является прогрессивным улучшением; в браузерах без поддержки промежутки отображаются нормально, без видимых декоративных элементов. В настоящее время разрабатывается полифил для браузеров, которые еще не поддерживают эту функцию.

Сообщайте об ошибках в систему отслеживания ошибок Chromium . Для получения дополнительной информации см. спецификацию CSS Gap Decorations .

Полезные ссылки

• Спецификация CSS Gap Decorations
• Запись в блоге о пробной версии для разработчиков (Chrome 139)
• Объявление Edge
• Пояснение на GitHub