Gameface introduces a special
display mode named
simple. The goal of the
display: simple mode is to improve the performance when there is no demand for a complex layout algorithm.
When to use it
You can use the simple layout when the positions of the elements are defined and don’t rely on automatic positioning or special sizing by the layout algorithm. The simple layout requires
left to be set. The
height of the elements can be set explicitly or they will be calculated as the sum of the sizes of all static or relatively positioned children in the DOM.
If the page has mostly absolutely positioned elements and additional performance is needed, it’s a good idea to think about using simple layout. You can still have sub-trees in the DOM that use the standard layout modes. Those subtrees have to start with an element that has
Simple layout enabling
To enable the simple layout, you have to use the
display: simple CSS style on the BODY element.
<body style="display: simple;"> <!-- PAGE --> </body>
This is the only way to get the simple layout to work. In all other cases when the BODY has standard display values (
flex), Gameface will use the standard algorithms as per the CSS standard.
The user has to specifically opt-in for the simple layout. This avoids accidentally using the simple layout and getting inconsistent results compared to the standard.
Mixing simple layout with flex
You can switch from simple to flex, but you cannot switch from flex to simple. Simple layout can be switched to flex layout by specifying
display: flex; on any child. The whole sub-tree, the element with display mode flex and its descendants, will use the flex layout. If you set
display: simple; to any child in the flex sub-tree, it will be ignored.
<body style="display: simple;"> <div> This is simple laid out </div> <div style="display: flex;"> This and all descendants will be laid as flex <div style="display: simple;"> This is still laid as flex </div> </div> </body>
Specific simple layout behavior
- Static-positioned elements are not offset by sibling elements, they are always laid at the content position of the parent.
- Relatively positioned elements always have an offset of
topfrom the content position of the parent and are not affected by siblings.
- Margins are not used since there isn’t automatic positioning in order to be respected.
bottomvalues are not supported.
max-heightare not supported.
- Flex-related properties have no effect: