Ach te internety…

Zbliżenie pudełka z prezentami w kształcie czerwonego serca na niebieskim stole

Właściwość box-decoration-break w CSS – jak działa przy łamaniu elementów

Wiktor Sadecki 12 min. czytania

Właściwość box-decoration-break w CSS pozwala kontrolować, jak zachowują się tło, obramowanie, marginesy, cienie i wypełnienie elementu, kiedy jego pudełko zostaje podzielone na fragmenty – np. przy zawijaniu tekstu, w układzie wielokolumnowym albo podczas podziału na strony w druku. Dzięki niej decydujesz, czy dekoracje mają być traktowane jak jedno ciągłe pudełko, czy powielane dla każdego fragmentu osobno.

Poniżej znajdziesz rozbudowane omówienie tej właściwości, z przykładami, zastosowaniami w layoucie i perspektywą dostępności.

1. Czym jest fragmentacja pudełek w CSS?

W codziennym kodowaniu często zakładamy, że element = jedno pudełko. W praktyce przeglądarka może to pudełko podzielić na kilka fragmentów (ang. fragments), a każdy z nich jest renderowany osobno.

Do fragmentacji dochodzi m.in. gdy:

  • element inline (np. link) zawija się na wiele linii,
  • blokowy element w układzie wielokolumnowym rozciąga się na kilka kolumn,
  • element jest dzielony między strony w trybie druku lub w paginacji (np. EPUB).

Każdy kawałek wyrenderowanego elementu nazywa się fragmentem. Problem do rozwiązania brzmi: czy obramowanie powinno być ciągłe, jakby wszystko było jednym pudełkiem, a dopiero potem „przeciętym”, czy każdy fragment ma dostać własne obramowanie i tło, tak jakby był osobnym elementem?

Na to pytanie odpowiada box-decoration-break.

2. Co kontroluje box-decoration-break?

Specyfikacja i dokumentacja przeglądarek określa, że box-decoration-break wpływa na sposób, w jaki stosowane są dekoracje pudełka, gdy jest ono fragmentowane. Dotyczy to m.in. następujących właściwości:

  • background – tło elementu (kolor, obraz, gradient);
  • padding – wewnętrzne wypełnienie;
  • border – klasyczne obramowanie;
  • border-image – obraz używany jako ramka;
  • box-shadow – cień pudełka;
  • margin – zewnętrzne odstępy;
  • clip / clip-path – przycinanie zawartości/ramki.

Pośrednio wpływa też na efekty takie jak border-radius, który jest stosowany zależnie od tego, czy dekoracje traktujemy jako całość, czy osobno dla fragmentów.

3. Składnia i dostępne wartości

Składnia jest prosta:

box-decoration-break: slice | clone;

Dostępne wartości: slice to wartość domyślna, a clone klonuje dekoracje dla każdego fragmentu jak dla osobnego pudełka.

box-decoration-break jest częścią modułu CSS Fragmentation Module Level 3.

4. box-decoration-break: slice – domyślne zachowanie

Przy box-decoration-break: slice przeglądarka traktuje element tak, jakby był jednym spójnym pudełkiem, a dopiero potem „przycina” je na fragmenty.

Konsekwencje są następujące:

  • obramowanie, padding i margines są traktowane jako przynależne do jednego pudełka, więc na linii podziału nie okalają fragmentów dookoła,
  • border-radius jest stosowany tylko na czterech rogach całego pudełka, a nie w miejscach przecięcia,
  • tło (background i border-image) jest renderowane tak, jakby pudełko nie zostało podzielone – obraz tła nie jest rysowany osobno w każdym fragmencie.

Efekt wizualny: element wygląda tak, jakby został najpierw wyrenderowany w całości, a potem „pocięty” – na linii cięcia nie ma dodatkowego obramowania ani cienia, a tło jest ciągłe.

<p>
Tekst akapitu z <a class="link" href="#">długim linkiem, który zawinie się do drugiej linii</a> w treści paragrafu.
</p>
.link {
background: #fffa9e;
border-radius: 9999px;
padding: 0.15em 0.6em;
box-decoration-break: slice; /* domyślnie i tak tak będzie */
}

