[CSS Gap Decorations] Proposal for restructuring the rule syntax + Extending the -outset/-offset property

[RexGalilae]

Chief Concerns

Usage of row- and column- prefixed property names

.varying-widths {
  /*... */
  row-rule: 5px solid black / repeat(auto, 1px solid #666) / 3px solid black;
}

The current proposal for drawing separator rules between Flexbox and Grid items use row- and column- prefixes. This approach is physically dependent and may not be as flexible when considering writing-mode and layout agnosticism. In most cases, developers won't find the need to style vertical and horizontal rules differently.

Stylistically, this isn't too reminiscent of more familiar and related modern CSS properties like the border property. This might cause early adopters and new developers to often stumble upon the wrong syntax when mentally switching between using border and rule properties, especially if they're building flexboxes instead of grids.

Enforced symmetry in the -outset / -offset property

This is more of an opportunity than a concern as the proposed spec by Microsoft also potentially could allow the rule-offset property to be asymmetric. To be honest, a very weak concern at worst since the -outset property proposal is pretty solid and well thought out already.

A number of UX designers like to play around with the size of the separators relative to the grid itself but can also want to align the separators to the baseline without extending them all the way vertically (Case #3 above). Oftentimes, this can result in no-so-granular cases like the ones illustrated in the article where the *-rule-break property was hinted at. Hence, we might need a new property to allow developers to easily implement such design requirements.

Proposal

I suggest we take a page from the border book

Using rule shorthand with additional rule-block and rule-inline properties

This ensures layout agnosticism, preventing users from rewriting rules for responsive flexboxes and grids that can go from a single row to a single column layout depending on the viewport size.

Before

.my-flex-container {
	display: flex;
	flex-wrap: wrap;
	row-rule: 5px solid black;
	column-rule: 5px solid black;
}

After

.my-flex-container {
	display: flex;
	flex-wrap: wrap;
	rule: 5px solid black;
}

Or, if you still want to do rows and columns separately,

.my-flex-container {
	display: flex;
	flex-wrap: wrap;
	rule-inline: 5px solid black;
	rule-block: 2px solid red;
}

rule-offset property

Based on the exposition I've given in the previous section, this is quite self-explanatory. Trying to respect layout agnosticism, we can define this property like so, very loosely taking inspiration from outline-offset and margin and padding rules,

.my-flex-container {
	display: flex;
	flex-wrap: wrap;
	rule: 5px solid black;
        rule-offset: 2px; /* all directions, symmetric */
        rule-offset: 2px 4px; /* block symmetric, inline symmetric */
        rule-offset: 2px 1px 4px 2px; /* block break and outset, inline break and outset */
}

Or, if you want to define the offsets for vertical and horizontal separators separately (no pun intended),

.my-flex-container {
	display: flex;
	flex-wrap: wrap;
	rule: 5px solid black;
	rule-offset-block: 2px 1px; /* block break and outset */
	rule-offset-inline: 4px 2px; /* inline break and outset */
}

Not only is this more extensible and general than the proposed *-rule-break and *-rule-outset rules, allowing pixel level control of these properties in any direction. It also uses a much more familiar syntax and structure.

Final Words

Really excited at this new proposal! I hope we can also make it resemble more mature and established CSS rules to allow easy adoption and keep the syntax consistent. Also see quite a bit of opportunity for extending this property even further. Would like to know your thoughts!

[kbabbitt]

Thank you for the detailed and thoughtful feedback!

Regarding the row- and column- prefixes: In the discussion for the original proposal, it was pointed out that "row" and "column" are logical terms in Flexbox and Grid. Additionally, the row- and column- prefixes match the names of the properties used to define the gaps themselves: row-gap and column-gap.

The responsive flexbox case is also important. My current thinking is that presumably, an author would already have a media query set up to condition flex-direction at least, and perhaps other properties such as row-gap vs. column-gap, so I wouldn't expect it to be too cumbersome to also condition row-rule vs. column-rule. If there's a use case where that thinking doesn't fit, I'd be interested to know about it.

Regarding enforced symmetry in the -outset properties: Thanks for calling this out and giving a concrete example with illustrations; it's very helpful. I'll consider that use case as part of w3c/csswg-drafts#12024.

Again, really appreciate the detailed comment with examples!