The multicolumn challenge: accepted!
-
Upload
lorena-ramonda -
Category
Presentations & Public Speaking
-
view
88 -
download
1
Transcript of The multicolumn challenge: accepted!
![Page 1: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/1.jpg)
The multicolumn challenge: ACCEPTED!
Lorena Ramonda,CSSDay 2017, Faenza
![Page 2: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/2.jpg)
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
![Page 3: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/3.jpg)
Creating a multicolumn layouttechniques + performance + compatibility
![Page 4: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/4.jpg)
columns and rows (lots of)
![Page 5: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/5.jpg)
layout 3 columns full height
![Page 6: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/6.jpg)
TechniquesChallenge # 1
![Page 7: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/7.jpg)
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
![Page 8: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/8.jpg)
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
![Page 9: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/9.jpg)
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
![Page 10: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/10.jpg)
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
![Page 11: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/11.jpg)
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
![Page 12: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/12.jpg)
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
![Page 13: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/13.jpg)
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
![Page 14: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/14.jpg)
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
![Page 15: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/15.jpg)
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!
![Page 16: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/16.jpg)
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
![Page 17: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/17.jpg)
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!
![Page 18: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/18.jpg)
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
![Page 19: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/19.jpg)
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
![Page 20: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/20.jpg)
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
![Page 21: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/21.jpg)
Challenge # 1 - Techniques - WRAPPING UP
Table Div display:table Div floated
CSS3 Flexbox CSS3 Grid CSS3 Columns
![Page 22: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/22.jpg)
Testing a multicolumn layout
![Page 23: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/23.jpg)
“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
![Page 24: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/24.jpg)
How I measured page performanceChrome Developer Tool & others
![Page 25: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/25.jpg)
Page rendering
Reference: http://taligarsiel.com/Projects/howbrowserswork1.htm
HTML parse
CSS parse
Attachmentloading
DOM
![Page 26: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/26.jpg)
Page rendering
Reference: http://taligarsiel.com/Projects/howbrowserswork1.htm
HTML parse
CSS parse
Attachment Layout
rendering
loading
DOM
![Page 27: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/27.jpg)
Page rendering
Reference: http://taligarsiel.com/Projects/howbrowserswork1.htm
HTML parse
CSS parse
Attachment Layout CompositingPainting
rendering painting
loading
DOM
![Page 28: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/28.jpg)
csstriggers.com
![Page 29: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/29.jpg)
![Page 30: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/30.jpg)
Collecting data
Average among 4 collecting sessions divided in:
no CPU throttlinghigh end devicelow end device
WindowsLinusMac
![Page 31: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/31.jpg)
PerformanceChallenge # 2
![Page 32: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/32.jpg)
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
![Page 33: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/33.jpg)
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
![Page 34: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/34.jpg)
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
![Page 35: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/35.jpg)
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
![Page 36: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/36.jpg)
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
![Page 37: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/37.jpg)
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
![Page 38: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/38.jpg)
Challenge # 2 - Performance - WRAPPING UP
Table Div display:table Div floated
CSS3 Flexbox CSS3 Grid CSS3 Columns
![Page 39: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/39.jpg)
CompatibilityChallenge # 3
![Page 40: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/40.jpg)
Table
Since HTML 3.2
Styled inline because CSS wasn’t out yet
![Page 41: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/41.jpg)
Div floated
Since HTML 4.0
CSS introduction (finally!)
![Page 42: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/42.jpg)
Div display:table
![Page 43: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/43.jpg)
CSS3 Columns
![Page 44: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/44.jpg)
CSS3 Flexbox
![Page 45: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/45.jpg)
CSS3 Grid
![Page 46: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/46.jpg)
Table Div display:table Div floated
CSS3 Flexbox CSS3 Grid CSS3 Columns
Challenge # 3 - Compatibility - WRAPPING UP
![Page 47: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/47.jpg)
Table Div display:table Div floated
CSS3 Flexbox CSS3 Grid CSS3 Columns
Conclusion
![Page 48: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/48.jpg)
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
![Page 49: The multicolumn challenge: accepted!](https://reader031.fdocuments.us/reader031/viewer/2022022411/58ec8b231a28abe83b8b45cb/html5/thumbnails/49.jpg)
Any questions?
RESOURCES:
slideshare.net/lorenaramonda/the-multicolumn-challenge-accepted
github.com/lorenaramonda/multicolumn-challenge
—
lorena.ramonda.me ~ [email protected]
bitbull.it
@mobiledesignah