[Inactive CSS] The order property should be supported valid for grids
Categories
(DevTools :: Inspector: Rules, defect, P3)
Tracking
(firefox69 wontfix, firefox70 wontfix, firefox71 wontfix, firefox72 wontfix, firefox73 wontfix, firefox74 wontfix, firefox86 verified)
People
(Reporter: zavecz.krisztina, Assigned: sebo)
References
(Blocks 1 open bug)
Details
(Keywords: dev-doc-needed, Whiteboard: [dt-q])
Attachments
(2 files)
devtools-grid-item-order-2.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0
Steps to reproduce:
I have a standard div container with grid display property. It contains 2 children (grid items). I set "order" on grid items (because I want to change their appearance order relative to DOM structure. It works, but...
Actual results:
...Firefox DevTools informs me that order has no effect on this element, because order is only supported for flex or inline-flex containers. But this is not true, as practically, it works. Even MDN says that grid containers are supported: https://developer.mozilla.org/en-US/docs/Web/CSS/order
Expected results:
DevTools should not grey out this rule, as the feature is implemented in the browser (order property is supported both for flex- and grid containers).
|
||
Comment 1•5 years ago
|
||
I do not know whether this is valid or not, but I will set this bug's component as (DevTools) Inspector and hope it will be addressed by a developer. In case it is incorrect, please set a more appropriate component.
Furthermore, Krisztina, can you provide a link that reproduces this issue so that other versions and operating systems can be verified?
Thank you for your contribution!
|
Reporter | |
Comment 2•5 years ago
|
||
Dear Daniel,
Thank you for moving the issue to the right place. :) (sorry I missed that there is also a setting for component).
Here is a publicly available link with reproduction of the issue:
https://codepen.io/zkriszti/pen/QWLQzVP
|
|
||
Comment 3•5 years ago
|
||
This issue occurs on all platforms and main versions. Thanks, Krisztina.
|
||
Updated•5 years ago
|
|
Assignee | |
Comment 4•4 years ago
|
||
| str | ||
To give some steps to reproduce the issue:
- Open the Codepen of comment 2
- Inspect the "COL-1 CONTENT" element
- Check the
orderproperty in the Rules panel
=> It is marked as inactive while it actually applies to the grid item.
|
||
Updated•4 years ago
|
|
|
||
Comment 5•4 years ago
|
||
According to https://www.w3.org/TR/css-grid-1/#order-property, 'order' does indeed affect grid items.
|
|
||
Comment 6•4 years ago
|
||
Another thing to keep in mind is that order affects the auto-placement of grid items. Grid items that are explicitly placed using grid-column, grid-row, grid-area, absolute positioning, etc. should still show the warning.
|
|
Assignee | |
Comment 8•3 years ago
•
|
||
(In reply to Micah Tigley [:mtigley] from comment #6)
Grid items that are explicitly placed using grid-column, grid-row, grid-area, absolute positioning, etc. should still show the warning.
That's not correct regarding grid-column, grid-row, and grid-area. order also affects the painting order, so for overlapping grid items order has some influence on their display.
At the same time, order is obviously also influenced by z-index.
Sebastian
|
|
Assignee | |
Comment 9•3 years ago
|
||
|
||
Updated•3 years ago
|
|
|
Assignee | |
Comment 10•3 years ago
|
||
The attached patch fixes the bug related to the message that order is inactive on grid items. I've created a separate bug for the z-index case mentioned in comment 8 because that's an enhancement.
Sebastian
|
|
||
Updated•3 years ago
|
|
||
Comment 11•3 years ago
|
||
Pushed by apavel@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/1f3a9cec2fbe Corrected inactive CSS rule for order property, making it valid for grid items. r=jdescottes
|
||
Comment 12•3 years ago
|
||
| bugherder | ||
|
||
Comment 13•3 years ago
|
||
| bugherder | ||
|
||
Updated•3 years ago
|
|
|
Assignee | |
Comment 15•3 years ago
|
||
Maybe not worth documenting this change alone but maybe together with the change in bug 1551569 for the release notes of 86.
Sebastian
Description
•