CSS `box-decoration-break`

[jsnkuhn]

Description

Description from https://caniuse.com/?search=box-decoration

Controls whether the box's margins, borders, padding, and other decorations wrap the broken edges of the box fragments (when the box is split by a break (page/column/region/line).

At the very least it would be nice to see this finally unprefixed.

Specification

https://drafts.csswg.org/css-break/#break-decoration

Open Issues

[css-masking] Not clear how clip-path applies to fragmented elements #6383 https://github.com/w3c/csswg-drafts/issues/6383

Tests

https://wpt.fyi/results/css?label=master&label=experimental&aligned&view=subtest&q=box-decoration-break

Current Implementations

• [X] Blink
• [X] Gecko
• [X] WebKit

Standards Positions

No response

Browser bug reports

has been some movement on this in webkit recently to unprefix: https://github.com/WebKit/WebKit/pull/17007

chrome unprefix bug: https://bugs.chromium.org/p/chromium/issues/detail?id=682224

general implementation bugs: chromium: https://bugs.chromium.org/p/chromium/issues/list?q=box-decoration-break&can=2

firefox: https://bugzilla.mozilla.org/buglist.cgi?quicksearch=box-decoration-break&list_id=16705737

webkit: https://bugs.webkit.org/buglist.cgi?quicksearch=box-decoration-break

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

for -webkit-box-decoration-break https://chromestatus.com/metrics/css/timeline/popularity/414

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[bfgeek]

One important note here is that this isn't as simple as unprefixing the property. Work needs to be done to ensure this works correctly with fragmentation breaks, e.g. https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=12030

(Which neither webkit/blink support yet). Note this is why Blink hasn't unprefixed this property yet.

[jsnkuhn]

Chris Coyier lists box-decoration-break as one of his top 4 wants in this blog post: https://chriscoyier.net/2023/10/09/interop-2024-votes/

[karlcow]

One important note here is that this isn't as simple as unprefixing the property. Work needs to be done to ensure this works correctly with fragmentation breaks, e.g. https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=12030

(Which neither webkit/blink support yet). Note this is why Blink hasn't unprefixed this property yet.

Rendering of this test after removing the prefix in Safari (minibrowser with unprefixed property), Firefox Nightly, and Chrome Canary.

[karlcow]

Related https://bugs.webkit.org/show_bug.cgi?id=145808

[foolip]

Thank you for proposing CSS box-decoration-break for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year if necessary.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.