[Fx 113] PSA - Changes to default element display-model

Let's have this post here also...

As a part of the front-end technical modernization the old xul box model is being replaced with modern flexbox all around the UI. Relevant bug 1820534

Previously, just about everything used display: -moz-box but in Firefox 113 the default display model was changed to modern display: flex instead.

What this means first-hand is that all legacy box model -related properties will not do anything anymore so things like -moz-box-ordinal-group, -moz-box-orient, -moz-box-direction, -moz-box-align, -moz-box-pack or -moz-box-flex won't have any effect.

The suggested way to deal with this is to just update your styles to use equivalent flexbox properties. Additionally, the old display: -moz-box is treated as invalid property value

Some examples of conversions:

• display: -moz-box -> display: flex
• -moz-box-ordinal-group: 0 -> order: -1
• -moz-box-orient: vertical -> flex-direction: column
• -moz-box-direction: reverse -> flex-direction: row-reverse
• -moz-box-align: center -> align-content: center or align-items: center depending on what you are doing.
• -moz-box-pack: start -> justify-content: flex-start or justify-items: flex-start
• -moz-box-flex: 10 -> flex-grow: 10

Notes about order vs. -moz-box-ordinal-group: order supports negative values, whereas ordinal-group does not. Default value of order is 0 but default of ordinal-group is 1 so you might need to change what value to apply for it to have any effect.

Also, see this firefox-dev post for more information.