Re: [csswg-drafts] [css-gaps-1] Grammar for expanded column-rule shorthand (#11496)

@fantasai Brainstorming help requested here.

So, we've got `gap-rule` and its longhands (color, style, width). You can specify multiple gap rules, and they layout will cycle thru those.

Naively, our normal way of spelling that is a comma-separated list, aka `gap-rule: 1px solid red, 1px solid blue;`.

But a wrinkle: we have good use-cases to be able to set gap decorations differently in different areas of the grid. (See data tables for an example - different borders between cells in different areas.)

So, uh, how do? @kbabbitt's current suggestion is to use a /-separated list for the standard case of "the whole grid uses this one list of gap decorations", so that we have commas available to separate distinct areas and give them each their own list of gap decorations.

I'm not happiest about this; it reserves commas for the *less common* case, forcing authors to use slashes most of the time (they usually won't need commas at all).

But I'm unhappy about reversing this, either: having a comma-separated list of decorations, then use /s as a *higher-level* separator to separate each area+list of gap decorations.

I've tried to think of other variants, like a functional notation to group an area specifier + gap-deco list, but can't figure out how to get that to work either, especially with the longhands.

Best I've gotten so far is to be able to give an area specifier in *each* gap-deco entry, and then group the gap-deco entries with a given area specifier during processing. But that's repetitive. :(

Maybe we need to be able to define *named gap-deco areas* in a property, and then you can just supply the names with each gap-deco entry in the list? Like:

```css
.grid {
  gap-rule-areas: --foo 1/2/3/4, --bar 5/6/7/8;
  gap-rule: 1px solid red, 2px dashed silver --foo, 2px dashed gray --foo;
}
```

This would define a single "general" gap deco (1px solid red), and then an alternating gap deco in the `--foo` area (silver vs gray).

This is theoretically the same as just "put an area specifier on each gap-deco entry", but the repetition is reduced and it's easier to see the grouping. It also means the grouping has a logical name which can be meaningful for the page.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11496#issuecomment-2625866225 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 30 January 2025 23:16:17 UTC