The Future of CSS Layout
63 likes•26,886 views
The document discusses the evolution of CSS layout techniques, highlighting issues with traditional table layout and float layouts, and introduces alternatives such as display inline-block and display table-cell. It also explores future possibilities with CSS3, including content-flow modules, grid template layout, and flexbox, emphasizing their advantages in flexible and responsive web design. The author encourages experimentation with these techniques for modern web development.
The Future of CSS Layout
- 1. The Future of CSS Layout October 22, 2012 by Zoe Mickley Gillenwater Future of Web Design @zomigi zomigi.com
- 2. What I do Books Web Stunning CSS3: Accessibility A Project-based Guide to specialist at AT&T the Latest in CSS Visual designer www.stunningcss3.com CSS developer and consultant Flexible Web Design: Creating Liquid and Elastic Layouts with CSS www.flexiblewebbook.com 2
- 4. Problems with table layout • Complicated/bulky markup • Accessibility problems • Slower browser rendering • Rigid designs • Spacer gifs 4
- 5. the present float layout 5
- 6. Advantages of floats in layout • Less HTML than tables • More flexibility to change layout than tables • Can change visual order to not match HTML (somewhat) • Other content aware of floats' presence • Can use clear to get blocks out of the way 6
- 7. Problems with float layout • Visual location tied to HTML order (somewhat) • Wrapping/float drop • Difficulty with containment • Difficulty with equal-height columns • No float:center 7
- 8. ? what are the alternatives 8
- 9. Alternative: display inline-block * * only partial support in IE 7 and 6 9
- 10. I wish my parents would stop treating me like I’m inline. Can’t they see I’m a block now? 10
- 11. Use: centered nav bar nav ul { margin: 0; padding: 0; border-bottom: 3px solid #fff; list-style: none; text-align: center; } nav li { display: inline-block; vertical-align: bottom; margin: 0 .2em; padding: .3em .5em; ... } 11
- 12. Use: centered nav bar • List horizontally centered • Links aligned on bottom • Links have top and bottom padding • Links can be different heights • List contains links (see its bottom border) 12
- 13. Alternative: display table-cell * * only in IE 8 and later 13
- 14. How table display works • Makes boxes act like table equivalents • Example: boxes with display:table-cell act like <td> and sit on same line • Good for grid-like layouts • Disadvantage: tied to HTML order 14
- 15. Use: hybrid fixed-fluid layout section { display: table; table-layout: fixed; width: 100%; } article { display: table-cell; padding: 10px; vertical-align: top; } article.fixed { width:250px; } 15
- 16. Use: hybrid fixed-fluid layout 16
- 17. the future a whole bunch of CSS3 17
- 18. CSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into multiple, separate boxes • Exclusions and Shapes: make content flow around and within areas in more intricate ways than floating 18
- 19. Grid Template Layout http://dev.w3.org/csswg/css3-layout/ X X X X 10 * * with -ms- prefix 19
- 20. How grid template works Define invisible grid of rows and columns and specify which pieces of content go into which “slot” body { grid: "a a a a" a "b c c d" } b c d nav { flow: a } #main { flow: c } aside { flow: d } #news { flow: b } 20
- 21. How grid template works Define invisible grid of rows and columns and specify which pieces of content go into which “slot” body { grid: "c d" c d "b b" "a a" } b nav { flow: a } #main { flow: c } aside { flow: d } #news { flow: b } a 21
- 22. How grid template works Use ::slot to style slots with: • overflow • background properties • margin properties • column properties • padding properties • vertical-align • border properties • writing-mode • box-shadow • direction • box-decoration-break For example: body::slot(c) { background: #7FD13B; vertical-align: top; } 22
- 23. Flexible Box Layout www.w3.org/TR/css3-flexbox/ 21 X 12.1 X X † * * † with -webkit- prefix can be switched on in version 18 nightlies 23
- 24. How flexbox works • Make boxes automatically grow to fill space or shrink to avoid overflow • Give boxes proportional measurements • Lay out boxes in any direction • Align boxes on any side • Place boxes out of order from HTML 24
- 25. Let’s try flexbox out on this page 25
- 26. Original CSS .feature { float: left; width: 30%; margin: 0 4.5% 0 0; padding: 130px 0 0 0; } 26
- 27. Create a flex container <div id="features-wrapper"> <div class="feature" id="feature-candy"> ...</div> <div class="feature" id="feature-pastry"> ...</div> <div class="feature" id="feature-dessert"> ...</div> </div> Make sure to add the #features-wrapper { -moz, -ms, and -webkit prefixed values and display: flex; properties in real life! } 27
- 28. Specify direction of flex items #features-wrapper { display: flex; flex-direction: row; default value } Could switch to vertical stacking in mobile/narrow-screen media query: #features-wrapper { display: flex; flex-direction: column; } 28
- 29. Make flex items flexible .feature { flex: 1 1 0px; margin-right: 40px; padding: 130px 0 0 0; } 29
- 30. Make flex items flexible .feature { flex: 1 1 0px; margin-right: 40px; flex basis padding: 130px 0 0 0; } flex shrink factor Same as: flex grow factor .feature { flex: 1; margin-right: 40px; padding: 130px 0 0 0; } 30
- 31. Add a fourth feature box <div id="features-wrapper"> <div class="feature" id="feature-candy"> ...</div> <div class="feature" id="feature-pastry"> ...</div> <div class="feature" id="feature-dessert"> ...</div> <div class="feature" id="feature-bread"> ...</div> </div> 31
- 32. All boxes adjust in width 32
- 33. Don’t need to do this anymore .2up .feature { width: 45%; ... } .3up .feature { width: 30%; ... } .4up .feature { width: 22%; ... } 33
- 34. Highlight a sale category .sale { padding: 130px 20px 20px 20px; border-radius: 3px; background-color: hsla(0,0%,100%,.4); } What percentage width would I set to make this twice as wide as other boxes, if I weren’t using flex? 34
- 35. Make sale box twice as wide .sale { flex: 2; padding: 130px 20px 20px 20px; border-radius: 3px; background-color: hsla(0,0%,100%,.4); } 35
- 36. Default equal-height columns! #features-wrapper { display: flex; align-items: stretch; } This is the default value, so we don’t need to actually set this property, but this shows you what it looks like. 36
- 37. Vertical centering with ease! #features-wrapper { display: flex; align-items: center; } 37
- 38. Visual order = HTML order 38
- 39. Move sale box to front of line .sale { order: -1; flex: 2; padding: 130px 20px 20px 20px; border-radius: 3px; background-color: hsla(0,0%,100%,.4); } Default order value is 0 for all flex items, so -1 moves this one before others 39
- 40. New visual order, same HTML 40
- 41. Accessibility implications • Pro: keep content in logical order in HTML instead of structuring HTML to achieve visual layout • Con: focus/tab order won’t always match expected order, may jump around seemingly randomly 41
- 42. Columns are too narrow 42
- 43. Create multi-line flex container #features-wrapper { display: flex; flex-wrap: wrap; Allow children flex items to wrap to multiple lines } .sale { order: -1; Make box fill line flex: 1 1 100%; Remove gap to right, margin: 0 0 20px 0; add space below padding: 130px 20px 20px 20px; border-radius: 3px; background-color: hsla(0,0%,100%,.4); } 43
- 44. Flex items can now wrap 44
- 45. Change icon position .sale { order: -1; flex: 1 1 100%; margin: 0 0 20px 0; padding: 20px 20px 1px 170px; border-radius: 3px; background-color: hsla(0,0%,100%,.4); background-position: 20px 0; } 45
- 46. Final layout 46
- 47. use flexbox now for progressive enhancement 47
- 48. How can I make this form: • Display on a single line with image • Vertically centered with image • Span full-width of container 48
- 49. Inline-block achieves: Display on a single line with image Vertically centered with image X Span full-width of container 49
- 50. Different units make life hard Pixels Ems Some mystery percentage 50
- 51. Make the text input flex #order, #order form { Make outer div and form display: flex; into flex containers align-items: center; } Vertically center kiddos #order form { Make form take up all flex: 1; } space next to image #order #message { Make text input take up flex: 1; all space in form left min-width: 7em; after label and button margin: 0 5px; } But don’t let it get crazy- small 51
- 52. Use inline-block with flexbox 52
- 53. Use inline-block with flexbox #order img, #order form { display: inline-block; vertical-align: middle; } #order, #order form { display: flex; align-items: center; } #order form { flex: 1; } #order #message { flex: 1; min-width: 7em; margin: 0 5px; } 53
- 54. Full-width nav bar nav ul { nav li { display: table; display: table-cell; width: 100%; text-align: center; } margin: 0; padding: 0; list-style: none; } 54
- 55. Not so hot with no backgrounds Uneven spacing Don’t like these gaps 55
- 56. Even spacing with flexbox nav ul { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; } 56
- 57. Use inline-block with flexbox 57
- 58. Use inline-block with flexbox nav ul { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; text-align: center; } nav li { display: inline-block; } 58
- 59. Or use Modernizr script http://modernizr.com nav ul { nav li { display: table; display: table-cell; width: 100%; } margin: 0; .flexbox nav li { padding: 0; display: list-item; list-style: none; } } .flexbox nav ul { display: flex; } 59
- 60. go forth and practice 60
- 61. Learn more Download slides and get links at http://zomigi.com/blog/future-css-layout-fowd Zoe Mickley Gillenwater @zomigi [email protected] zomigi.com | stunningcss3.com | flexiblewebbook.com Title photo by Gilderic Photography (http://www.flickr.com/photos/gilderic/6885830288/) Rocket designed by Jason Peters from The Noun Project 61