Dekoracje przerw: Już jest w Chromium

Javier Contreras

Sam Davis Omekara

Data publikacji: 15 maja 2026 r.

Dekoracje przerw CSS są dostępne w Chrome i Edge od wersji 149. Stylizuj odstępy między układami siatki, flexbox i wielokolumnowymi bez użycia obramowań ani pseudoelementów. Ta funkcja została opracowana we współpracy zespołów Microsoft Edge i Google Chrome.

Problem

Stylizowanie odstępów między elementami układu zawsze wymagało obejść. Obramowania poszczególnych elementów, pseudoelementów i obejścia dotyczące tła. Te podejścia wiążą się z kosztami:

• Zależą one od struktury. Dodanie wizualnego separatora oznacza zmianę kodu lub napisanie selektorów dla konkretnych elementów.
• Utrudniają korzystanie z ułatwień dostępu. Dodatkowe elementy DOM pojawiają się w drzewie dostępności, mimo że nie powinny.
• Trudno je utrzymać. Elastyczne układy stron naruszają założenia, na których opiera się stylizacja odstępów.
• Obniżają wydajność. Im więcej węzłów DOM, tym więcej pracy związanej z układem.
• Są mało ergonomiczne. Aby wszystko działało prawidłowo, często trzeba było wykonywać złożone obliczenia geometryczne.

Właściwość column-rule obsługuje dekoracje przerw w układach wielokolumnowych, ale siatka i flexbox nie miały wcześniej równoważnej funkcji.

Rozwiązanie

Kontenery siatki i flexbox akceptują teraz column-rule. Nowa właściwość row-rule obsługuje odstępy poziome. Te dekoracje mają charakter wyłącznie wizualny i nie wpływają na istniejące układy. Jeśli używasz właściwości column-rule w układach wielokolumnowych, dotychczasowe działanie pozostaje bez zmian.

Oto na przykład kontener elastyczny z 3 panelami, w którym użyto listy stylów dla reguł kolumn i wierszy:

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

Jak widać na tym przykładzie, zarówno row-rule, jak i column-rule akceptują ten sam skrót dla szerokości, stylu i koloru. Użyj skrótu rule, aby ustawić oba parametry jednocześnie.

Nowe usługi

Nie tylko przenieśliśmy column-rule do innych trybów układu i dodaliśmy odpowiednik row. Wprowadziliśmy też opcje dostosowywania dekoracji: jak są dzielone na skrzyżowaniach, jak daleko są odsunięte od krawędzi przerw, kiedy pojawiają się w stosunku do elementów i jak zmieniać style w przerwach. Szerokość, kolor i wstawki reguły również można animować.

Składnia repeat()

Dekoracje przerw obsługują repeat() w przypadku wartości szerokości, stylu i koloru. Dzięki temu możesz zmieniać dekoracje w przypadku przerw w krótkim formularzu, podobnie jak w przypadku składni repeat() używanej do definiowania ścieżek w siatce:

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

W ten sposób pierwsze 2 przerwy między wierszami będą miały regułę 1 piksela, a trzecia – 4 piksele. Jeśli przerw będzie więcej niż wartości, cykl się powtórzy. Możesz też przekazywać wiele wartości bezpośrednio bez użycia znaku repeat(). Na przykład style reguł naprzemiennych wierszy dla granic godzin i półgodzin w kalendarzu:

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

Kontrolowanie przerw w dekoracji

Właściwości column-rule-break i row-rule-break określają, jak dekoracje zachowują się w miejscach przecięcia przerw:

• normal (domyślnie): zachowanie zależy od typu kontenera. Więcej informacji znajdziesz w specyfikacji.
• none: Dekoracje są wyświetlane w sposób ciągły na skrzyżowaniach.
• intersection: Dekoracje są przerywane w miejscach, w których przecinają się przerwy między wierszami i kolumnami.

Jeśli na przykład w kontenerze siatki ustawisz rule-break na intersection, reguły będą się przerywać na przecięciach przerw, zamiast kontynuować:

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

Jeśli ustawisz wartość rule-break na none, reguły będą działać nieprzerwanie na skrzyżowaniach:

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

Możesz wypróbować tę wartość w interaktywnym narzędziu.

Wydłużanie i skracanie dekoracji

