Skip to content

[css-display-4] Relax list-item display type limitations #12100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EllyLoel opened this issue Apr 18, 2025 · 1 comment
Open

[css-display-4] Relax list-item display type limitations #12100

EllyLoel opened this issue Apr 18, 2025 · 1 comment

Comments

@EllyLoel
Copy link

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 ::markers is ruined. So to fix the alignment the first thing that came to my mind (and others) is to use subgrid like this:

: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 display types (block/inline/run-in with flow/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

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!

@Loirooriol
Copy link
Contributor

list-style-position: outside isn't really defined for block containers (other than some handwavey nonsense from CSS2).
It's even less clear how it would behave in flex or grid layout.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants