[go: nahoru, domu]
Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[css-lists] position:marker as layout model for list-style-position:outside list item markers #3771

Open
MatsPalmgren opened this issue Mar 28, 2019 · 5 comments
Open

[css-lists] position:marker as layout model for list-style-position:outside list item markers #3771

MatsPalmgren opened this issue Mar 28, 2019 · 5 comments
Labels
css-display-4 css-lists-4

Comments

@MatsPalmgren
Copy link

https://drafts.csswg.org/css-lists-3/#position-marker

An element with position:marker counts as absolutely positioned.

Given the above quote, I have some doubt regarding using position:marker as a description of how layout works for list-style-position:outside list item markers. Making it positioned changes the stacking level in which it is painted. Given how prevalent <li> is on the web, I strongly doubt this would be web-compatible. Non-positioned content that happens to overlap a ::marker must paint on top of it.

FYI, Gecko has implemented ::marker and we made the following tweaks for it to make it compatible with the legacy rendering:

  1. when the list item has list-style-position:outside, the display value of the ::marker pseudo-element is blockified
  2. the ::marker box inline-size shrink-wraps by default
  3. the ::marker box inline-axis margins are not calculated per the CSS2 block-level algorithm (because that would typically make the inline-end margin very large and thus misposition the ::marker)

I think those tweaks are non-controversial since I think they would fall out from making it absolutely positioned anyway, as the spec suggests, so I think it's within the intent of the spec regarding the layout result. But, we do not treat it as absolutely positioned in our box tree.
@MatsPalmgren MatsPalmgren mentioned this issue Mar 28, 2019
Closed
@fantasai fantasai added the css-lists-3 Current Work label Mar 29, 2019
@fantasai fantasai changed the title [css-lists][css-pseudo] position:marker as layout model for list-style-position:outside list item markers [css-lists] position:marker as layout model for list-style-position:outside list item markers Mar 29, 2019
@fantasai
Copy link
Collaborator
fantasai commented Apr 5, 2019

Random thought: maybe marker should be a display value rather than a position value.

@jonjohnjohnson
Copy link

I still think this might emerge as a go-to outside marker solution, regardless of all this spec scheming: #2361 (comment)

@MatsPalmgren
Copy link
Author

Random thought: maybe marker should be a display value rather than a position value.

It should be a new <display-outside> value, or an additional keyword, in that case. I think it would ruin this feature if you can't specify the marker's internal layout to be grid etc. Compare table-caption/cell, which has severely limited layout because you can't specify a <display-inside> value.

::marker, table-caption, <legend> and <summary> have a lot in common in this respect. They are in-flow by default, but not quite, since they aren't flowed normally together with other children in the layout context. Semantically, they're like a third variation of "flow" (besides in-flow, out-of-flow). I wonder if we should model them in the same way for that reason. Either through <display-outside> or a new property. E.g.

<display-outside> = block | inline | run-in | marker | caption | cell | legend | summary

This would add a lot more power to authors to control the layout without having to add wrapper elements. E.g. <caption> would have display: caption flow-root by default, but you could also specify <caption style="display: caption grid"> to display its children using Grid layout.
legend | summary allows an arbitrary child to be displayed as the rendered legend/summary in a fieldset/details element.

(FYI, It would be trivial to support table captions/cells with internal grid/flex/table layout in Gecko. The only thing missing is some way to specify it in CSS.)

@MatsPalmgren MatsPalmgren mentioned this issue Apr 20, 2019
Closed
This was referenced May 16, 2019
Open
Open
@fantasai
Copy link
Collaborator

@MatsPalmgren So I totally agree with your comment above, but it's like a lot of issues in one. :) Gonna try to split them out and keep this tagged against css-lists-4 since the OP is about marker styling.

@fantasai fantasai removed css-display-3 Current Work css-lists-3 Current Work labels May 16, 2019
@MatsPalmgren MatsPalmgren mentioned this issue Nov 9, 2019
Closed
@Loirooriol
Copy link
Contributor

Random thought: maybe marker should be a display value rather than a position value.

BTW, it seems this was the case in CSS 2.0 https://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#propdef-display

@Loirooriol Loirooriol mentioned this issue Dec 8, 2019
Open
@MatsPalmgren MatsPalmgren mentioned this issue Sep 12, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-display-4 css-lists-4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jonjohnjohnson @fantasai @MatsPalmgren @Loirooriol