Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Layout: O ontem, o hoje e o depois

CSS Layout: O ontem, o hoje e o depois

Partindo do ontem com layouts em tabelas e passando pelo hoje com o box model, iremos explorar as limitações dessas abordagens para entender o que as novas técnicas do depois – flexbox, grids, regions e exclusions – vêm a solucionar.

Loop Infinito

June 15, 2013
Tweet

More Decks by Loop Infinito

Other Decks in Programming

Transcript

  1. bells and whistles “Storage of ASCII text, and display on

    24x80 screens, is in the short term sufficient, and essential. Addition of graphics would be an optional extra with very much less penetration for the moment.” Tim Berners-Lee
  2. • 1995 html 3.0 • <table> • nunca foi aprovado

    • text flow ao redor de <img> • elementos matematicos
  3. html 3.2 spec “HTML 3.2 includes a widely deployed subset

    of the specification given in RFC 1942 and can be used to markup tabular material or for layout purposes.” W3C HTML 3.2 specification – http://www.w3.org/TR/REC-html32
  4. codigo <!-- ** M A I N T A B

    L E ** --> <A NAME="topofpage"> <TABLE WIDTH=598 BORDER=0 CELLPADDING=0 CELLSPACING=0> <!-- ROW 1 --> <TR VALIGN="TOP"> <!-- ** M A R G I N M E N U ** --> <TD WIDTH=128 ROWSPAN=3 VALIGN="TOP"> <IMG SRC="/web/19961022105458im_/http://www4.apple.com elements/spacer2.gif" WIDTH=128 HEIGHT=1 ALT=""><BR> <!-- SERVER SIDE IMAGE MAP --> <A HREF="/web/19961022105458/http://www5.apple.com/cgi imagemap/mapserve.acgi$home/newsidebar.map"> <IMG SRC="/web/19961022105458im_/http://www4.apple.com elements/sidebar.gif" WIDTH=125 HEIGHT=262 BORDER=0 ALT="Navigation Graphic - See Below" ISMAP USEMAP="#newsidebar"></A>
  5. • 1996 (com o HTML 3.2) css 1 • separa

    estilo da marcacao • reuso de estilos • independente do conteudo (?)
  6. css 1 • block-level elements • margin, padding e border

    • width e height • display e float
  7. • 1998 - 2011! css 2.1 • position • top,

    bottom, left e right • min-height e max-height • min-width e max-width
  8. • 1999 - HOJE css 3 • CSS basic user

    interface module level 3 • box-sizing: border-box
  9. margin-top margin-bottom margin-left margin-right padding-top padding-bottom padding-left padding-right width x

    height border-top-width border-bottom-width border-left-width border-right-width top bottom left right
  10. margin-top margin-bottom margin-left margin-right padding-top padding-bottom padding-left padding-right border-top-width border-bottom-width

    border-left-width border-right-width width x height top bottom left right bo x- siz i ng: bor der-box ;
  11. • igualar altura de regioes problemas Lorem ipsum dolor sit

    amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <aside> .box { height: 200px; } aside, .box { height: 100%; float: left; }
  12. • igualar altura de regioes problemas Lorem ipsum dolor sit

    amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <aside> .box { height: 200px; } aside, .right { height: 100%; float: left; } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsum tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  13. • igualar altura de regioes problemas Lorem ipsum dolor sit

    amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <aside> .box { height: 200px; } aside, .right { height: 100%; float: left; } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsum tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  14. • igualar altura de regioes problemas Lorem ipsum dolor sit

    amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <aside> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsum tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .box { height: 200px; display: table-row; } aside, .right { height: 100%; float: left; display: table-cell; }
  15. table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group <table>

    tabelas... <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table>
  16. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

    eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non LOOP Lorem ipsum Dolor sit amet Consectetur adipisicing Sed do eiusmod bla bla footer
  17. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

    eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non LOOP Lorem ipsum Dolor sit amet Consectetur adipisicing Sed do eiusmod bla bla footer flexivel fixo
  18. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

    eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non LOOP Lorem ipsum Dolor sit amet Consectetur adipisicing Sed do eiusmod bla bla footer flexivel fixo
  19. css grid-definition-rows: auto auto auto; 1 2 3 4 5

    6 grid-definition-columns: auto auto; display: grid;
  20. minmax() minmax(800px, 1fr); minmax(2fr, 3fr); minmax(50%, 100%); minmax(10em, 80%); minmax(min-content,

    1fr); minmax(70%, max-content); minmax(calc(70% + 80px + 9em), 1fr); minmax(min-content, max-content) = auto
  21. html <div class="reg5">c5</div> <div class="reg1">c1</div> <div class="reg2">c2</div> <div class="reg3">c3</div> <div

    class="reg4">c4</div> • sem blocos para linha/coluna <div class="reg6">c6</div> 1 2 3 4 5 6 <div class="container"> </div>
  22. html • a ordem nao importa 1 2 3 4

    5 6 <div class="container"> </div> <div class="reg5">c5</div> <div class="reg1">c1</div> <div class="reg2">c2</div> <div class="reg3">c3</div> <div class="reg4">c4</div> <div class="reg6">c6</div>
  23. css 2 3 5 6 .reg1 { grid-column: 1; grid-row:

    1; } c1 .reg4 { grid-column: 2; grid-row: 2; } c4
  24. css 2 5 6 .reg1 { grid-column: 1; grid-row: 1;

    } c1 .reg4 { grid-column: 2; grid-row: 2; } c4 .reg3 { grid-column: 1; grid-row: 2; } c3
  25. css 2 5 6 .reg1 { grid-column: 1; grid-row: 1;

    } c1 .reg4 { grid-column: 2; grid-row: 2; } c4 .reg3, .reg6 { grid-column: 1; grid-row: 2; } c3 c6
  26. grid-template .container { display: grid; grid-template: "header header" "aside content"

    "footer footer"; } .reg1 { grid-area: header } .reg2 { grid-area: aside } .reg3 { grid-area: content } .reg4 { grid-area: content } .reg5 { grid-area: content } .reg6 { grid-area: footer }
  27. templates responsivos @media (orientation: landscape){ .container { grid-template: "header header

    header" "menu content aside" "footer footer footer"; } } @media (orientation: portrait){ .container { grid-template: "header header" "menu menu" "content content" "aside footer"; } }
  28. grow and shrink .a .a .b .container { display: flex;

    flex-direction: row; } .container 600px
  29. flex-grow .a .a .b .a { flex-basis: 113px; flex-grow: 0;

    flex-shrink: 1; } .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; } .container 600px
  30. .a .a .b .a { flex-basis: 113px; flex-grow: 0; flex-shrink:

    1; } .container 800px .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; } flex-grow
  31. flex-shrink .a .a .b .container 600px .a { flex-basis: 113px;

    flex-grow: 0; flex-shrink: 1; } .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; }
  32. .a .b .container 500px .a .a { flex-basis: 113px; flex-grow:

    0; flex-shrink: 1; } .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; } flex-shrink
  33. cálculo do espaço .a .b .container 800px .c .a {

    flex: 1; } .b { flex: 2; } .c { flex: 1; } css .container { display: flex; }
  34. cálculo do espaço .a .b .container 800px .c .a {

    flex: 1; } .b { flex: 2; } .c { flex: 1; } css .container { display: flex; }
  35. cálculo do espaço .a .b .container 800px .c .a {

    flex: 1; } .b { flex: 2; } .c { flex: 1; } css .container { display: flex; }
  36. cálculo do espaço .a .b .container 800px .c .a {

    flex: 1; } .b { flex: 2; } .c { flex: 1; } css .container { display: flex; }
  37. cálculo do espaço .a .b .container 800px .c 1 +

    2 + 1 = 4 800 / 4 = 200 .a = 1 * 200 .b = 2 * 200 .c = 1 * 200 unidade proporção 200px 400px 200px
  38. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit

    odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed layout em colunas Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.
  39. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

    eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. layouts complexos
  40. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

    eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. layouts complexos
  41. html <div class=”content”> ... </div> <div class=”region region-1”></div> <img src=””

    /> <div class=”region region-2”></div> <div class=”region region-3”></div> <div class=”region region-4”></div>
  42. html <div class=”content”> ... </div> <div class=”region region-1”></div> <img src=””

    /> <div class=”region region-2”></div> <div class=”region region-3”></div> <div class=”region region-4”></div>
  43. @region @region .region-3 { p { color: #BADA55; } }

    @region .region-4 { p { color: red; } }
  44. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

    eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. layouts complexos
  45. shape-inside .circulo { // shape-inside: circle(cx, cy, radius); shape-inside: circle(50%,

    50%, 50%); } Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac amet euism Sed
  46. shape-inside A Sed molestie augue sit amet leo consequat as

    due to a posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac am .estrela { shape-inside: polygon(0px 150px, ...); }
  47. shapes com regions A Sed molestie augue sit amet leo

    consequat as due to a posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, soc at consectetur adipisg elit. Vivamus luctus urna sed urna ultricies ser am Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac amet euism Sed
  48. shape-outside p { // shape-outside: circle(cx, cy, radius); shape-outside: circle(-50px,

    50%, 50%); } Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. nulla fringilla, orci ac amet euism sed orci ac amet euism
  49. shape-outside .circulo { // shape-outside: circle(cx, cy, radius); shape-outside: circle(-100px,

    50%, 50%); } Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. nulla fringilla, orci ac amet euism sed orci ac amet euism -100px 50%