Let’s end the z index competition

Transcript

1. 1 Let’s end the z-index competition Yi LI
2. 2 󰟲 ~5 years experience of front-end engineer.
 󰏦 Have been working in Japan for 2 years. 
 🗾 I hope I can visit all prefectures before I leave Japan!
 Yi LI

3. 3 • “Each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.” (from w3c css specification[1]) • Browsers paints HTML elements according to their order on the document. z-index gives us control over when an element is painted. About z-index
4. 4 Fun facts about z-index Source: https://almanac.httparchive.org/en/2019/css#z-index
5. 5 Fun facts about z-index Source: https://psuter.net/2019/07/07/z-index Most common indices (10%) (1%)
6. 6 Fun facts about z-index The largest known z-index value
7. 7 9999999999999999999999999999999999999999999999999999999999999999 9999999999999999999999999999999999999999999999999999999999999999 9999999999999999999999999999999999999999999999999999999999999999 9999999999999999999999999999999999999999999999999999999999999999 9999999999999999999999999999999999999999999999999999999999999999 9999999999999999999999999999999999999999999999999999999999999999 9999999999999999999999999999999999999999999999999999999999999999 9999999999999999999999999999999999999999999999999999999999999999 9999999999999999999999999999999999999999999999999999999999999999 9999999999999999999999999999999999999999999999999999999999999999 9999999999999999999999999999999999999999999999999999999999999999 9999999999999999999999999999999999999999999999999999999999999999 999999999999 !important The largest known z-index value Source: https://almanac.httparchive.org/en/2019/css#z-index
8. 8 Can z-index solve all layering issue? (demo)
9. 9 Stacking context Stacking Context
10. 10 • Within a stacking context, elements are painted together, other items outside the same stacking context can’t be painted between them. • Having an active z-index triggers the creation of a stacking context. • Other ways including “overflow: scroll”, “opacity: < 1” (listed in MDN stacking context) Stacking context
11. 11 ReactDOM.createPortal(child, container) (or <Portal /> for Vue) Ways to avoid multiple stacking context layer ReactDOM.createPortal( <Wrapper data-testid="loading-scrim"> <Scrim /> <MerIconLoadingOutline /> </Wrapper>, document.body, );
12. 12 • position: fixed elements • Reorder elements of a ui library But… some cases are unavoidable
13. 13 • CSS variable is similar to JS constants. It allows a value to be stored in one place, then referenced in multiple other places. • z-index values in our current project: maximum: 2, minimum: -1. Make z-index more maintainable --top-z-index: 2; // modal, header...etc. --library-z-index: 1; --nonhoverable-z-index: -1;
14. 14 Style-lint can help us check if any z-index value is hard-coded. - stylelint-number-z-index-constraint (constraint z-index value in a range) - stylelint-no-z-index (restrict z-index to be allowed values ) - stylelint-z-index-no-number (not allow z-index to be hard-coded number) Using CSS variable
15. 15 Reference 1. https://almanac.httparchive.org/en/2019/css#z-index 2. https://psuter.net/2019/07/07/z-index 3. https://www.w3.org/TR/CSS21/visuren.html#z-index 4. https://abandonedwig.info/blog/2020/07/03/css-painting-order.ht ml 5. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positionin g/Understanding_z_index/The_stacking_context 6. https://reactjs.org/docs/portals.html 7. https://vueschool.io/articles/vuejs-tutorials/portal-a-new-feature-in -vue-3/
16. 16 Thank you for your listening!