Jeśli link złamie się na dwie linie:

  • tło będzie wyglądało jak jeden długi „marker”,
  • zaokrąglone rogi pojawią się tylko na początku pierwszej linii i na końcu ostatniej,
  • w środku (na przełamaniu linii) tło będzie miało prostą krawędź.

To przypomina klasyczne podkreślanie tekstu markerem – wizualnie spójne, ale bez osobnych „tabletek” na każdej linii.

5. box-decoration-break: clone – dekoracje dla każdego fragmentu

Przy box-decoration-break: clone każdy fragment jest traktowany jak osobny element z własnymi dekoracjami.

W praktyce: każdy fragment ma własne obramowanie, wypełnienie, margines, cień i zaokrąglenie rogów; tło (background) jest rysowane osobno dla każdego fragmentu, więc obraz z background-repeat: no-repeat może pojawić się wielokrotnie – po jednym razie na fragment.

.link {
background: #fffa9e;
border-radius: 9999px;
padding: 0.15em 0.6em;
box-decoration-break: clone;
}

Jeśli link złamie się na dwie linie:

  • każda linia będzie miała własną „pigułkę” z zaokrąglonymi rogami,
  • obramowanie (jeśli ustawione) otoczy każdą linię osobno,
  • cień pudełka będzie osobny dla każdej linii.

To idealne np. dla wieloliniowych przycisków, odznak i tagów – dekoracja wygląda estetycznie w każdej linii.

6. Porównanie slice vs clone

Poniżej znajdziesz zestawienie najważniejszych różnic między obiema wartościami:

Cecha slice (domyślne) clone
Sposób traktowania fragmentów jeden ciągły box, później „przecięty” każdy fragment jak osobne pudełko z dekoracją
Obramowanie (border) nie domyka się wokół fragmentów na linii cięcia każdy fragment ma pełne obramowanie dookoła
Wypełnienie (padding) nie jest dodawane „na krawędzi cięcia” każdy fragment ma własny padding, również na początku/końcu linii
Zaokrąglenie rogów (border-radius) tylko na czterech krańcach całego boxa na krawędziach każdego fragmentu; każda linia ma własne zaokrąglone rogi
Tło (background) jeden ciągły obszar tła; obraz nie jest powielany na fragmenty tło rysowane osobno na każdym fragmencie; obraz no-repeat może pojawić się wiele razy
Cień (box-shadow) jeden cień dla całości osobny cień dla każdego fragmentu
Typowy efekt wizualny wygląda jak przecięty marker każda linia/kolumna/strona wygląda jak osobna „odznaka” lub przycisk

7. Typowe zastosowania w layoutach

Wieloliniowe linki i przyciski

W wielu projektach linki przypominają przyciski – mają tło, zaokrąglone rogi i ramkę. Gdy tekst zawinie się na dwie linie, domyślne slice może wyglądać jak jedna kapsułka przecięta w połowie, z prostą krawędzią pośrodku i zaokrągleniami tylko na początku i końcu.

Zastosowanie:

a.button-like {
display: inline;
background: #2563eb;
color: #fff;
border-radius: 9999px;
padding: 0.4em 0.8em;
text-decoration: none;
box-decoration-break: clone;
}

Dzięki clone:

  • każda linia linku wygląda jak osobny, kompletny przycisk,
  • wizualnie jest to spójniejsze w interfejsach przypominających aplikacje,
  • łatwiej zachować konsekwentny styl na małych ekranach, gdzie zawijanie jest częste.

Akapity w układzie wielokolumnowym

W layoutach magazynowych z użyciem column-count lub column-width ten sam akapit może przechodzić przez kilka kolumn. Przy slice tło akapitu jest ciągłe (jakby całość była jedną kolumną), a obramowanie może wyglądać nienaturalnie na krawędziach kolumn.

