Support for CSS Flexbox/Grid Gap Decorations

[brandonmcconnell]

Description

CSS Flexbox/Grid support for gap decorators as solution to gap borders

Plain tables and CSS columns support native borders, but no such styling exists that supports the flexible gaps of CSS Flexbox and Grid.

Mats Palmgren's drafted spec would solve this issue and provide such styling for both cases including support for border images, similar to existing support for borders in CSS.

Mozilla is already working on this: https://bugzilla.mozilla.org/show_bug.cgi?id=1725495

This has been a long-standing request with no solution but a handful of half-baked workarounds. It'd be great to have a native solution like this one adopted across all major browsers.

Rationale

• [css-grid][css-flexbox][css-multicol] Styling Gaps/Gutters w3c/csswg-drafts#2748 (comment)
• [css-align][css-grid][css-flexbox][css-multicol][css-tables] A proposal for a Gap Decorations feature w3c/csswg-drafts#6748
• https://css-tricks.com/minding-the-gap/#aa-styling-the-gap-in-flex-and-grid
• [css-multicol][css-grid][css-flexbox] CSS styling of Gaps/Gutters
  • WIP: Bug 1725495 part 1 - Add a FrameGapRuleEnumerator interface for enumerating the gap rule rects in a specific logical axis.
  • WIP: Bug 1725495 part 2 - Add CSS 'column-rule-image-repeat/slice/source' properties.
  • WIP: Bug 1725495 part 3 - Implement layout for 'column-rule-image-repeat/slice/source'.
  • WIP: Bug 1725495 part 4 - Add the corresponding 'row-*' variants for the CSS 'column-gap/rule' properties.
  • WIP: Bug 1725495 part 5 - Add CSS 'column/row-rule-image' shorthands.
  • WIP: Bug 1725495 part 6 - Replace nsDisplayColumnRule with a generalized GapRuleDisplayItem.
  • WIP: Bug 1725495 part 7 - Add CSS '[column,row]-length' and '[column,row]-[lateral,longitudinal]-inset-[start,end] properties with shorthands.
  • WIP: Bug 1725495 part 8 - Add CSS '[column,row]-longitudinal-edge-inset-[start,end] properties with shorthands.
  • WIP: Bug 1725495 part 9 - Add CSS '[column,row]-rule[-edge]*-align' and '[column,row]-rule-extent' properties.
  • WIP: Bug 1725495 part 10 - Add a few GapRuleUtils helpers to deal with rule-extent/align style values.
  • WIP: Bug 1725495 part 11 - Add nsContainerFrame::[Block,Inline]AxisRuleRectsProp frame properties for storing gapo rule nsRects for the corresponding logical axis.
  • WIP: Bug 1725495 part 12 - Add nsStyleColumn::GapRuleStyle accessor to conveniently get all the relevant gap rule style values for an axis.
  • WIP: Bug 1725495 part 13 - Implement gap rules for Flexbox containers.
  • WIP: Bug 1725495 part 14 - Implement gap rules for Grid containers (grid and subgrid, but not masonry).
  • WIP: Bug 1725495 part 15 - Implement gap rules for Grid containers with masonry layout.
  • WIP: Bug 1725495 part 16 - Implement gap rules for Table layout.
  • WIP: Bug 1725495 part 17 - Implement gap rules for table-row-group layout.
  • WIP: Bug 1725495 part 18 - Implement 'row-gap' for multi-column layout.
  • WIP: Bug 1725495 part 19 - Implement row gap rules for multi-column layout.

Specification

https://matspalmgren.github.io/css-gap-decorations/Overview.html

Tests

No tests yet, but plenty of related bugs being worked through by Mozilla (links above)

[gsnedders]

See also: w3c/csswg-drafts#6748

It's not clear to me anyone is actively working on this, however, either at Mozilla (especially now Mats is no longer at Mozilla, AFAIK) or elsewhere, which probably means no spec or implementation work is going to happen in time for this to be viable as a proposal for 2023.

[karlcow]

@tiaanl at Mozilla is now looking at the grid bugs.

[SebastianZ]

As one of the persons heavily involved in previous discussions on that topic, I'd also love to see this getting some traction again next year.

Just an additional note: The approach for styling gaps should be holistic, i.e. discussions and the experimental implementation also included multi-column and table layouts.

Sebastian

[progers]

This seems more like a feature request (a good one for sure), rather than an interop issue, no?

[brandonmcconnell]

@progers I opted for an interop issue as the feature is already spec'd and partially implemented in some browsers. However, yes, for some browsers, this would be a new addition.

[SebastianZ]

I opted for an interop issue as the feature is already spec'd

It is not, unfortunately. The spec. at https://matspalmgren.github.io/css-gap-decorations/Overview.html is inofficial and the CSS Working Group didn't resolve yet to turn it into an official spec.

and partially implemented in some browsers. However, yes, for some browsers, this would be a new addition.

The "partial implementation in some browsers" is an experimental WIP implementation for Gecko (Firefox) by @MatsPalmgren, which never actually made it into the browser.

Furthermore, the discussions in the related CSSWG issues have stalled for quite some time now.

So I need to lower the expectations here. Regarding the above, I believe this isn't going to make it into any browser engine anytime soon, much less getting interoperability between them in 2023.

Setting this as an interop goal for 2023 would be a strong signal to push this feature forward. Though - and I am very sad to say that - it would also be totally unrealistic, IMO.

Having said that, as implied in my previous comment, I will push on this and help shaping it out next year. So if everything goes well, it might end up in the interop goals for 2024. 😊🤞

Sebastian

[brandonmcconnell]

@SebastianZ That makes perfect sense to me, and if we can work towards that goal, that sounds great to me!

[nairnandu]

Thank you for proposing CSS Flexbox/Grid Gap Decorations for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. Being able to decorate gaps is an exciting idea that has been proposed multiple times at the CSS Working Group, but there is no draft specification, yet. The Interop project only includes technology that has a mature specification with automated tests to evaluate browser conformance to that spec. The next steps for this idea involve a CSSWG member finding time to draft a concrete proposal.

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

Posted on behalf of the Interop team.

[brandonmcconnell]

@nairnandu For future reference, does the draft spec need to be official and hosted by CSSWG? My reason in asking is I included a link to this draft spec: https://matspalmgren.github.io/css-gap-decorations/Overview.html

[nairnandu]

@brandonmcconnell Thank you for asking. Yes, the spec needs to be official and on one of the tracks mentioned in the proposal submission template. In this particular case, it would be a CSSWG spec on the Recommendations Track.

[brandonmcconnell]

@nairnandu Thanks!