Właściwości column-rule-inset i row-rule-inset określają, jak daleko dekoracje rozciągają się w szczelinie. Możesz ustawić wcięcia ze wszystkich stron jednocześnie za pomocą skrótu lub określić wcięcia asymetrycznie za pomocą column-rule-inset-cap (w przypadku punktów końcowych, które nie mają przecinających się przerw) i column-rule-inset-junction (w przypadku punktów końcowych, które przecinają się z innymi przerwami).

Wartości mogą być długościami, wartościami procentowymi lub słowem kluczowym overlap-join, które łączy dekoracje przerw w narożnikach. Na przykład ustawienie wartości rule-inset na 5 pikseli powoduje zmniejszenie wszystkich dekoracji o 5 pikseli do wewnątrz:

.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;
}

Ustawienie wartości rule-inset-cap na 0 pikseli i rule-inset-junction na 10 pikseli powoduje, że dekoracje przylegają do krawędzi kontenera, ale są wcięte w miejscach przecięcia. W prezentacji panelu, którą widzieliśmy wcześniej, zastosowano to podejście, a wstawki są animowane po najechaniu na nie kursorem:

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

Widoczność

Właściwości column-rule-visibility-items i row-rule-visibility-items określają, kiedy reguły mają się pojawiać w zależności od sąsiedztwa elementów:

• normal (domyślnie): zależy od typu kontenera.
• all: reguły pojawiają się w każdej przerwie, nawet w pustych.
• around: Reguły pojawiają się wszędzie tam, gdzie znajduje się co najmniej 1 sąsiadujący element.
• between: Linie pojawiają się tylko między dwoma sąsiednimi elementami.

Skrót rule-visibility-items ustawia oba te parametry jednocześnie. Ustawienie wartości rule-visibility-items na between spowoduje wyświetlanie reguł tylko między sąsiednimi elementami:

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

Z kolei ustawienie wartości rule-visibility-items na all spowoduje wyświetlanie reguł w każdej przerwie, nawet w przypadku braku sąsiadujących elementów:

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

Przełącz wartość w demonstracji na żywo, aby zobaczyć różnicę.

Animowanie dekoracji

Szerokość, kolor i wstawki linii można animować. Możesz je zmieniać po najechaniu kursorem lub w dowolnym innym momencie zmiany stanu. W demonstracji panelu informacyjnego pokazanej wcześniej kolory reguł i wstawki zmieniają się po najechaniu kursorem:

.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;
}

Prezentacje

Wszystkie wersje demonstracyjne pokazane w tym poście są dostępne w witrynie demonstracyjnej Edge.

Post na blogu dotyczący wersji próbnej dla deweloperów zawiera kilka dodatkowych wersji demonstracyjnych, w tym interaktywny plac zabaw, menu burgera, układ notatnika i układ w stylu magazynu z siatką sudoku.

Zmiany od czasu okresu próbnego dla deweloperów

Jeśli w trakcie testów dla deweloperów (Chrome 139) używasz dekoracji przerw, zwróć uwagę na te zmiany:

• Ta funkcja jest domyślnie dostępna i nie wymaga flag.
• Zaktualizowaliśmy nazwy niektórych właściwości, aby były zgodne z najnowszą specyfikacją (np. column-rule-outset i row-rule-outset zmieniliśmy na column-rule-inset i row-rule-inset).
• Dodano właściwości column-rule-visibility-items i row-rule-visibility-items.
• Dodano obsługę animacji.

Użyj dziś dekoracji luk

Dekoracje przerw działają w Chrome i Edge od wersji 149. Jeśli dekoracje przerw mają charakter wyłącznie dekoracyjny, funkcja ta jest progresywnym ulepszaniem. W przeglądarkach, które jej nie obsługują, przerwy są renderowane normalnie, bez widocznych dekoracji. W przypadku przeglądarek, które jeszcze nie obsługują tej funkcji, opracowujemy polyfill.

Błędy można zgłaszać w narzędziu do śledzenia błędów Chromium. Więcej informacji znajdziesz w specyfikacji dekoracji przerw w CSS.

Przydatne linki

• Specyfikacja dekoracji CSS Gap Decorations
• Wpis na blogu o wersji próbnej dla programistów (Chrome 139)
• Ogłoszenie Edge
• Wyjaśnienie na GitHubie