Опубликовано: 11 июня 2025 г.
Попрощайтесь с хаками с границами и псевдоэлементами и поприветствуйте декорирование пробелов CSS.
Команда Microsoft Edge рада сообщить, что CSS-декорации зазоров — новый способ оформления зазоров между элементами в гибких, сетчатых и многоколоночных макетах — теперь доступны для пробной версии для разработчиков в Chrome и Edge 139!
Попробуйте и поделитесь своими отзывами, чтобы помочь сформировать будущее этого API.
Полезные ссылки
Проблема
Стилизация пробелов в компонентах пользовательского интерфейса, таких как календари, карточки или сетки данных, может значительно улучшить читаемость и добавить к общей эстетике. Однако достижение этого эффекта в макетах grid и flexbox традиционно требовало неудобных обходных путей с границами, псевдоэлементами или фоновыми трюками. Эти обходные пути могут быть проблематичными по ряду причин.
- Неинтуитивно: они вводят структурные зависимости для визуального оформления, что противоречит принципам семантического HTML.
- Неудобство для пользователей: часто требуются дополнительные элементы DOM, которые могут помешать работе вспомогательных технологий, таких как программы чтения с экрана.
- Сложность в обслуживании: они требуют сложной логики компоновки и затрудняют единообразное оформление компонентов.
- Плохо для производительности: эти обходные пути могут добавлять ненужные элементы в DOM, что может привести к проблемам с производительностью.
Хотя веб-платформа уже поддерживает стилизацию пробелов с помощью свойства column-rule , в настоящее время это ограничено только многоколоночными макетами. Веб-разработчики давно просили о единообразном способе стилизации пробелов в других соответствующих типах макетов, таких как grid и flexbox.
Решение: CSS-декорации пробелов
Декорации Gap расширяют свойство column-rule для работы с другими типами макетов, такими как grid и flexbox, и вводят новое свойство row-rule для его дополнения. Это обеспечивает согласованность и новую настраиваемость в том, как оформляются пробелы в разных типах макетов.
Оформление пробелов CSS дает следующие преимущества:
- Никакого влияния на макет: украшения чисто визуальные. Они не влияют на макет или интервалы, поэтому вы можете использовать их, не опасаясь нарушить существующий дизайн.
- Синтаксис повтора: подобно CSS Grid, вы можете использовать синтаксис
repeat()для создания шаблонов оформления в разных частях контейнера, что позволяет создавать насыщенные и последовательные дизайны с минимальным использованием CSS. - Более чистая разметка: нет необходимости в дополнительных элементах или псевдоэлементах — просто задайте стили пробелам напрямую.
- Возможность настройки: новые свойства CSS, такие как
*rule-break,*rule-outsetиgap-rule-paint-orderпредоставляют больше возможностей настройки, выходящих за рамки традиционных правил оформления ширины, стиля и цвета.
Благодаря декорированию пробелов CSS стало проще, чем когда-либо, создавать визуально различимые и удобные в обслуживании макеты страниц.
Декорации Gap в действии
Чтобы поиграться с декорированием пробелов CSS уже сегодня, используйте браузер, который их поддерживает: Edge или Chrome, начиная с версии 139, и переключите флажок «Включить экспериментальные функции веб-платформы», перейдя по адресу edge://flags или chrome://flags .
Интерактивная игровая площадка для разработчиков
Чтобы опробовать различные типы макетов, в которых поддерживаются CSS-декорации пробелов, а также все новые свойства, воспользуйтесь нашей интерактивной игровой площадкой для разработчиков .
Меню бургеров
Демонстрация меню бургера показывает, как использовать свойство column-rule-break: intersection для разрыва оформления промежутков между столбцами на каждом видимом пересечении с промежутками между строками.
В демо также используется column-rule-offset: -15px для регулировки длины украшений, отодвигая их от краев каждого пересечения.
Блокнот
В демо-версии блокнота row-rule-break: none гарантирует, что оформление строк не прерывается на пересечениях — оно непрерывно идет слева направо от контейнера. С другой стороны, column-rule-break: spanning-item гарантирует, что оформление столбцов не будет закрашено за охватывающими элементами — оно начинается и заканчивается на охватывающих элементах, образуя видимое пересечение T.
Свойство row-rule использует функцию repeat() для точного управления тем, как применяются украшения пробелов в разных разделах макета. Это позволяет создать шаблон стилизации, в котором правила строк скрыты в верхнем и нижнем колонтитулах, толще вокруг основного контента и более тонкие в других местах.
Ежедневные новости CSS
Демонстрация Daily CSS News использует макет в журнальном стиле и определяет CSS-декорации зазоров в нескольких контейнерах 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 все еще реализуется в Chromium. Если вы ее протестируете, имейте в виду, что мы все еще активно работаем над ней, и что вы можете столкнуться со случаями, когда она не будет вести себя так, как ожидалось. Некоторые из текущих ограничений включают анимацию декорирования зазоров и использование очень большого количества дорожек сетки.
Если вы обнаружили ошибку или у вас есть какие-либо мысли по поводу этой функции, поделитесь своим отзывом, открыв новую ошибку Chromium .