Re: [csswg-drafts] [css-gaps-1] Serializing `column-rule` shorthand from separate longhands (#12201)

Yes, just as @kbabbitt noted, there is no single "coordinatring property" among the longhand properties (`*-rule-width`, `*-rule-style` and `*-rule-color`). Per the CSSOM's rule for [serializing properties](https://www.w3.org/TR/cssom/#serializing-css-values), the situations in which I think you _cannot_ construct an equivalent shorthand are when:
1. **Unaligned auto‑repeaters**  
   If one or more longhands use an `auto` repeater in a way that doesn’t match the others you can’t form a unified shorthand.  

2. **Mixed repeater + non‑repeater**  
   A repeater is mixed with a non‑repeater within the same longhand and the non-repeater doesn't align with a non-repeater in other longhands.

3. **Co‑prime repeated values lengths**  
   Two longhands have repeated value lists whose lengths are co‑prime, so their sequences never realign.

In other cases, I think it _may_ be possible to expand the integer repeaters to the LCM of their repeat counts and serialize a hypothetically equivalent shorthand.

## Examples

### 1a. Perfectly Aligned Auto‑Repeaters → Shorthand Possible

```css
column-rule-width:  repeat(auto, 10px);
column-rule-style:  repeat(auto, solid);
column-rule-color:  repeat(auto, red);
```

All three use `repeat(auto, …)` in the same position with the same repeated values length, so they line up:

```css
column-rule: repeat(auto, 10px solid red);
```

---

### 1b. Unaligned Auto‑Repeaters → No Shorthand

```css
column-rule-width:  repeat(auto, 10px);
column-rule-style:  thin solid;
column-rule-color:  repeat(auto, red);
```

Here, only width and color use an auto‑repeater; style does not → cannot form a shorthand.

---

### 2. Mixed Repeater + Non‑Repeater

```css
column-rule-width:  repeat(3, 5px);
column-rule-style:  repeat(2, solid) dashed;
column-rule-color:  repeat(3, red);
```

`*-rule-style` has non-repeater that doesn't align with width → cannot form a shorthand.

---

### 3. Co‑Prime Repeat Lengths → No Alignment

```css
column-rule-width:  repeat(2, 10px);
column-rule-style:  repeat(3, solid hidden ridge);
column-rule-color:  repeat(2, red green);
```

`*-rule-style` list length = 3, `*-rule-color` list length = 2 (co‑prime) , so sequences never realign → cannot form a shorthand.

* Repeated Values Entries:
* style: solid hidden ridge | solid hidden ridge
* color: red green | red green | red green

---

### 4. Integer Repeaters Align via LCM → Shorthand Possible

```css
column-rule-width:  repeat(2, 10px);
column-rule-style:  repeat(3, solid);
column-rule-color:  repeat(2, red);
```

- LCM(2, 3, 2) = 6  
- Expand each to 6 entries → can form a shorthand:

```css
column-rule: repeat(6, 10px solid red);
```

### 5 Different Repeat Counts and Repeated Value Lists Lengths, Can Still Align via LCM:

```css
column-rule-width: repeat(3, 10px);
column-rule-style: repeat(2, solid hidden double ridge);
column-rule-color: repeat(4, red green );
```
* LCM (3, 2, 4): 12
* Repeated Values Entries:
* width: 10px | 10px | 10px | 10px
* style: solid hidden double ridge
* color: red green | red green

`column-rule` shorthand can still be constructed.

```css
column-rule: repeat(12, 10px solid red, 10px hidden green, 10px double red, 10px ridge green);
```


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


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

Received on Monday, 28 July 2025 20:40:01 UTC