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.

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

[css-flexbox][css-grid] order property definition only mentions "flex items" #5865

Closed
juliandescottes opened this issue Jan 13, 2021 · 9 comments
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-display-3 Current Work css-flexbox-1 Current Work css-grid-1

Comments

@juliandescottes
Copy link

juliandescottes commented Jan 13, 2021

I was looking for the list of elements to which the "order" CSS property applies to, and the only one I found was https://www.w3.org/TR/css-flexbox/#order-property

It says order "Applies to: flex items", but order also applies to grid items (per https://www.w3.org/TR/css-grid/#order-property). Maybe the property definition should be updated to mention it also applies to grid items?

@SebastianZ
Copy link
Contributor

Maybe it should even be moved out of the Flexbox specification into one, which both specs refer to, maybe extend CSS Box Alignment's scope to cover it, or a totally new one that also includes z-index from CSS 2.

But I agree that as a first step, the Flexbox definition should include that it also applies to grid items.

Sebastian

@fantasai
Copy link
Collaborator

CSS Display might be another candidate for the property, maybe a better fit than a stacking context or alignment spec.

@SelenIT
Copy link
Collaborator

SelenIT commented Jan 17, 2021

To me, alignment seems a slightly better choice than display spec, because the behavior of order is affected by the display value of the container, not the elements themselves, similarly to how alignment properties are, and the alignment spec already has a section for the behavior of alignment properties in different formatting contexts/schemes. Or maybe visual and non-visual ordering of items is worth its own distinct module, perhaps combined with spatial navigation and related a11y aspects?

@Loirooriol
Copy link
Contributor

order reorders boxes, so CSS Box might also be a candidate.

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed Order property definition, and agreed to the following:

  • RESOLVED: Move order property to Display module
The full IRC log of that discussion <fantasai> Topic: Order property definition
<fantasai> github: https://github.com//issues/5865
<fantasai> TabAtkins: Brought up that the definition of order only mentions flex items, but also applies to other layout modes (grid at least)
<fantasai> TabAtkins: so we should be generalizing this property, but then where should it live?
<fantasai> TabAtkins: We think Display is the most appropriate place for it
<rachelandrew> +1 for display
<fantasai> TabAtkins: Would like resolution to move it to Display, unless someone has a better idea
<fantasai> Rossen_: Feedback or other opinions?
<fantasai> smfr: Seems fine
<emilio> Display or maybe position sounds good
<fantasai> Rossen_: objections?
<fantasai> RESOLVED: Move order property to Display module

@SebastianZ
Copy link
Contributor

In the discussion participants were biased by initially mentioning Display as the preferred spec. The alternatives (Alignment, Box, new spec.) were not discussed.

I don't have a strong opinion on that topic, though when making a decision all options should be considered.

Sebastian

@fantasai
Copy link
Collaborator

Alignment is about the positioning of boxes relative to their containing blocks, and order has nothing to do with that. So I think it wouldn't make sense there.

CSS Box Model focuses on margins and paddings and defining the various box areas. I don't think order really fits into there either.

CSS Display focuses on the construction of the box tree, and order effectively reorders elements in the box tree. This is why I think it's the best fit.

Note the +1 from @rachelandrew, who teaches this stuff. If she felt it was an uncertain fit, I think she would not have marked +1.

@SebastianZ
Copy link
Contributor

@fantasai Thank you for the explanation for why you decided moving it to the Display module!

I previously wrote to extend the Alignment module to move it there, as I thought it would fit best there, or create a completely new spec. for it, but anyway, your explanation is fine for me.

Sebastian

@tabatkins
Copy link
Member

Fixed in 0259f1f

@tabatkins tabatkins added Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. and removed Needs Edits labels Aug 5, 2021
fantasai added a commit that referenced this issue Aug 12, 2021
…and some explanation). Move flexbox example back to flexbox. #5865
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-display-3 Current Work css-flexbox-1 Current Work css-grid-1
Projects
None yet
Development

No branches or pull requests

7 participants