Box-Decoration-Break
- Published on:
- Categories:
- Obscure CSS 5, CSS 89
- Current music:
- 2:54 — Dawn
- Current drink:
- Green tea with bergamot, kiwi, yellow peach, orange blossom and violet flower
In the last few days, coincidentally, I saw two cases where the obscure box-decoration-break property CSS could help.
This might be a good sign that it is worth it to remind everyone about its existence!
One reason why, I think, this property is not yet well-known is that it is not “baseline”. Its standard version is implemented in Firefox and Chrome, but Safari is still using the older prefixed -webkit-box-decoration-break version.
There is a pull request to WebKit from Karl Dubost about unprefixing it, although it is a bit stale: the last time it was updated was a year ago. Hopefully, one day it will be finished!
I won’t go into details about what box-decoration-break does, as I will link to many different articles and resources about it.
Quick Resources
If you are keen to learn about the property itself before continuing, read one of these:
-
“CSS box-decoration-break” — an introductory article by Kilian Valkhof from last year’s “12 Days of Web” curated by Stephanie Eckles.
But let’s look at what were the questions that brought me to this topic.
Multi-line Padded Text
First case was a question from Jonathan Schofield about a certain cross-browser issue with some text effect. While it could be interesting to investigate the actual interop issue, I noticed that the author was likely pursuing a very specific decorative style, which would be achieved much easier with box-decoration-break.
I took the name for this section from an eleven-years-old “Multi-Line Padded Text” article by Chris Coyier. Alongside this property that was “new” at the time, Chris presented a few workarounds that worked then. Can’t wait until this property will become “newly available”.
A newer article that involved box-decoration-break for a similar, although much more elaborated effect, was “A Deep Dive into the Inline Background Overlap Problem” by Ana Tudor from this March. Which, of course, involves some SVG filters magic. Just know that the further you’ll go into the article, the more you’ll start to see the matrix, and the slower your browser will render the page. Sadly, browsers neglected SVG for a long time, including working on its performance.
Pseudo-Random SVG Underlines
Second example is something that I forgot to use when I was working on my last long-form article “Passing Data into SVG: Linked Parameters Workaround” (if you did not read it fully — I highly recommend, it contains many fun details).
That article was, in part, thanks to Ivan Reese, and after some research I proposed to use the method that I later explained in my article instead of the work-in-progress solution that he was working on.
The solution was for a tiny decorative detail of the Ink & Switch’s website — pseudo-randomized underlines for links.
Recenly, I saw one of their projects — Automerge — mentioned on Mastodon by https://piccalil.li/, which reminded if Ivan ended up using my weird SVG solution for the underlines’ implementation on Ink & Switch’s website.
It was, with a proper credit inside the SVG file used for the undelines!
It is fun to see your highly experimental technique used in practice.
When looking at the links on the page, especially on the bottom of its page, I noticed something: while in general links looked nice, when they were wrapping, they had a “hard cut” on the edges:
When I saw this, I remembered that we have box-decoration-break: clone, and immediately tried it in the dev tools:
It works! Browsers create separate fragments for each part of the wrapped links, and apply the SVG for each of them.
One other difference that we can notice: the wrapping of the last part changed — and this happened only in Firefox. Probably something to report!
Conclusion
I hope box-decoration-break will become standard sooner rather than later. There are some very fun use cases for it that I did omit in this post: maybe one day I’ll write about them as well.
This property was proposed to be included in the last year’s Interop initiative by Jason Kuhn, but not included there.
Please — play with it, see if you could use it to enhance your designs, and let browsers know that you want it to be baseline.