Przy clone każda kolumna dostaje pełne obramowanie i tło fragmentu, dzięki czemu można tworzyć układy, w których każdy fragment treści jest „kaflem” w kolumnie.

Przykład:

.article {
column-count: 2;
column-gap: 2rem;
}
.highlighted {
background: #fef3c7;
border: 1px solid #f59e0b;
box-decoration-break: clone;
}

Cytaty, wyróżnienia i odznaki w treści

Dłuższe cytaty lub wyróżnione fragmenty tekstu (np. „ważne”) często mają dekoracyjne tło i ramki. Przy slice efekt w miejscu przełamania może być mniej estetyczny. clone sprawdza się, gdy chcesz, aby każdy fragment miał pełne ramki i rogi oraz wyglądał jak zestaw „kart”, a nie jeden rozcięty prostokąt.

8. Zachowanie tła, obrazów i cieni

Tło z obrazem (background-image)

Przy clone tło jest rysowane od nowa dla każdego fragmentu; obraz z background-repeat: no-repeat może więc pojawić się w każdym fragmencie osobno.

.badge {
background: url(icon.svg) no-repeat 0 50%;
padding-left: 2rem;
box-decoration-break: clone;
}

Jeśli .badge złamie się na dwie linie, w każdej linii może pojawić się osobna ikonka po lewej – czasem to zamierzony efekt (np. dla ikon list), ale bywa niepożądanym powieleniem. Przy slice obraz tła zachowuje się jak w jednym, niepodzielonym pudełku – pojawia się tylko raz.

Cienie (box-shadow)

Przy clone każdy fragment ma własny cień, więc cień zostanie powtórzony np. pod każdą linią linku i może dawać efekt „schodków” przy większych rozmyciach. Przy slice cień jest liczony raz dla całego elementu.

9. box-decoration-break a dostępność

Choć box-decoration-break nie zmienia logiki DOM ani obszaru klikalnego, to ma istotny wpływ na percepcję wizualną, a więc pośrednio na dostępność.

Stany focusu i klikalność elementów interaktywnych

Dla użytkowników korzystających z klawiatury kluczowe jest wyraźne zobaczenie, który element ma focus. Przy złamaniu długiego linku na kilka linii, slice może sprawić, że dekoracja nie otacza wyraźnie każdego fragmentu, a przy clone outline/focus może pojawić się wokół każdej linii, co bywa czytelniejsze.

a {
outline: 2px solid #2563eb;
outline-offset: 3px;
box-decoration-break: slice; /* domyślnie */
}

W praktyce warto testować wieloliniowe linki i przyciski z klawiaturą oraz sprawdzać, czy wizualne zaznaczenie focusu jest czytelne niezależnie od zawijania linii.

Postrzeganie obszaru klikalnego

Choć obszar klikalny się nie zmienia, to przy slice dekoracje mogą sugerować mniejszy obszar (np. gdy tło lub ramka nie obejmują środka w miejscu podziału). Lepsza zbieżność między wizualnymi i faktycznymi granicami klikalności bywa łatwiejsza do osiągnięcia z clone, które otacza każdą linię wyraźną dekoracją.

Czytelność wyróżnień

Dla części użytkowników (np. z zaburzeniami koncentracji lub wzroku) ciągłe tło pod tekstem ułatwia śledzenie wiersza i pełni rolę „markera”. Wtedy slice bywa korzystniejsze, bo tło jest ciągłe w obrębie całego fragmentu, bez wizualnego rozbijania na kapsułki.

Wybór między slice a clone powinien wynikać nie tylko z estetyki, ale również z czytelności i jasności informacji.

10. Obsługa w przeglądarkach

Stan specyfikacji i wsparcie

Z dokumentacji i tabel kompatybilności wynika, że:

  • box-decoration-break jest częścią modularyzacji CSS, a jego wsparcie pojawiało się stopniowo,
  • nowoczesne przeglądarki desktop i mobilne (Chrome, Edge, Firefox, Safari) zapewniają wsparcie dla tej właściwości, w tym wartości clone w kontekście fragmentacji inline i blokowej,
  • w Chrome wsparcie dla box-decoration-break: clone w scenariuszach inline i block zostało ogłoszone w wersji 130,
  • starsze przeglądarki (szczególnie Internet Explorer i bardzo stare wersje innych silników) nie obsługują tej właściwości lub obsługują ją częściowo.

