Команда Edge і Chromium реалізували gap decorations — підтримка в Chrome й Edge починаючи з 149
Для довгого часу веброзробникам доводилося використовувати хаки з border та псевдоелементами, щоб стилізувати проміжки між елементами в макетах на кшталт grid і flexbox. Тепер, коли gap decorations повністю підтримуються в Chrome і Edge (починаючи з версії 149), ці проміжки можна легко стилізувати з великою кількістю контролю.
Команда платформи Edge у Microsoft керувала як дизайном, так і стандартизацією цієї можливості, а реалізація поступово розгортається в усіх браузерах на базі Chromium. Для передісторії можна подивитися ранній огляд gap decorations від Patrick і детальний розбір про стабільний реліз від Javier.
У цій статті описано, що змінилося у функції з тих пір.
Актуалізація: gap decorations
Gap decorations розширюють знайоме CSS‑властивість column-rule, яка вже працює в багатоколонковому макеті (multi-column layout), і роблять її придатною для grid і flexbox. Додатково з’явилася підтримка властивості row-rule, щоб декорації могли відображатися в обох осях. І нарешті, синтаксис розширено, щоб надати більше контролю над декораціями.
Patrick раніше дав добрий огляд цієї функції, але з того часу дещо змінилося, наприклад перейменування властивостей для більшої ясності та додавання нових властивостей, продиктованих відгуками від розробників під час раннього тестування.
Ось зведення змін:
| Old | New | What this change means |
|---|---|---|
row-rule-outset |
||
column-rule-outset |
row-rule-inset |
|
column-rule-inset |
«Outset» стало «inset», і встановлення цих властивостей тепер вносить правила всередину від країв декорацій. | |
Немає тонкого контролю над тим, де застосовуються row-rule-inset і column-rule-inset |
Нові longhand‑властивості: | |
row-rule-inset-cap |
||
row-rule-inset-junction row-rule-inset-start row-rule-inset-end |
||
| і | ||
column-rule-inset-cap |
||
column-rule-inset-junction column-rule-inset-start column-rule-inset-end |
||
| для тонкого контролю. | Тепер можна незалежно inset‑ити зовнішні кінці (caps) і перетини (junctions). Також можна незалежно inset‑ити початок і кінець декорацій. | |
gap-rule-paint-order |
rule-overlap |
Властивість перейменовано для ясності. Вона контролює, як декорації накладаються там, де перетинаються row і column rules. |
| N/A | rule-visibility-items |
Нова властивість контролює, чи показувати правила поруч із порожніми областями в контейнері. |
Підтримка в браузерах
Gap decorations доступні в Chrome і Edge починаючи з версії 149, а також в інших браузерах на базі Chromium, які відповідають цим версіям.
Інші движки браузерів були відкриті до ідеї та брали участь у робочих групах стандартів, тож з часом ця можливість стане міжплатформною.
Якщо ви хочете використовувати її вже зараз, автор дає такі поради:
- Якщо ви вважаєте ці декорації прогресивним покращенням, чудово — просто почніть використовувати функцію сьогодні, і нічого не зламається в браузерах без підтримки.
- Якщо вам абсолютно потрібні gap decorations, для браузерів без підтримки розробляється polyfill.
Використання gap decorations
Достатньо слів — розглянемо демо, яке використовував Patrick у своїй статті. У прикладі додамо нові секції і використаємо найновіші можливості gap decorations по ходу.
Розпочнемо з мінімальної HTML розмітки:
<body>
<header>
<h1>My personal site</h1>
<p class="tagline">...</p>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<!-- etc. –>
</ul>
</nav>
<section id="home" class="home">
<div class="greeting">
<p class="lead">...</p>
</div>
<div class="photo">
<img src="cat.jpg" alt="A sleeping cat.">
</div>
<aside class="now">
<h3>Currently</h3>
<ul>
<li>Lorem <span>— ipsum dolor sit amet</span></li>
<!-- etc. –>
</ul>
</aside>
<div class="note">
<p>...</p>
</div>
<div class="photo">
<img src="tree.jpg" alt="An old olive tree trunk.">
</div>
</section>
<section id="blog" class="blog">
<h2>Blog</h2>
<div class="posts">
<article class="post">
<span class="date">June 2025</span>
<h3>Lorem ipsum dolor</h3>
<p>...</p>
</article>
<!-- rest of articles –>
</div>
</section>
<section id="about" class="about">
<h2>About</h2>
<div class="bio">
<img class="avatar" src="bike.jpg" alt="A bicycle leaning against a post.">
<div class="text">
<p>...</p>
<!-- etc. –>
</div>
</div>
</section>
<section id="links" class="links">
<h2>Elsewhere</h2>
<ul>
<li><a href="#">GitHub</a></li>
<!-- etc. –>
</ul>
</section>
<footer>
<p>© 2025 My personal site.</p>
</footer>
</body>
А ось початковий CSS. Сторінка — один великий grid, де row‑rules діють як роздільники секцій. Навігація — flexbox із пунктирними column‑rules.
body {
display: grid;
gap: 4rem;
margin: 2rem;
row-rule:
1rem solid #efefef,
repeat(2, 2px solid #efefef);
}
nav ul {
display: flex;
flex-wrap: wrap;
gap: 2rem;
column-rule: 2px dashed #666;
}
Будемо працювати далі на цій основі.
Крок 1: Підтримувати будь‑яку кількість секцій за допомогою repeat(auto)
У початковому CSS елемент body використовував repeat(2, 2px solid #efefef), бо сайт, з якого ми починали, мав три статичні секції. Ми додаємо нові секції і хочемо, щоб сайт автоматично адаптувався при їх додаванні.
Замінимо жорстко закодовану кількість повторів на auto repeater. Так сторінка може рости, а роздільники секцій підлаштовуються автоматично:
body {
/* ... */
row-rule:
1rem solid #efefef,
repeat(auto, 2px solid #efefef);
}
Крок 2: Декорувати проміжки flexbox у секції Home
Для секції home використаємо flexbox контейнер з обтіканням та поєднаємо текст і зображення. Елемент з класом .home задає flex‑макет, а різні піделементи використовують різні flex-basis:
.home {
display: flex;
flex-wrap: wrap;
gap: 3rem;
}
.home > * {
flex: 1 1 12.5rem;
}
.home .greeting {
flex-basis: 26.25rem;
}
.home .note {
flex-basis: 22.5rem;
}
Ось секція home без декорацій:
Щоб додати «магію» gap decorations, використаємо row-rule і column-rule:
.home {
/* ... */
row-rule: 2px solid #999;
column-rule: 2px solid #999;
}
До речі, оскільки горизонтальні й вертикальні правила використовують однакове значення, їх можна скоротити новим шорт‑хендом rule і написати в один рядок:
.home {
/* ... */
rule: 2px solid #999;
}
Отримаємо це:
За замовчуванням column‑rules тягнуться на всю висоту кожного flex‑ряду. Оскільки в нас gap: 3rem, два flex‑ряди відокремлені. Щоб колонки зустрічалися з рядовим правилом, застосуємо column-rule-inset зі значенням overlap-join. Це значення з’єднує сусідні правила в місцях перетину, залишаючи зовнішні кінці (caps) на 0.
.home {
/* ... */
column-rule-inset: overlap-join;
}
Крок 3: Декорувати елементи, що охоплюють кілька клітинок, у секції Blog
Для секції Blog ми використаємо grid, щоб можна було змусити окремі пости span‑ити кілька колонок чи рядків для акценту.
.posts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
.post.feature { grid-column: span 2; }
.post.tall { grid-row: span 2; }
Ось як секція виглядає без декорацій:
Як і в секції home, додамо gap decorations:
.posts {
/* ... */
rule: 2px solid #999;
}
І отримаємо:
Оскільки не подобаються лінії поруч із порожніми клітинками, можна позбутися їх за допомогою нової властивості rule-visibility-items:
.posts {
/* ... */
rule-visibility-items: around;
}
З цим значенням gap decorations малюватимуться лише тоді, коли принаймні одна сторона проміжку має вміст, тож проміжок між двома порожніми клітинами в останньому рядку залишиться чистим замість того, щоб лінія «звисала» в порожній області:
Подібно до попереднього кроку, тут також бажані акуратні з’єднання між декораціями, тому використаємо overlap-join значення для rule-inset:
.posts {
/* ... */
rule-inset: overlap-join;
}
Ось результат:
Крок 4: Inset‑ити декорації в секції About
У секції About треба кругле фото поруч із текстом, розділені лінією. Тут же протестуємо нову можливість зменшувати розмір gap decorations.
Спочатку використаємо flexbox контейнер, щоб фото й біографія були поруч:
.bio {
display: flex;
align-items: center;
gap: 2.5rem;
}
Отримаємо такий собі media‑картчик, який часто трапляється на сайтах:
Тепер застосуємо gap decoration:
.bio {
/* ... */
column-rule: 2px solid #999;
}
Отримаємо:
Цього разу хочеться більше «повітря», тож використаємо column-rule-inset, щоб зменшити довжину роздільної лінії:
.bio {
/* ... */
column-rule-inset: 2.5rem;
}
Ось результат:
Крок 5: Розділити посилання
Для секції Links, де посилань багато, їх організують у grid:
.links ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem 2.5rem;
}
Ось як це виглядає:
Додамо gap decorations, але зробимо рядові й колонкові правила різними:
.links ul {
/* ... */
row-rule: 1px solid #c9a96a;
column-rule: 3px solid #6a707a;
}
Якщо придивитися, товстіші column‑rules знаходяться позаду тонших row‑rules. Щоб контролювати порядок заливки і мати колонки поверх рядків, використаємо властивість rule-overlap:
.links ul {
/* ... */
rule-overlap: column-over-row;
}
Ця властивість дозволяє обрати, чи малювати колонки поверх рядків, чи рядки поверх колонок.
Отримаємо це:
Нарешті, щоб колонкові правила були трохи коротші за висоту гріда, але не розділялися по кожному рядку, використаємо column-rule-inset-cap, що контролює краї декорацій, які не є перетинами чи вузлами:
.links ul {
/* ... */
column-rule-inset-cap: 1.75rem;
}
Ось результат:
Крок 6: Зібрати все разом
Ось і все — наша вебсторінка готова. Можна переглянути live‑приклад і вихідний код:
Дізнатись більше
Спробуйте gap decorations. Найшвидший шлях — через інтерактивний playground, але також є багато інших демо. Пограйтеся з кожною властивістю і спостерігайте, як проміжки реагують у реальному часі.
Добрим джерелом для вивчення є сторінка з документацією MDN (розробляється на момент написання цієї статті) для додаткового довідкового матеріалу.
Подяки
Gap decorations з’явилися завдяки групі людей із глибокою турботою про веб у командах Edge і Chrome та у CSS Working Group. Особлива подяка Javier Contreras Tenorio, Kevin Babbitt, Alison Maher, Ian Kilpatrick і Patrick Brosset.
Джерело: CSS-Tricks