Confirmed users
489
edits
Platform/Layout/CSS Containment Best Practices: Difference between revisions
Platform/Layout/CSS Containment Best Practices (view source)
Revision as of 16:01, 17 December 2018
, 17 December 2018add a clarifying parenthetical
(Add some suggested best practices for CSS Containment in frontend code as suggested in https://phabricator.services.mozilla.com/D9963#366194) |
m (add a clarifying parenthetical) |
||
| Line 10: | Line 10: | ||
** It should be fixed-size (it shouldn't depend on its contents for sizing). The <code>size</code> containment keyword makes the element size itself as if it had no children, which in most cases means it'll collapse to nothing unless you give it a specified width and/or height. | ** It should be fixed-size (it shouldn't depend on its contents for sizing). The <code>size</code> containment keyword makes the element size itself as if it had no children, which in most cases means it'll collapse to nothing unless you give it a specified width and/or height. | ||
** It should have descendants which are expected to change & trigger frequent reflows. (For example: the web console's text-input area, which requires a reflow for every keypress as new user-typed characters are added & trigger context-highlighting.) | ** It should have descendants which are expected to change & trigger frequent reflows. (For example: the web console's text-input area, which requires a reflow for every keypress as new user-typed characters are added & trigger context-highlighting.) | ||
** It should be in a document where there may be lots of content outside of the contained element's subtree. | ** It should be in a document where there may be lots of content outside of the contained element's subtree (so that there will be nontrivial amounts of reflow work that we can avoid by applying containment). | ||
* <b>Do not</b> use CSS containment on: | * <b>Do not</b> use CSS containment on: | ||
** ...lots and lots of elements. Reflow roots are stored in a flat list, and it's possible there may be a negative performance impact if there are too many of them. (See e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=1510100 -- needs further study...) | ** ...lots and lots of elements. Reflow roots are stored in a flat list, and it's possible there may be a negative performance impact if there are too many of them. (See e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=1510100 -- needs further study...) | ||