[csswg-drafts] [css-display-4] Relax list-item display type limitations (#12100)

EllyLoel has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-display-4] Relax list-item display type limitations ==
Using `list-style-position: outside;` with ordered lists commonly leads to issues where the `::marker` overflows the edge of the viewport because the size of the `::marker` is not always the same.

To fix this you can use `list-style-position: inside;` but then the alignment of all of the list's `::marker`s is ruined. So to fix the alignment the first thing that came to my mind ([and others](https://css-tricks.com/list-style-recipes/#aa-inside-vs-outside)) is to use subgrid like this:

```css
:is(ul, ol) {
 padding: 0;
 list-style-position: inside;
 display: grid;
 grid-template-columns: min-content 1fr;

 > li {
  align-items: baseline;
  grid-column: 1 / -1;
  display: block grid list-item;
  grid-template-columns: subgrid;

  > * {
   grid-column: 2 / -1;
  }
 }
}
```

But unfortunately according to the spec this isn't currently allowed:

> Note: In this level, as restricted in the grammar, list-items are limited to the [Flow Layout](https://www.w3.org/TR/css-display-3/#flow-layout) display types ([block](https://www.w3.org/TR/css-display-3/#valdef-display-block)/[inline](https://www.w3.org/TR/css-display-3/#valdef-display-inline)/[run-in](https://www.w3.org/TR/css-display-3/#valdef-display-run-in) with [flow](https://www.w3.org/TR/css-display-3/#valdef-display-flow)/[flow-root](https://www.w3.org/TR/css-display-3/#valdef-display-flow-root) inner types). This restriction may be relaxed in a future level of this module.
— [The note from 2.3. Generating Marker Boxes: the list-item keyword in CSS Display Module Level 3](https://www.w3.org/TR/css-display-3/#list-items:~:text=NOTE%3A%20In%20this%20level%2C%20as%20restricted%20in%20the%20grammar%2C%20list%2Ditems%20are%20limited%20to%20the%20Flow%20Layout%20display%20types%20(block/inline/run%2Din%20with%20flow/flow%2Droot%20inner%20types).%20This%20restriction%20may%20be%20relaxed%20in%20a%20future%20level%20of%20this%20module.)

This restriction means using `display: block grid list-item;` to fix the alignment issue is not allowed. So I would love to see the list-item display type limitations relaxed so this is possible!

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12100 using your GitHub account


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

Received on Friday, 18 April 2025 05:55:37 UTC