Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The multicolumn challenge: accepted!

343 views

Published on

Seen at CSSDay 2017, in Faenza Italy

  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

The multicolumn challenge: accepted!

  1. 1. The multicolumn challenge: ACCEPTED! Lorena Ramonda, CSSDay 2017, Faenza
  2. 2. lorena.ramonda.me @mobiledesignah github.com/lorenaramonda Lorena Ramonda Front end developer @ Progressive enhancement lover Semantic structures and cleanliness of code fan Interested about accessibility
  3. 3. Creating a multicolumn layout techniques + performance + compatibility
  4. 4. columns and rows (lots of)
  5. 5. layout 3 columns full height
  6. 6. Techniques Challenge # 1
  7. 7. 1 - Tables <table class="layout"> <tr> <td class="left-col"> ... </td> <td class="center-col"> ... </td> <td class="right-col"> ... </td> </tr> </table> .layout { width: 100%; border-collapse: collapse; border-spacing: 0; } .layout td { width: 33.3333%; vertical-align: top; } Grid
  8. 8. 1 - Tables <table class="layout"> <tr> <td class="left-col"> ... </td> <td class="center-col"> ... </td> <td class="right-col"> ... </td> </tr> </table> .layout { width: 100%; border-collapse: collapse; border-spacing: 0; min-height: 100vh; } .layout td { width: 33.3333%; vertical-align: top; } Columns with same height
  9. 9. 2 - Div display:table <div class="layout"> <div class="row"> <div class="left-col"> ... </div> <div class="center-col"> ... </div> <div class="right-col"> ... </div> </div> </div> .layout { display: table; width: 100%; } .layout > .row { display: table-row; margin-bottom: 1em; } .layout > .row > div { display: table-cell; width: 33.3333%; } Grid
  10. 10. 2 - Div display:table <div class="layout"> <div class="row"> <div class="left-col"> ... </div> <div class="center-col"> ... </div> <div class="right-col"> ... </div> </div> </div> .layout { display: table; width: 100%; min-height: 100vh; } .layout > .row { display: table-row; margin-bottom: 1em; } .layout > .row > div { display: table-cell; width: 33.3333%; } Columns with same height
  11. 11. 3 - Div floated <div class="layout"> <div class="left-col"> ... </div> <div class="center-col"> ... </div> <div class="right-col"> ... </div> </div> .layout:before, .layout:after { content: ''; display: table; height: 0; clear: both; } .layout > div { float: left; width: 33.3333%; } Grid
  12. 12. 3 - Div floated <div class="layout"> <div class="left-col"> ... </div> <div class="center-col"> ... </div> <div class="right-col"> ... </div> </div> .layout:before, .layout:after { content: ''; display: table; height: 0; clear: both; } .layout > div { float: left; width: 33.3333%; min-height: 100vh; } Columns with same height
  13. 13. 3 - Div floated <div class="layout" id="fullpage"> <div class="left-col"> ... </div> <div class="center-col"> ... </div> <div class="right-col"> ... </div> </div> .layout:before, .layout:after { content: ''; display: table; height: 0; clear: both; } .layout > div { float: left; width: 33.3333%; min-height: 100vh; } Columns with same height var parent = document.getElementById('fullpage'); parent.querySelectorAll('div').forEach( function (e) { e.style.height = parent.offsetHeight + 'px'; }); Needs JavaScript
  14. 14. 4 - CSS3 Flexbox <div class="layout"> <div class="left-col"> ... </div> <div class="center-col"> ... </div> <div class="right-col"> ... </div> </div> .layout { display: flex; flex-wrap: wrap; } .layout > div { flex: 1 1 33.3333%; } Grid
  15. 15. 4 - CSS3 Flexbox <div class="layout"> <div class="left-col"> ... </div> <div class="center-col"> ... </div> <div class="right-col"> ... </div> </div> .layout { display: flex; flex-wrap: wrap; min-height: 100vh; } .layout > div { flex: 1 1 33.3333%; } Columns with same height Yay! It already works!
  16. 16. 5 - CSS3 Grid <div class="layout"> <div class="left-col"> ... </div> <div class="center-col"> ... </div> <div class="right-col"> ... </div> </div> .layout { display: grid; grid-template-columns: 33.33333% 33.33333% 33.33333%; } Grid
  17. 17. 5 - CSS3 Grid <div class="layout"> <div class="left-col"> ... </div> <div class="center-col"> ... </div> <div class="right-col"> ... </div> </div> .layout { display: grid; grid-template-columns: 33.33333% 33.33333% 33.33333%; min-height: 100vh; } Columns with same height Yay! It already works!
  18. 18. 6 - CSS3 Columns <div class="layout"> <div class="left-col"> ... </div> <div class="center-col"> ... </div> <div class="right-col"> ... </div> </div> .layout { -moz-column-count: 3; column-count: 3; column-gap: 0; } .layout div { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } Grid
  19. 19. 6 - CSS3 Columns <div class="layout"> <div class="left-col"> ... </div> <div class="center-col"> ... </div> <div class="right-col"> ... </div> </div> .layout { -moz-column-count: 3; column-count: 3; column-gap: 0; } .layout div { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; min-height: 100vh; } Columns with same height
  20. 20. 6 - CSS3 Columns <div class="layout" id="fullpage"> <div class="left-col"> ... </div> <div class="center-col"> ... </div> <div class="right-col"> ... </div> </div> .layout { -moz-column-count: 3; column-count: 3; column-gap: 0; } .layout div { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; min-height: 100vh; } Columns with same height var parent = document.getElementById('fullpage'); parent.querySelectorAll('div').forEach( function (e) { e.style.height = parent.offsetHeight + 'px'; }); Needs JavaScript
  21. 21. Challenge # 1 - Techniques - WRAPPING UP Table Div display:table Div floated CSS3 Flexbox CSS3 Grid CSS3 Columns
  22. 22. Testing a multicolumn layout
  23. 23. “The browser reacts to CSS properties changes. They don’t always require the same amount of work on layout, painting and compositing thus choosing different kind of changes impacts on rendering performance.” ~ Chris Coyer
  24. 24. How I measured page performance Chrome Developer Tool & others
  25. 25. Page rendering Reference: http://taligarsiel.com/Projects/howbrowserswork1.htm HTML parse CSS parse Attachment loading DOM
  26. 26. Page rendering Reference: http://taligarsiel.com/Projects/howbrowserswork1.htm HTML parse CSS parse Attachment Layout rendering loading DOM
  27. 27. Page rendering Reference: http://taligarsiel.com/Projects/howbrowserswork1.htm HTML parse CSS parse Attachment Layout CompositingPainting rendering painting loading DOM
  28. 28. csstriggers.com
  29. 29. Collecting data Average among 4 collecting sessions divided in: no CPU throttling high end device low end device Windows Linus Mac
  30. 30. Performance Challenge # 2
  31. 31. No CPU High end Low end AVERAGE TOTAL AVERAGE in ms 6) CSS3 Columns 824,45 289,625 592,275 1647,225 952,45 1057,125 4367,425 1570,575 1736,575 2.279,70 937,55 1.128,66 1448,636111
  32. 32. No CPU High end Low end AVERAGE TOTAL AVERAGE in ms 5) Div display:table 625,225 186,3 477,175 1262,525 359,3 875,3 3255,775 880,5 1347,475 1.714,51 475,37 899,98 1029,952778
  33. 33. No CPU High end Low end AVERAGE TOTAL AVERAGE in ms 4) CSS3 Grid 490,45 194,3 443,6 1124,6 357,925 823,175 2731,525 845,875 1334,6 1.448,86 466,03 867,13 927,3388889
  34. 34. No CPU High end Low end AVERAGE TOTAL AVERAGE in ms 3) Div floated 503,1 207,15 420,325 1099,15 362,675 864,575 2571,15 832,825 1382,975 1.391,13 467,55 889,29 915,9916667
  35. 35. No CPU High end Low end AVERAGE TOTAL AVERAGE in ms 2) Table 521,95 160,4 408,875 1053 306,975 727,25 2605,175 769,675 1188,2 1.393,38 412,35 774,78 860,1666667
  36. 36. No CPU High end Low end AVERAGE TOTAL AVERAGE in ms 1) CSS3 Flexbox 441 164 400,575 812,6 303,175 760,825 2495,275 741,825 1165,775 1.249,63 403,00 775,73 809,45
  37. 37. Challenge # 2 - Performance - WRAPPING UP Table Div display:table Div floated CSS3 Flexbox CSS3 Grid CSS3 Columns
  38. 38. Compatibility Challenge # 3
  39. 39. Table Since HTML 3.2 Styled inline because CSS wasn’t out yet
  40. 40. Div floated Since HTML 4.0 CSS introduction (finally!)
  41. 41. Div display:table
  42. 42. CSS3 Columns
  43. 43. CSS3 Flexbox
  44. 44. CSS3 Grid
  45. 45. Table Div display:table Div floated CSS3 Flexbox CSS3 Grid CSS3 Columns Challenge # 3 - Compatibility - WRAPPING UP
  46. 46. Table Div display:table Div floated CSS3 Flexbox CSS3 Grid CSS3 Columns Conclusion
  47. 47. Thanks for listening and to Fabio Gollinucci for suggesting testing tools and helping testing Irene Iaccio, Federica Villata and Antonio Carboni for the inspiration Alessandro Ronchi for mentoring and Bitbull and From the Front community for support encouraging
  48. 48. Any questions? RESOURCES: slideshare.net/lorenaramonda/the-multicolumn-challenge-accepted github.com/lorenaramonda/multicolumn-challenge — lorena.ramonda.me ~ lorena@ramonda.me bitbull.it @mobiledesignah

×