Aktualne tabele kompatybilności potwierdzają szerokie wsparcie w nowoczesnych przeglądarkach, z wyjątkiem starszych wersji i przestarzałych silników.

Stare prefiksy

Historycznie niektóre przeglądarki WebKit/Blink implementowały tę funkcjonalność pod nazwą -webkit-box-decoration-break. Dziś w nowych projektach stosuj nieprefiksowaną wersję, a prefiks dodawaj tylko, gdy musisz wspierać bardzo stare przeglądarki.

Strategia bezpiecznego użycia

Ponieważ domyślne zachowanie (slice) jest logiczne i akceptowalne, używaj box-decoration-break: clone jako progresywnego ulepszania:

  1. zaprojektuj styl tak, by wyglądał poprawnie przy domyślnym slice,
  2. dodaj box-decoration-break: clone, aby poprawić estetykę w nowoczesnych przeglądarkach,
  3. w razie potrzeby użyj @supports.

@supports (box-decoration-break: clone) {
.button-like {
box-decoration-break: clone;
}
}

11. Praktyczne przykłady

<a href="#" class="cta">
Zamów dostęp do&nbsp;pełnej wersji serwisu już dziś
</a>
.cta {
display: inline;
font-weight: 600;
background: #2563eb;
color: #fff;
border-radius: 9999px;
padding: 0.5em 1em;
text-decoration: none;
line-height: 1.4;
box-decoration-break: clone;
}

Na wąskich ekranach, gdy przycisk CTA złamie się na 2–3 linie, każda linia wygląda jak część spójnego przycisku z pełnymi zaokrągleniami.

Wyróżnienie tekstu w wielokolumnowym artykule

<article class="article">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p class="note">Ważna uwaga: pamiętaj, aby testować swoje strony w trybie wysokiego kontrastu oraz ze zwiększonym powiększeniem przeglądarki.</p>
<p>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus...</p>
</article>
.article {
column-count: 2;
column-gap: 2rem;
}
.note {
background: #ecfeff;
border: 2px solid #06b6d4;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
box-decoration-break: clone;
}

Jeśli .note przejdzie z jednej kolumny do drugiej, w każdej kolumnie jej fragment ma pełne obramowanie i zaokrąglone rogi, co wizualnie przypomina dwa sąsiadujące „kafelki”.

Styl wydruku dla ważnych akapitów

@media print {
.print-highlight {
border-left: 4px solid #000;
padding-left: 1rem;
box-decoration-break: clone;
}
}

Jeśli wydłużony akapit z .print-highlight zostanie podzielony między strony, każda strona zachowa spójną dekorację po lewej, co ułatwia zrozumienie ciągłości treści.

12. Dobre praktyki projektowe

  • zaczynaj od slice – domyślne zachowanie jest przewidywalne, a layout powinien być poprawny bez dodatkowych założeń,
  • używaj clone tam, gdzie dekoracja jest semantycznie powiązana z każdym fragmentem (np. wieloliniowe przyciski, badge, znaczniki statusu),
  • testuj w kontekście dostępności – sprawdzaj focus klawiatury na wieloliniowych linkach oraz weryfikuj czytelność wyróżnień przy powiększeniu, zawijaniu i w trybie druku,
  • uważaj na background-image z no-repeat przy clone – niechciane powielanie ikon może wprowadzać użytkownika w błąd,
  • sprawdzaj zachowanie w układach wielokolumnowych i druku – tam fragmentacja jest najbardziej widoczna.

Właściwie użyte box-decoration-break: slice i box-decoration-break: clone dają dużą kontrolę nad spójnością wizualną i czytelnością w różnych warunkach – od wąskich ekranów, przez układy magazynowe, po wydruk.

Podobne artykuły